Display & Typography

Display, Typography and Spacing

Integrate Vuetify-Display and Layout behaviour by using schema property 'class'. But you can pass any other CSS class into your control here.

mySchema: {
  name: { 
    type: 'text', 
    class:'title d-flex d-sm-none ml-4 pa-1 float-left' 
  }
}

for available Options look here at some extracts from original vuetify doc.

Vuetify Display

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.

• .d-{value} for xs

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

The value property is one of:

• none

• inline

• inline-block

• block

• table

• table-cell

• table-row

• flex

• inline-flex

Vuetify Typography

These classes can be applied to all breakpoints from xs to xl. When using a base class, .text-{value}, it is inferred to be .text-xs-${value}.

• .text-{value} for xs

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

The value property is one of:

• h1

• h2

• h3

• h4

• h5

• h6

• subtitle-1

• subtitle-2

• body-1

• body-2

• button

• caption

• overline

Vuetify Spacing

The helper classes apply margin or padding to an element ranging from 0 to 16. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.

The property applies the type of spacing:

• m - applies margin

• p - applies padding

The direction designates the side the property applies to:

• t - applies the spacing for margin-top and padding-top

• b - applies the spacing for margin-bottom and padding-bottom

• l - applies the spacing for margin-left and padding-left

• r - applies the spacing for margin-right and padding-right

• s - applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)

• e - applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)

• x - applies the spacing for both *-left and *-right

• y - applies the spacing for both *-top and *-bottom

• a - applies the spacing for the property in all directions

The size controls the increment of the property in 4px intervals:

• 0 - eliminates all margin or padding by setting it to 0

• 1 - sets margin or padding to 4px

• 2 - sets margin or padding to 8px

• 3 - sets margin or padding to 12px

• 4 - sets margin or padding to 16px

• ...

• 16 - sets margin or padding to 64px

• n1 - sets margin to -4px

• n2 - sets margin to -8px

• n3 - sets margin to -12px

• n4 - sets margin to -16px

• ...

• n16 - sets margin to -64px

• auto - sets the spacing to auto

Vuetify Float

Floats can also be applied on a per breakpoint (viewport) basis.

Float left on viewports sized SM (small) or wider Float left on viewports sized MD (medium) or wider Float left on viewports sized LG (large) or wider Float left on viewports sized XL (extra-large) or wider

Here is a list of all the available support classes:

• .float-left

• .float-right

• .float-none

• .float-sm-left

• .float-sm-right

• .float-sm-none

• .float-md-left

• .float-md-right

• .float-md-none

• .float-lg-left

• .float-lg-right

• .float-lg-none

• .float-xl-left

• .float-xl-right

• .float-xl-none

Example