ion-cheat-sheet

Opacity of the backdrop

Background of the alert

Height of the alert

Maximum height of the alert

Maximum width of the alert

Minimum height of the alert

Minimum width of the alert

Width of the alert

Background of the button

Background of the button when focused with the tab key

Opacity of the button background when focused with the tab key

Background of the button on hover

Opacity of the background on hover

Border radius of the button

Text color of the button

Text color of the button when focused with the tab key

Text color of the button on hover

Font size of the button icon

Font weight of the button icon

Bottom margin of the button icon

Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon

Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon

Top margin of the button icon

Bottom padding of the button icon

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon

Top padding of the button icon

Bottom margin of the button

Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button

Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button

Top margin of the button

Minimum height of the button

Minimum width of the button

Opacity of the button

Bottom padding of the button

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button

Top padding of the button

Color of the button ripple effect

Transition of the button

Background of the badge

Text color of the badge

Bottom padding of the badge

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge

Top padding of the badge

Background color of the breadcrumb when focused

Text color of the breadcrumb

Text color of the active breadcrumb

Text color of the breadcrumb when focused

Text color of the breadcrumb on hover

Color of the card subtitle

Color of the card title

Padding for the Column

Padding for the Column on lg screens and up

Padding for the Column on md screens and up

Padding for the Column on sm screens and up

Padding for the Column on xl screens and up

Padding for the Column on xs screens and up

The number of total Columns in the Grid

The primary background of the datetime component.

The primary background of the datetime component in RGB format.

The text color of the title.

The color of the gradient covering non-selected items when using a wheel style layout, or in the month/year picker for grid style layouts. Must be in RGB format, e.g. 255, 255, 255.

The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts.

Background of the button

Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.

Opacity of the button background when pressed

Background of the button when focused with the tab key

Opacity of the button background when focused with the tab key

Background of the button on hover

Opacity of the button background on hover

Border color of the button

Border radius of the button

Border style of the button

Border width of the button

Box shadow of the button

Font size of the close icon

Text color of the button

Text color of the button when pressed

Text color of the button when focused with the tab key

Text color of the button on hover

Bottom padding of the button

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button

Top padding of the button

Color of the button ripple effect

Transition of the button

Padding for the Grid

Padding for the Grid on lg screens

Padding for the Grid on md screens

Padding for the Grid on sm screens

Padding for the Grid on xl screens

Padding for the Grid on xs screens

Width of the fixed Grid

Width of the fixed Grid on lg screens

Width of the fixed Grid on md screens

Width of the fixed Grid on sm screens

Width of the fixed Grid on xl screens

Width of the fixed Grid on xs screens

Background of the item option

Color of the item option

Color of the label. This property is only available when using ion-label inside of an ion-item.

Opacity of the backdrop

Background of the loading dialog

Height of the loading dialog

Maximum height of the loading dialog

Maximum width of the loading dialog

Minimum height of the loading dialog

Minimum width of the loading dialog

Color of the loading spinner

Width of the loading dialog

Background of the menu

Height of the menu

Maximum height of the menu

Maximum width of the menu

Minimum height of the menu

Minimum width of the menu

Width of the menu

Background of the menu button

Background of the menu button when focused with the tab key

Opacity of the menu button background when focused with the tab key

Background of the menu button on hover

Opacity of the background on hover

Border radius of the menu button

Color of the menu button

Color of the menu button when focused with the tab key

Color of the menu button on hover

Bottom padding of the button

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button

Top padding of the button

Opacity of the backdrop

Background of the modal content

Border color of the modal content

Border radius of the modal content

Border style of the modal content

Border width of the modal content

Height of the modal

Maximum height of the modal

Maximum width of the modal

Minimum height of the modal

Minimum width of the modal

Width of the modal

Opacity of the backdrop

Background of the picker

Background of the picker in rgb format

Border color of the picker

Border radius of the picker

Border style of the picker

Border width of the picker

Height of the picker

Maximum height of the picker

Maximum width of the picker

Minimum height of the picker

Minimum width of the picker

Width of the picker

Opacity of the backdrop

Background of the popover

Box shadow of the popover

Height of the popover

Maximum height of the popover

Maximum width of the popover

Minimum height of the popover

Minimum width of the popover

The amount to move the popover by on the x-axis

The amount to move the popover by on the y-axis

Width of the popover

Background of the router link

Text color of the router link

Background of the select

Color of the select border

Radius of the select border. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.

Style of the select border

Width of the select border

The color of the highlight on the select when focused

The color of the highlight on the select when invalid

The color of the highlight on the select when valid

Bottom padding of the select

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select

Top padding of the select

Color of the select placeholder text

Opacity of the select placeholder text

The color of the ripple effect on MD mode.

Background of the tab bar

Border of the tab bar

Color of the tab bar

Background of the tab button

Background of the tab button when focused with the tab key

Opacity of the tab button background when focused with the tab key

Color of the tab button

Color of the tab button when focused with the tab key

Color of the selected tab button

Bottom padding of the tab button

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button

Top padding of the tab button

Color of the button ripple effect

Background of the textarea

Color of the border below the textarea when using helper text, error text, or counter

Border radius of the textarea

Style of the border below the textarea when using helper text, error text, or counter

Width of the border below the textarea when using helper text, error text, or counter

Color of the text

The color of the highlight on the textarea when focused

The color of the highlight on the textarea when invalid

The color of the highlight on the textarea when valid

Bottom padding of the textarea

Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea

Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea

Top padding of the textarea

Color of the placeholder text

Style of the placeholder text

Weight of the placeholder text

Opacity of the placeholder text

Background of the toast

Border color of the toast

Border radius of the toast

Border style of the toast

Border width of the toast

Box shadow of the toast

Color of the button text

Color of the toast text

Position from the right if direction is left-to-right, and from the left if direction is right-to-left

Height of the toast

Maximum height of the toast

Maximum width of the toast

Minimum height of the toast

Minimum width of the toast

Position from the left if direction is left-to-right, and from the right if direction is right-to-left

White space of the toast message

Width of the toast