Vuetify

商店

企业版

显示助手允许你控制内容的显示。这包括根据当前的视图或实际的元素显示类型有条件地显示。

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

指定元素的 display 属性。这些类可以应用到所有从 xsxl 的断点,并且没有特定的断点。

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg and xl

value 属性可以为下列之一:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

为显示帮助类设置一个特定的断点时,它会应用到对应宽度及其更宽的屏幕比如,d-lg-flex 会应用到 lgxl 大小的屏幕上。

根据当前 viewport 有条件地显示一个元素。断点功能类总是自下而上应用。这意味着如果你使用 .d-none,它将适用于所有断点。然而 .d-md-none 只适用于 md 及以上。

Screen SizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-flex
Hidden only on sm.d-sm-none .d-md-flex
Hidden only on md.d-md-none .d-lg-flex
Hidden only on lg.d-lg-none .d-xl-flex
Hidden only on xl.d-xl-none
Visible on all.d-flex
Visible only on xs.d-flex .d-sm-none
Visible only on sm.d-none .d-sm-flex .d-md-none
Visible only on md.d-none .d-md-flex .d-lg-none
Visible only on lg.d-none .d-lg-flex .d-xl-none
Visible only on xl.d-none .d-xl-flex

此外,你还可以使用横向显示助手类来显示基于当前 viewport 的元素。可以使用以下格式 hidden-{breakpoint}-{condition} 应用这些类

condition 适用于基于以下前置条件的类:

  • only - 仅通过 xl 断点将元素隐藏在 xs
  • and-down - 在指定的断点处隐藏元素,并通过 lg 断点向下隐藏 sm 上的元素
  • and-up - 在指定的断点处隐藏元素,并通过 lg 断点向上隐藏 sm 上的元素

此外,media types 可以使用 only 条件作为目标。目前支持 hidden-screen-onlyhidden-print-only

你还可以在打印时更改显示属性。

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

打印功能类也可以与无打印显示功能组合。

Use the d-sr utility classes to conditionally hide content on all devices except screen readers.

  • d-sr-only visually hides elements but will still announce to screen readers.
  • d-sr-only-focusable visually hides an element until it is focused. This is useful when implementing skip links.
Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!