Vuetify

ショップ

企業向け

新しいクラスを作成せずにレイアウトを更新します。Spacingヘルパーは、要素のパディングとマージンを変更する場合に便利です。

プレイグラウンドを使用して、さまざまなヘルパークラスで何ができるかを試してください。それらがどのように機能するかの説明については、以下の動作のしくみセクションを参照してください。

ヘルパークラスは* margin* または padding0〜12 の範囲で要素に適用します。各サイズ増分は、一般的なMaterial Design spacingsに合わせて設計されています。これらのクラスは、次の形式 {property}{direction}-{size} を使用して適用できます。

property は、間隔のタイプを適用します。

  • m - marginを適用します。
  • p - paddingを適用します。

directionは、プロパティが適用される側を指定します。

  • t - margin-toppadding-topの間隔を適用します。
  • b - margin-bottompadding-bottomの間隔を適用します。
  • l - margin-leftpadding-leftの間隔を適用します。
  • r - margin-rightpadding-rightの間隔を適用します。
  • s - margin-left/padding-left (LTR modeの場合)margin-right/padding-right (RTL modeの場合) の間隔を適用します
  • e - margin-right/padding-right (LTR modeの場合)margin-left/padding-left (RTL modeの場合) の間隔を適用します
  • x - *-left*-right の両方の間隔を適用します。
  • y - *-top*-bottom の両方の間隔を適用します。
  • a - プロパティの間隔をすべての方向に適用します。

size は、プロパティの増分を 4px 間隔で制御します。

  • 1 - margin または padding を4pxに設定します。
  • 2 - margin または padding を8pxに設定します。
  • 3 - margin または padding を12pxに設定します。
  • 4 - margin または padding を16pxに設定します。
  • 5 - margin または padding を20pxに設定します。
  • 6 - margin または padding を24pxに設定します。
  • 7 - margin または padding を28pxに設定します。
  • 8 - margin または padding を32pxに設定します。
  • 9 - margin または padding を36pxに設定します。
  • 10 - margin または padding を40pxに設定します。
  • 11 - margin または padding を44pxに設定します。
  • 12 - margin または padding を48pxに設定します。
  • n1 - ネガティブ margin を 4px に設定します。
  • 'auto' - 間隔を auto に設定します。

以下に、簡単な例から複雑な例まで示します。

marginヘルパークラスを使えば、コンテンツを簡単に水平方向にセンタリングすることができます。

マージンは、ネガティブ側にも同様に 1から12 の間隔で適用できます。

Vuetify comes with a 12 point grid system built using Flexbox. Spacing is used to create specific layouts within an application's content. It consists of 5 media breakpoints used to target specific screen sizes or orientations: xs, sm, md, lg and xl. The default resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the breakpoint service config.

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

The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}. This does not apply to xs as it is inferred; e.g. ma-xs-2 equals ma-2.

以下に、簡単な例から複雑な例まで示します。

Spacing with md and lg breakpoints

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!