mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
docs(components): document what start and end mean for CSS variables (#18538)
This commit is contained in:
@ -175,17 +175,17 @@ export const TabButtonExample: React.FunctionComponent = () => (
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ---------------------- | ------------------------------------ |
|
||||
| `--background` | Background of the tab button |
|
||||
| `--background-focused` | Background of the focused tab button |
|
||||
| `--color` | Color of the tab button |
|
||||
| `--color-selected` | Color of the selected tab button |
|
||||
| `--padding-bottom` | Bottom padding of the tab button |
|
||||
| `--padding-end` | End padding of the tab button |
|
||||
| `--padding-start` | Start padding of the tab button |
|
||||
| `--padding-top` | Top padding of the tab button |
|
||||
| `--ripple-color` | Color of the button ripple effect |
|
||||
| Name | Description |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| `--background` | Background of the tab button |
|
||||
| `--background-focused` | Background of the tab button when focused with the tab key |
|
||||
| `--color` | Color of the tab button |
|
||||
| `--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 |
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
@ -3,15 +3,15 @@
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the tab button
|
||||
* @prop --background-focused: Background of the focused tab button
|
||||
* @prop --background-focused: Background of the tab button when focused with the tab key
|
||||
*
|
||||
* @prop --color: Color of the tab button
|
||||
* @prop --color-selected: Color of the selected tab button
|
||||
*
|
||||
* @prop --padding-top: Top padding of the tab button
|
||||
* @prop --padding-end: End padding of the tab button
|
||||
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the tab button
|
||||
* @prop --padding-bottom: Bottom padding of the tab button
|
||||
* @prop --padding-start: Start padding of the tab button
|
||||
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the tab button
|
||||
*
|
||||
* @prop --ripple-color: Color of the button ripple effect
|
||||
*/
|
||||
@ -24,7 +24,7 @@
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
|
||||
|
||||
outline: none;
|
||||
|
||||
background: var(--background);
|
||||
|
Reference in New Issue
Block a user