👤 By ionicer | 📆
Instructions: To find a property, hit control + F in your browser
This is very simple cheat sheet for IONIC I use often as a reference of all the components availble as of June 24, 2020
ion-action-sheet
Docs| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the action sheet group |
| --button-background | Background of the action sheet button |
| --button-background-activated | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
| --button-background-activated-opacity | Opacity of the action sheet button background when pressed |
| --button-background-focused | Background of the action sheet button when tabbed to |
| --button-background-focused-opacity | Opacity of the action sheet button background when tabbed to |
| --button-background-hover | Background of the action sheet button on hover |
| --button-background-hover-opacity | Opacity of the action sheet button background on hover |
| --button-background-selected | Background of the selected action sheet button |
| --button-background-selected-opacity | Opacity of the selected action sheet button background |
| --button-color | Color of the action sheet button |
| --button-color-activated | Color of the action sheet button when pressed |
| --button-color-focused | Color of the action sheet button when tabbed to |
| --button-color-hover | Color of the action sheet button on hover |
| --button-color-selected | Color of the selected action sheet button |
| --color | Color of the action sheet text |
| --height | height of the action sheet |
| --max-height | Maximum height of the action sheet |
| --max-width | Maximum width of the action sheet |
| --min-height | Minimum height of the action sheet |
| --min-width | Minimum width of the action sheet |
| --width | Width of the action sheet |
| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the alert |
| --height | Height of the alert |
| --max-height | Maximum height of the alert |
| --max-width | Maximum width of the alert |
| --min-height | Minimum height of the alert |
| --min-width | Minimum width of the alert |
| --width | Width of the alert |
| --border-radius | Border radius of the avatar and inner image |
| --background | Background of the button |
| --background-focused | Background of the button when focused with the tab key |
| --background-focused-opacity | Opacity of the button background when focused with the tab key |
| --background-hover | Background of the button on hover |
| --background-hover-opacity | Opacity of the background on hover |
| --border-radius | Border radius of the button |
| --color | Text color of the button |
| --color-focused | Text color of the button when focused with the tab key |
| --color-hover | Text color of the button on hover |
| --icon-font-size | Font size of the button icon |
| --icon-font-weight | Font weight of the button icon |
| --icon-margin-bottom | Bottom margin of the button icon |
| --icon-margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
| --icon-margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
| --icon-margin-top | Top margin of the button icon |
| --icon-padding-bottom | Bottom padding of the button icon |
| --icon-padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
| --icon-padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
| --icon-padding-top | Top padding of the button icon |
| --margin-bottom | Bottom margin of the button |
| --margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
| --margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
| --margin-top | Top margin of the button |
| --min-height | Minimum height of the button |
| --min-width | Minimum width of the button |
| --opacity | Opacity of the button |
| --padding-bottom | Bottom padding of the button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| --padding-top | Top padding of the button |
| --ripple-color | Color of the button ripple effect |
| --transition | Transition of the button |
| --background | Background of the badge |
| --color | Text color of the badge |
| --padding-bottom | Bottom padding of the badge |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge |
| --padding-top | Top padding of the badge |
| --background | Background of the button |
| --background-activated | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
| --background-activated-opacity | Opacity of the button when pressed |
| --background-focused | Background of the button when focused with the tab key |
| --background-focused-opacity | Opacity of the button when focused with the tab key |
| --background-hover | Background of the button on hover |
| --background-hover-opacity | Opacity of the background on hover |
| --border-color | Border color of the button |
| --border-radius | Border radius of the button |
| --border-style | Border style of the button |
| --border-width | Border width of the button |
| --box-shadow | Box shadow of the button |
| --color | Text color of the button |
| --color-activated | Text color of the button when pressed |
| --color-focused | Text color of the button when focused with the tab key |
| --color-hover | Text color of the button when hover |
| --opacity | Opacity of the button |
| --padding-bottom | Bottom padding of the button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| --padding-top | Top padding of the button |
| --ripple-color | Color of the button ripple effect |
| --transition | Transition of the button |
| --background | Background of the card |
| --color | Color of the card |
| --color | Color of the card subtitle |
| --color | Color of the card title |
| --background | Background of the checkbox icon |
| --background-checked | Background of the checkbox icon when checked |
| --border-color | Border color of the checkbox icon |
| --border-color-checked | Border color of the checkbox icon when checked |
| --border-radius | Border radius of the checkbox icon |
| --border-style | Border style of the checkbox icon |
| --border-width | Border width of the checkbox icon |
| --checkmark-color | Color of the checkbox checkmark when checked |
| --checkmark-width | Stroke width of the checkbox checkmark |
| --size | Size of the checkbox icon |
| --transition | Transition of the checkbox icon |
| --background | Background of the chip |
| --color | Color of the chip |
| --ion-grid-column-padding | Padding for the Column |
| --ion-grid-column-padding-lg | Padding for the Column on lg screens and up |
| --ion-grid-column-padding-md | Padding for the Column on md screens and up |
| --ion-grid-column-padding-sm | Padding for the Column on sm screens and up |
| --ion-grid-column-padding-xl | Padding for the Column on xl screens and up |
| --ion-grid-column-padding-xs | Padding for the Column on xs screens and up |
| --ion-grid-columns | The number of total Columns in the Grid |
| --background | Background of the content |
| --color | Color of the content |
| --keyboard-offset | Keyboard offset of the content |
| --offset-bottom | Offset bottom of the content |
| --offset-top | Offset top of the content |
| --padding-bottom | Bottom padding of the content |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content |
| --padding-top | Top padding of the content |
| --padding-bottom | Bottom padding of the datetime |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the datetime |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the datetime |
| --padding-top | Top padding of the datetime |
| --placeholder-color | Color of the datetime placeholder |
| --background | Background of the button |
| --background-activated | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
| --background-activated-opacity | Opacity of the button background when pressed |
| --background-focused | Background of the button when focused with the tab key |
| --background-focused-opacity | Opacity of the button background when focused with the tab key |
| --background-hover | Background of the button on hover |
| --background-hover-opacity | Opacity of the button background on hover |
| --border-color | Border color of the button |
| --border-radius | Border radius of the button |
| --border-style | Border style of the button |
| --border-width | Border width of the button |
| --box-shadow | Box shadow of the button |
| --close-icon-font-size | Font size of the close icon |
| --color | Text color of the button |
| --color-activated | Text color of the button when pressed |
| --color-focused | Text color of the button when focused with the tab key |
| --color-hover | Text color of the button on hover |
| --padding-bottom | Bottom padding of the button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| --padding-top | Top padding of the button |
| --ripple-color | Color of the button ripple effect |
| --transition | Transition of the button |
| --ion-grid-padding | Padding for the Grid |
| --ion-grid-padding-lg | Padding for the Grid on lg screens |
| --ion-grid-padding-md | Padding for the Grid on md screens |
| --ion-grid-padding-sm | Padding for the Grid on sm screens |
| --ion-grid-padding-xl | Padding for the Grid on xl screens |
| --ion-grid-padding-xs | Padding for the Grid on xs screens |
| --ion-grid-width | Width of the fixed Grid |
| --ion-grid-width-lg | Width of the fixed Grid on lg screens |
| --ion-grid-width-md | Width of the fixed Grid on md screens |
| --ion-grid-width-sm | Width of the fixed Grid on sm screens |
| --ion-grid-width-xl | Width of the fixed Grid on xl screens |
| --ion-grid-width-xs | Width of the fixed Grid on xs screens |
| --background | Background of the input |
| --color | Color of the input text |
| --padding-bottom | Bottom padding of the input |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input |
| --padding-top | Top padding of the input |
| --placeholder-color | Color of the input placeholder text |
| --placeholder-font-style | Font style of the input placeholder text |
| --placeholder-font-weight | Font weight of the input placeholder text |
| --placeholder-opacity | Opacity of the input placeholder text |
| --background | Background of the item |
| --background-activated | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple. |
| --background-activated-opacity | Opacity of the item background when pressed |
| --background-focused | Background of the item when focused with the tab key |
| --background-focused-opacity | Opacity of the item background when focused with the tab key |
| --background-hover | Background of the item on hover |
| --background-hover-opacity | Opacity of the background of the item on hover |
| --border-color | Color of the item border |
| --border-radius | Radius of the item border |
| --border-style | Style of the item border |
| --border-width | Width of the item border |
| --color | Color of the item |
| --color-activated | Color of the item when pressed |
| --color-focused | Color of the item when focused with the tab key |
| --color-hover | Color of the item on hover |
| --detail-icon-color | Color of the item detail icon |
| --detail-icon-font-size | Font size of the item detail icon |
| --detail-icon-opacity | Opacity of the item detail icon |
| --highlight-color-focused | The color of the highlight on the item when focused |
| --highlight-color-invalid | The color of the highlight on the item when invalid |
| --highlight-color-valid | The color of the highlight on the item when valid |
| --highlight-height | The height of the highlight on the item |
| --inner-border-width | Width of the item inner border |
| --inner-box-shadow | Box shadow of the item inner |
| --inner-padding-bottom | Bottom padding of the item inner |
| --inner-padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
| --inner-padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
| --inner-padding-top | Top padding of the item inner |
| --min-height | Minimum height of the item |
| --padding-bottom | Bottom padding of the item |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item |
| --padding-top | Top padding of the item |
| --ripple-color | Color of the item ripple effect |
| --transition | Transition of the item |
| --background | Background of the item divider |
| --color | Color of the item divider |
| --inner-padding-bottom | Bottom inner padding of the item divider |
| --inner-padding-end | End inner padding of the item divider |
| --inner-padding-start | Start inner padding of the item divider |
| --inner-padding-top | Top inner padding of the item divider |
| --padding-bottom | Bottom padding of the item divider |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider |
| --padding-top | Top padding of the item divider |
| --background | Background of the item option |
| --color | Color of the item option |
| --color | Color of the label |
| --background | Background of the list header |
| --border-color | Color of the list header border |
| --border-style | Style of the list header border |
| --border-width | Width of the list header border |
| --color | Color of the list header text |
| --inner-border-width | Width of the inner list header border |
| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the loading dialog |
| --height | Height of the loading dialog |
| --max-height | Maximum height of the loading dialog |
| --max-width | Maximum width of the loading dialog |
| --min-height | Minimum height of the loading dialog |
| --min-width | Minimum width of the loading dialog |
| --spinner-color | Color of the loading spinner |
| --width | Width of the loading dialog |
| --background | Background of the menu |
| --height | Height of the menu |
| --max-height | Maximum height of the menu |
| --max-width | Maximum width of the menu |
| --min-height | Minimum height of the menu |
| --min-width | Minimum width of the menu |
| --width | Width of the menu |
| --background | Background of the menu button |
| --background-focused | Background of the menu button when focused with the tab key |
| --background-focused-opacity | Opacity of the menu button background when focused with the tab key |
| --background-hover | Background of the menu button on hover |
| --background-hover-opacity | Opacity of the background on hover |
| --border-radius | Border radius of the menu button |
| --color | Color of the menu button |
| --color-focused | Color of the menu button when focused with the tab key |
| --color-hover | Color of the menu button on hover |
| --padding-bottom | Bottom padding of the button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| --padding-top | Top padding of the button |
| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the modal content |
| --border-color | Border color of the modal content |
| --border-radius | Border radius of the modal content |
| --border-style | Border style of the modal content |
| --border-width | Border width of the modal content |
| --height | Height of the modal |
| --max-height | Maximum height of the modal |
| --max-width | Maximum width of the modal |
| --min-height | Minimum height of the modal |
| --min-width | Minimum width of the modal |
| --width | Width of the modal |
| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the picker |
| --background-rgb | Background of the picker in rgb format |
| --border-color | Border color of the picker |
| --border-radius | Border radius of the picker |
| --border-style | Border style of the picker |
| --border-width | Border width of the picker |
| --height | Height of the picker |
| --max-height | Maximum height of the picker |
| --max-width | Maximum width of the picker |
| --min-height | Minimum height of the picker |
| --min-width | Minimum width of the picker |
| --width | Width of the picker |
| --backdrop-opacity | Opacity of the backdrop |
| --background | Background of the popover |
| --box-shadow | Box shadow of the popover |
| --height | Height of the popover |
| --max-height | Maximum height of the popover |
| --max-width | Maximum width of the popover |
| --min-height | Minimum height of the popover |
| --min-width | Minimum width of the popover |
| --width | Width of the popover |
| --background | Same as --buffer-background when using a determinate progress bar, otherwise it styles the background of the ion-progress-bar itself. |
| --buffer-background | Color of the buffer bar |
| --progress-background | Color of the progress bar |
| --border-radius | Border radius of the radio |
| --color | Color of the radio |
| --color-checked | Color of the checked radio |
| --inner-border-radius | Border radius of the inner checked radio |
| --bar-background | Background of the range bar |
| --bar-background-active | Background of the active range bar |
| --bar-border-radius | Border radius of the range bar |
| --bar-height | Height of the range bar |
| --height | Height of the range |
| --knob-background | Background of the range knob |
| --knob-border-radius | Border radius of the range knob |
| --knob-box-shadow | Box shadow of the range knob |
| --knob-size | Size of the range knob |
| --pin-background | Background of the range pin |
| --pin-color | Color of the range pin |
| --background | Background of the router link |
| --color | Text color of the router link |
| --background | Background of the searchbar input |
| --border-radius | Border radius of the searchbar input |
| --box-shadow | Box shadow of the searchbar input |
| --cancel-button-color | Color of the searchbar cancel button |
| --clear-button-color | Color of the searchbar clear button |
| --color | Color of the searchbar text |
| --icon-color | Color of the searchbar icon |
| --placeholder-color | Color of the searchbar placeholder |
| --placeholder-font-style | Font style of the searchbar placeholder |
| --placeholder-font-weight | Font weight of the searchbar placeholder |
| --placeholder-opacity | Opacity of the searchbar placeholder |
| --background | Background of the segment button |
| --background | Background of the segment button |
| --background-checked | Background of the checked segment button |
| --background-focused | Background of the segment button when focused with the tab key |
| --background-focused-opacity | Opacity of the segment button background when focused with the tab key |
| --background-hover | Background of the segment button on hover |
| --background-hover-opacity | Opacity of the segment button background on hover |
| --border-color | Color of the segment button border |
| --border-radius | Radius of the segment button border |
| --border-style | Style of the segment button border |
| --border-width | Width of the segment button border |
| --color | Color of the segment button |
| --color-checked | Color of the checked segment button |
| --color-focused | Color of the segment button when focused with the tab key |
| --color-hover | Color of the segment button on hover |
| --indicator-box-shadow | Box shadow on the indicator for the checked segment button |
| --indicator-color | Color of the indicator for the checked segment button |
| --indicator-height | Height of the indicator for the checked segment button |
| --indicator-transform | Transform of the indicator for the checked segment button |
| --indicator-transition | Transition of the indicator for the checked segment button |
| --margin-bottom | Bottom margin of the segment button |
| --margin-end | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
| --margin-start | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
| --margin-top | Top margin of the segment button |
| --padding-bottom | Bottom padding of the segment button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
| --padding-top | Top padding of the segment button |
| --transition | Transition of the segment button |
| --padding-bottom | Bottom padding of the select |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
| --padding-top | Top padding of the select |
| --placeholder-color | Color of the select placeholder text |
| --placeholder-opacity | Opacity of the select placeholder text |
| --background | Background of the skeleton text |
| --background-rgb | Background of the skeleton text in rgb format |
| --border-radius | Border radius of the skeleton text |
| --bullet-background | Background of the pagination bullets |
| --bullet-background-active | Background of the active pagination bullet |
| --progress-bar-background | Background of the pagination progress-bar |
| --progress-bar-background-active | Background of the active pagination progress-bar |
| --scroll-bar-background | Background of the pagination scroll-bar |
| --scroll-bar-background-active | Background of the active pagination scroll-bar |
| --color | Color of the spinner |
| --border | Border between panes |
| --side-max-width | Maximum width of the side pane. Does not apply when split pane is collapsed. |
| --side-min-width | Minimum width of the side pane. Does not apply when split pane is collapsed. |
| --side-width | Width of the side pane. Does not apply when split pane is collapsed. |
| --background | Background of the tab bar |
| --border | Border of the tab bar |
| --color | Color of the tab bar |
| --background | Background of the tab button |
| --background-focused | Background of the tab button when focused with the tab key |
| --background-focused-opacity | Opacity of the tab button background when focused with the tab key |
| --color | Color of the tab button |
| --color-focused | Color of the tab button when focused with the tab key |
| --color-selected | Color of the selected tab button |
| --padding-bottom | Bottom padding of the tab button |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button |
| --padding-top | Top padding of the tab button |
| --ripple-color | Color of the button ripple effect |
| --background | Background of the textarea |
| --border-radius | Border radius of the textarea |
| --color | Color of the text |
| --padding-bottom | Bottom padding of the textarea |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the textarea |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the textarea |
| --padding-top | Top padding of the textarea |
| --placeholder-color | Color of the placeholder text |
| --placeholder-font-style | Style of the placeholder text |
| --placeholder-font-weight | Weight of the placeholder text |
| --placeholder-opacity | Opacity of the placeholder text |
| --border-radius | Border radius of the thumbnail |
| --size | Size of the thumbnail |
| --color | Text color of the title |
| --background | Background of the toast |
| --border-color | Border color of the toast |
| --border-radius | Border radius of the toast |
| --border-style | Border style of the toast |
| --border-width | Border width of the toast |
| --box-shadow | Box shadow of the toast |
| --button-color | Color of the button text |
| --color | Color of the toast text |
| --end | Position from the right if direction is left-to-right, and from the left if direction is right-to-left |
| --height | Height of the toast |
| --max-height | Maximum height of the toast |
| --max-width | Maximum width of the toast |
| --min-height | Minimum height of the toast |
| --min-width | Minimum width of the toast |
| --start | Position from the left if direction is left-to-right, and from the right if direction is right-to-left |
| --white-space | White space of the toast message |
| --width | Width of the toast |
| --background | Background of the toggle |
| --background-checked | Background of the toggle when checked |
| --border-radius | Border radius of the toggle track |
| --handle-background | Background of the toggle handle |
| --handle-background-checked | Background of the toggle handle when checked |
| --handle-border-radius | Border radius of the toggle handle |
| --handle-box-shadow | Box shadow of the toggle handle |
| --handle-height | Height of the toggle handle |
| --handle-max-height | Maximum height of the toggle handle |
| --handle-spacing | Horizontal spacing around the toggle handle |
| --handle-transition | Transition of the toggle handle |
| --handle-width | Width of the toggle handle |
| --background | Background of the toolbar |
| --border-color | Color of the toolbar border |
| --border-style | Style of the toolbar border |
| --border-width | Width of the toolbar border |
| --color | Color of the toolbar text |
| --min-height | Minimum height of the toolbar |
| --opacity | Opacity of the toolbar background |
| --padding-bottom | Bottom padding of the toolbar |
| --padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar |
| --padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar |
| --padding-top | Top padding of the toolbar |