mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Brandy Carney bc3e192427 fix(tab-bar): update to match MD design and remove transforms (#16348 )

Updates the tab-bar to match the MD bottom navigation spec: https://material.io/design/components/bottom-navigation.html#specs

Changes proposed in this pull request:
- moved flex properties to host, inherit in child anchor element
  - this allows the user to customize the tab-button flex properties & fixes #16231
- increased letter spacing
- removed transforms / transitions on active tab
- decreased badge size, add badge styling when empty for MD
- fix badge positioning on both iOS and MD
- updates e2e tests, adds a preview test for tab-bar
- updates documentation surrounding tabs

fixes #16231
fixes ionic-team/ionic-docs#175
fixes ionic-team/ionic-docs#163

2018-11-21 12:07:37 -05:00

usage

fix(tabs): use slot instead of placement

2018-11-01 19:26:05 +01:00

readme.md

fix(tab-bar): update to match MD design and remove transforms (#16348 )

2018-11-21 12:07:37 -05:00

tab-button.ios.scss

fix(tab-bar): update to match MD design and remove transforms (#16348 )

2018-11-21 12:07:37 -05:00

tab-button.ios.vars.scss

refactor(tabs): apply design-doc (#16048 )

2018-10-25 22:13:19 +02:00

tab-button.md.scss

fix(tab-bar): update to match MD design and remove transforms (#16348 )

2018-11-21 12:07:37 -05:00

tab-button.md.vars.scss

fix(tab-bar): update to match MD design and remove transforms (#16348 )

2018-11-21 12:07:37 -05:00

tab-button.scss

fix(tab-bar): update to match MD design and remove transforms (#16348 )

2018-11-21 12:07:37 -05:00

tab-button.tsx

feat(ripple): adds unbounded ripple-effect (#16399 )

2018-11-20 23:37:54 +01:00

readme.md

ion-tab-button

A tab button is a UI component that is placed inside of a tab bar. The tab button can specify the layout of the icon and label and connect to a tab view.

See the tabs documentation for more details on configuring tabs.

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`disabled`	`disabled`	The selected tab component	`boolean`	`false`
`href`	`href`	The URL which will be used as the `href` within this tab's button anchor.	`string \| undefined`	`undefined`
`layout`	`layout`	Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.	`"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`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
`--ripple-color`	Color of the button ripple effect

Built with StencilJS