javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(tabs): document custom properties (#16225)

Browse Source 
* docs(tab-bar): document custom properties

* docs(tab-button): document custom properties

* chore: fix lint error
This commit is contained in:
Cam Wiegert
2018-11-05 00:47:57 -06:00
committed by Manu MA
parent 07571265a3
commit fda48a0e52
4 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/tab-bar/readme.md
View File

@ -36,6 +36,15 @@ In order to have a custom tab bar, it should be provided in user's markup as dir
| `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the tab bar will be translucent. | `boolean` | `false` |
## CSS Custom Properties
| Name | Description |
| -------------- | ------------------------- |
| `--background` | Background of the tab bar |
| `--border` | Border of the tab bar |
| `--color` | Color of the tab bar |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

6
core/src/components/tab-bar/tab-bar.scss
View File

@ -1,6 +1,12 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
:host { :host {
/**
* @prop --background: Background of the tab bar
* @prop --border: Border of the tab bar
* @prop --color: Color of the tab bar
*/
@include padding-horizontal( @include padding-horizontal(
var(--ion-safe-area-left), var(--ion-safe-area-left),
var(--ion-safe-area-right) var(--ion-safe-area-right)

14
core/src/components/tab-button/readme.md
View File

@ -20,6 +20,20 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string` | `undefined` | | `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string` | `undefined` |
## CSS Custom Properties
| Name | Description |
| ----------------------- | ------------------------------------- |
| `--background` | Background of the tab button |
| `--background-selected` | Background of the selected 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 |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

10
core/src/components/tab-button/tab-button.scss
View File

@ -1,6 +1,16 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
:host { :host {
/**
* @prop --background: Background of the tab button
* @prop --background-selected: Background of the selected tab button
* @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-bottom: Bottom padding of the tab button
* @prop --padding-start: Start padding of the tab button
*/
--badge-end: 4%; --badge-end: 4%;
flex: 1; flex: 1;