新しいクラスを作成せずにレイアウトを更新します。Spacingヘルパーは、要素のパディングとマージンを変更する場合に便利です。
プレイグラウンドを使用して、さまざまなヘルパークラスで何ができるかを試してください。それらがどのように機能するかの説明については、以下の動作のしくみセクションを参照してください。
ヘルパークラスは* margin* または padding を 0〜12 の範囲で要素に適用します。各サイズ増分は、一般的なMaterial Design spacingsに合わせて設計されています。これらのクラスは、次の形式 {property}{direction}-{size} を使用して適用できます。
property は、間隔のタイプを適用します。
m-marginを適用します。p-paddingを適用します。
directionは、プロパティが適用される側を指定します。
t-margin-topとpadding-topの間隔を適用します。b-margin-bottomとpadding-bottomの間隔を適用します。l-margin-leftとpadding-leftの間隔を適用します。r-margin-rightとpadding-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.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k 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.