javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment-button): add and document custom properties

Browse Source 
references #14850
This commit is contained in:
Cam Wiegert
2018-08-10 13:34:14 -05:00
parent 154b70e6da
commit 85ffe01675
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/segment-button/readme.md
View File

@ -89,6 +89,27 @@ The value of the segment button.
Emitted when the segment button is clicked. Emitted when the segment button is clicked.
## CSS Custom Properties
| Name | Description |
| ------------------ | ---------------------------- |
| `--background` | Background of the button |
| `--border-color` | Color of the button border |
| `--border-radius` | Radius of the button border |
| `--border-style` | Style of the button border |
| `--border-width` | Width of the button border |
| `--color` | Color of the buton text |
| `--icon-size` | Size of the button icon |
| `--margin-bottom` | Bottom margin of the button |
| `--margin-end` | End margin of the button |
| `--margin-start` | Start margin of the button |
| `--margin-top` | Top margin of the button |
| `--padding-bottom` | Bottom padding of the button |
| `--padding-end` | End padding of the button |
| `--padding-start` | Start padding of the button |
| `--padding-top` | Top padding of the button |
| `--transition` | Transition of the button |
---------------------------------------------- ----------------------------------------------

21
core/src/components/segment-button/segment-button.scss
View File

@ -4,6 +4,24 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --background: Background of the button
* @prop --border-color: Color of the button border
* @prop --border-radius: Radius of the button border
* @prop --border-style: Style of the button border
* @prop --border-width: Width of the button border
* @prop --color: Color of the buton text
* @prop --icon-size: Size of the button icon
* @prop --margin-top: Top margin of the button
* @prop --margin-end: End margin of the button
* @prop --margin-bottom: Bottom margin of the button
* @prop --margin-start: Start margin of the button
* @prop --padding-top: Top padding of the button
* @prop --padding-end: End padding of the button
* @prop --padding-bottom: Bottom padding of the button
* @prop --padding-start: Start padding of the button
* @prop --transition: Transition of the button
*/
--padding-start: 0; --padding-start: 0;
--padding-end: 0; --padding-end: 0;
--padding-top: 0; --padding-top: 0;
@ -12,6 +30,8 @@
flex: 1; flex: 1;
color: var(--color);
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -53,6 +73,7 @@
border-color: var(--border-color); border-color: var(--border-color);
background: var(--background); background: var(--background);
color: inherit;
contain: content; contain: content;
cursor: pointer; cursor: pointer;