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

Files

Brandy Carney 8029df344a fix(segment): set colors in the parent segment and remove the unused color property (#16590 )

* style(theming): clean up sass TODOs

* fix(item): use proper padding on small buttons in an item

* refactor(components): remove color from unused components

* chore(components): update build files to remove color

* fix(tab-bar): remove unused layout prop

* test(segment): add custom test and update standalone

* docs(segment): update usage examples to remove layout

* test(segment): update tests to remove layout

* test(tab-bar): update tests to remove layout

* fix(segment): set the colors in the parent segment

but use them in the child segment button

This allows the user to customize all of the segment buttons from segment, while still allowing the `color` property to take precedence, and they can also edit the segment button colors directly if desired.

This actually fixes some bugs surrounding colors and allows customization for a segment inside of a toolbar.

references #14853

* style(sass): fix lint errors

* chore(build): build files

* fix(segment-button): use transparent background

* docs(segment-button): add color activated back

* why does the build hate me

* fix(segment): set initial css variables to avoid inheriting

* fix(segment): set initial color activated

also add new line to the nav readme because reasons

* test(segment): parent mode should match children

2018-12-06 00:12:14 +01:00

test

fix(segment): set colors in the parent segment and remove the unused color property (#16590 )

2018-12-06 00:12:14 +01:00

usage

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

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

readme.md

fix(segment): set colors in the parent segment and remove the unused color property (#16590 )

2018-12-06 00:12:14 +01:00

tab-bar-interface.ts

fix(angular): adds tabs stack

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

tab-bar.ios.scss

docs(all): add global config docs (#16193 )

2018-11-02 17:30:37 +01:00

tab-bar.md.scss

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

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

tab-bar.scss

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

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

tab-bar.tsx

fix(segment): set colors in the parent segment and remove the unused color property (#16590 )

2018-12-06 00:12:14 +01:00

readme.md

ion-tab-bar

The tab bar is a UI component that contains a set of tab buttons. A tab bar must be provided inside of tabs to communicate with each tab.

Usage

Angular / javascript

<ion-tabs>
  <!-- Tab views -->
  <ion-tab tab="account"></ion-tab>
  <ion-tab tab="contact"></ion-tab>
  <ion-tab tab="settings"></ion-tab>

  <!-- Tab bar -->
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="account">
      <ion-icon name="person"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="contact">
      <ion-icon name="call"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-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`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`
`selectedTab`	`selected-tab`	The selected tab component	`string \| undefined`	`undefined`
`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