Vuetify

ショップ

企業向け

displayヘルパーを使用すると、コンテンツの表示を制御できます。これには、現在のビューポートまたは実際の要素displayタイプに基づいて条件付きで表示されていることが含まれます。

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

Specify the elements display property. These classes can be applied to all breakpoints from xs to xl. When using a base class,.d-{value}, it is inferred to be .d-${value}-xs.

  • xsの場合は、.d-{value}
  • sm, md, lg, xlの場合は、.d-{breakpoint}-{value}

value プロパティは次のいずれか:

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

ディスプレイヘルパークラスに特定のブレークポイントを設定する場合、指定から上のすべての画面幅に適用されます。たとえば、d-lg-flexlgxl のサイズの画面に適用されます。

Conditionally display an element based upon the current viewport. Breakpoint utility classes always apply from the bottom up. That means if you have .d-none, it will apply to all breakpoints. However, .d-md-none will apply to only md and up.

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 - xs からxl のブレークポイントでのみ要素を非表示にします。

Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.

印刷用に表示プロパティを変更することもできます。

  • .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!