From bc3e1924279d60273d876521e0ba809ab5602f26 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 21 Nov 2018 12:07:37 -0500 Subject: [PATCH] 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 --- core/src/components/tab-bar/readme.md | 21 +- core/src/components/tab-bar/tab-bar.scss | 12 +- .../components/tab-bar/test/preview/e2e.ts | 10 + .../tab-bar/test/preview/index.html | 202 ++++++++++ .../tab-bar/test/scenarios/index.html | 360 ++++++++++-------- core/src/components/tab-bar/test/spec/e2e.ts | 10 + .../components/tab-bar/test/spec/index.html | 169 ++++++++ core/src/components/tab-bar/usage/angular.md | 21 + .../components/tab-bar/usage/javascript.md | 21 + core/src/components/tab-button/readme.md | 6 +- .../components/tab-button/tab-button.ios.scss | 79 +++- .../components/tab-button/tab-button.md.scss | 132 +++++-- .../tab-button/tab-button.md.vars.scss | 70 ++-- .../src/components/tab-button/tab-button.scss | 93 ++--- core/src/components/tab/readme.md | 6 +- core/src/components/tabs/readme.md | 2 +- core/src/components/tabs/usage/angular.md | 1 + core/src/components/tabs/usage/javascript.md | 16 +- 18 files changed, 904 insertions(+), 327 deletions(-) create mode 100644 core/src/components/tab-bar/test/preview/e2e.ts create mode 100644 core/src/components/tab-bar/test/preview/index.html create mode 100644 core/src/components/tab-bar/test/spec/e2e.ts create mode 100644 core/src/components/tab-bar/test/spec/index.html create mode 100644 core/src/components/tab-bar/usage/angular.md create mode 100644 core/src/components/tab-bar/usage/javascript.md diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md index 895090bf8b..6f76c67124 100644 --- a/core/src/components/tab-bar/readme.md +++ b/core/src/components/tab-bar/readme.md @@ -1,25 +1,6 @@ # ion-tab-bar -Tab bar is the UI component that implements the array of button of `ion-tabs`. It's provided by default when `ion-tabs` is used, though, this "implicit" tab bar can not be customized. - -In order to have a custom tab bar, it should be provided in user's markup as direct children of `ion-tabs`: - -```html - - - - - - - - - - -``` +The tab bar is a UI component that contains a set of [tab buttons](../tab-button). A tab bar must be provided inside of [tabs](../tabs) to communicate with each [tab](../tab). diff --git a/core/src/components/tab-bar/tab-bar.scss b/core/src/components/tab-bar/tab-bar.scss index 2d8551e48d..e0f1a7f2d1 100644 --- a/core/src/components/tab-bar/tab-bar.scss +++ b/core/src/components/tab-bar/tab-bar.scss @@ -7,10 +7,7 @@ * @prop --color: Color of the tab bar */ - @include padding-horizontal( - var(--ion-safe-area-left), - var(--ion-safe-area-right) - ); + @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); display: flex; @@ -33,13 +30,14 @@ } :host(.ion-color) { - --background: #{current-color(base)}; + background: #{current-color(base)}; } :host(.ion-color) ::slotted(ion-tab-button) { - --color: #{current-color(contrast, .7)}; - --color-selected: #{current-color(contrast)}; --background-focused: #{current-color(shade)}; + --color-selected: #{current-color(contrast)};; + + color: #{current-color(contrast, .7)}; } :host([slot="top"]) { diff --git a/core/src/components/tab-bar/test/preview/e2e.ts b/core/src/components/tab-bar/test/preview/e2e.ts new file mode 100644 index 0000000000..8bd262c2fd --- /dev/null +++ b/core/src/components/tab-bar/test/preview/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('tab-bar: preview', async () => { + const page = await newE2EPage({ + url: '/src/components/tab-bar/test/preview?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/tab-bar/test/preview/index.html b/core/src/components/tab-bar/test/preview/index.html new file mode 100644 index 0000000000..dff6e9ae52 --- /dev/null +++ b/core/src/components/tab-bar/test/preview/index.html @@ -0,0 +1,202 @@ + + + + + + Tab Bar - Preview + + + + + + + + + + + + Recents + + + + Favorites + 23 + + + + Settings + + + + + + + + + Favorites + + + + + + + + + + + + + + 47 + + + + + + + + + + + Favorites + + + + + 88 + + + + + + + + + + + + + + + + + + + + + + + + + + Location + + + + + 44 + + + + + Radio + + + + + + + + + + Recents + + + + + 16 + Favorites + + + + + Settings + + + + + + + + + Recents + + + + + Favorites + + 33 + + + + Settings + + + + + + + + + + Recents + + 12 + + + + Favorites + + + + + Settings + + + + + + + + + + Recents + + + + + Favorites + + + + + Settings + + 2 + + + + + + + diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html index 5514f9e45f..f08158bc3f 100644 --- a/core/src/components/tab-bar/test/scenarios/index.html +++ b/core/src/components/tab-bar/test/scenarios/index.html @@ -3,228 +3,250 @@ - Tab - Colors + Tab Bar - Scenarios - - - + + - - + + Recents + - - Recents - + + Favorites + 6 + - - Favorites - 6 - + + Settings + - - Settings - - - + - - - - - + + + + + - - - + + + - - - - + + + + - - - - Location - - + + + + Location + + - - 6 - - + + 6 + + - - Radio - - + + Radio + + - + - - + + - - Recents - - + + Recents + + - - 6 - hi - - + + 6 + hi + + - - Settings - - + + Settings + + - + - - - - Recents - - + + + + Recents + + - - Favorites - - 6 - + + Favorites + + 6 + - - Settings - - + + Settings + + - + - - - - Recents - - + + + + Recents + + - - Favorites - - 6 - + + Favorites + + 6 + - - Settings - - + + Settings + + - + - - - - Recents - - + + + + Recents + + - - Favorites - - 6 - + + Favorites + + 6 + - - Settings - - - + + Settings + + + - - - - Recents - - 6 - + + + + Recents + + 6 + - - Favorites - - 6 - + + Favorites + + 6 + - - Settings - - - + + Settings + + + - - - - Indiana Jones and the Raiders of the Lost Ark - + + + + Indiana Jones and the Raiders of the Lost Ark + - - Indiana Jones and the Temple of Doom - + + Indiana Jones and the Temple of Doom + - - Indiana Jones and the Last Crusade - - + + Indiana Jones and the Last Crusade + + - - - - Location - - + + + + Location + + - - - + + + - - Radio - - + + Radio + + - + - + + + + Location + + + + + + + + Radio + + + + + + diff --git a/core/src/components/tab-bar/test/spec/e2e.ts b/core/src/components/tab-bar/test/spec/e2e.ts new file mode 100644 index 0000000000..8ba0a611e1 --- /dev/null +++ b/core/src/components/tab-bar/test/spec/e2e.ts @@ -0,0 +1,10 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('tab-bar: spec', async () => { + const page = await newE2EPage({ + url: '/src/components/tab-bar/test/spec?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/tab-bar/test/spec/index.html b/core/src/components/tab-bar/test/spec/index.html new file mode 100644 index 0000000000..74b3e442cf --- /dev/null +++ b/core/src/components/tab-bar/test/spec/index.html @@ -0,0 +1,169 @@ + + + + + + Tab Bar - Spec + + + + + + + + + + + + Recents + + + + Favorites + 6 + + + + Settings + + + + + + + + + Item One Max + + + + + + + + + + 88 + + + + + 888+ + + + + + + + + + + + Item One Max + + + + + + 88 + + + + + 888+ + + + + + + + + + + + + + + + + + + + + + + + + + Item One Max + 88 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/core/src/components/tab-bar/usage/angular.md b/core/src/components/tab-bar/usage/angular.md new file mode 100644 index 0000000000..d6b3dab547 --- /dev/null +++ b/core/src/components/tab-bar/usage/angular.md @@ -0,0 +1,21 @@ +```html + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file diff --git a/core/src/components/tab-bar/usage/javascript.md b/core/src/components/tab-bar/usage/javascript.md new file mode 100644 index 0000000000..d6b3dab547 --- /dev/null +++ b/core/src/components/tab-bar/usage/javascript.md @@ -0,0 +1,21 @@ +```html + + + + + + + + + + + + + + + + + + + +``` \ No newline at end of file diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md index 0d7e526c05..4a327e8520 100644 --- a/core/src/components/tab-button/readme.md +++ b/core/src/components/tab-button/readme.md @@ -1,8 +1,8 @@ -# ion-tab-bar +# ion-tab-button -Tab bar is a UI component that hold the array of [tab buttons](../tab-button). The Tab bar can provide a global setting for different tab/icon layouts as well as different positions for the bar itself. +A tab button is a UI component that is placed inside of a [tab bar](../tab-bar). The tab button can specify the layout of the icon and label and connect to a [tab view](../tab). -See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. +See the [tabs documentation](../tabs) for more details on configuring tabs. diff --git a/core/src/components/tab-button/tab-button.ios.scss b/core/src/components/tab-button/tab-button.ios.scss index 59c0c8384c..b617df9ae0 100644 --- a/core/src/components/tab-button/tab-button.ios.scss +++ b/core/src/components/tab-button/tab-button.ios.scss @@ -25,12 +25,25 @@ line-height: 1.1; } -::slotted(ion-label) { - @include margin(0, null, 1px, null); - min-height: $tab-button-ios-font-size + 1; +// iOS Tab Button: Badge +// -------------------------------------------------- + +::slotted(ion-badge) { + @include padding(1px, 6px); + @include position(4px, null, null, calc(50% + 6px)); + + height: auto; + + font-size: 12px; + + line-height: 16px; } + +// iOS Tab Button: Icon +// -------------------------------------------------- + ::slotted(ion-icon) { @include margin(4px, null, null, null); @@ -42,7 +55,17 @@ } -// iOS TabButton Layout +// iOS Tab Button: Label +// -------------------------------------------------- + +::slotted(ion-label) { + @include margin(0, null, 1px, null); + + min-height: $tab-button-ios-font-size + 1; +} + + +// iOS Tab Button Layout // -------------------------------------------------- :host(.tab-layout-icon-end) ::slotted(ion-label), @@ -67,6 +90,54 @@ font-size: 24px; } + +// iOS Tab Button: Icon Bottom Layout +// -------------------------------------------------- + +// Badge +:host(.tab-layout-icon-bottom) ::slotted(ion-badge) { + @include position(null, null, null, calc(50% + 12px)); +} + +// Icon +:host(.tab-layout-icon-bottom) ::slotted(ion-icon) { + @include margin(0, null, 1px, null); +} + +// Label +:host(.tab-layout-icon-bottom) ::slotted(ion-label) { + @include margin(4px, null, null, null); +} + + +// iOS Tab Button: Icon Start / End Layout +// -------------------------------------------------- + +:host(.tab-layout-icon-start) ::slotted(ion-badge), +:host(.tab-layout-icon-end) ::slotted(ion-badge) { + @include position(10px, null, null, calc(50% + 35px)); +} + + +// iOS Tab Button: Icon Hide / Label Only Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-icon-hide) ::slotted(ion-badge), +:host(.tab-has-label-only) ::slotted(ion-badge) { + @include position(10px, null, null, calc(50% + 30px)); +} + + +// iOS Tab Button: Icon Only / Label Hide Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-label-hide) ::slotted(ion-badge), +:host(.tab-has-icon-only) ::slotted(ion-badge) { + @include position(10px, null, null, null); +} + :host(.tab-layout-label-hide) ::slotted(ion-icon) { @include margin(0); } \ No newline at end of file diff --git a/core/src/components/tab-button/tab-button.md.scss b/core/src/components/tab-button/tab-button.md.scss index 0824e9ed03..dfc6175581 100644 --- a/core/src/components/tab-button/tab-button.md.scss +++ b/core/src/components/tab-button/tab-button.md.scss @@ -2,7 +2,7 @@ @import "./tab-button.md.vars"; // Material Design Tab Button -// -------------------------------------------------- +// -------------------------------------------------------------- :host { --padding-top: #{$tab-button-md-padding-top}; @@ -18,71 +18,137 @@ font-size: $tab-button-md-font-size; font-weight: $tab-button-md-font-weight; + + letter-spacing: $tab-button-md-letter-spacing; } -// Material Design Tab Button Text -// -------------------------------------------------- +// Material Design Tab Button: Label +// -------------------------------------------------------------- ::slotted(ion-label) { @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start); - @include transform-origin(center, bottom); - - transition: $tab-button-md-text-transition; text-transform: $tab-button-md-text-capitalization; } -::slotted(.tab-selected) ::slotted(ion-label) { - transform: #{$tab-button-md-text-transform-active}; - transition: $tab-button-md-text-transition; -} - -// Material Design Tab Button Icon -// -------------------------------------------------- +// Material Design Tab Button: Icon +// -------------------------------------------------------------- ::slotted(ion-icon) { + @include margin($tab-button-md-icon-margin-top, $tab-button-md-icon-margin-end, $tab-button-md-icon-margin-bottom, $tab-button-md-icon-margin-start); @include transform-origin(center, center); - width: $tab-button-md-icon-size; - height: $tab-button-md-icon-size; - - transition: $tab-button-md-icon-transition; - font-size: $tab-button-md-icon-size; } +// Material Design Tab Button: Badge +// -------------------------------------------------------------- + +::slotted(ion-badge) { + @include border-radius($tab-button-md-badge-border-radius); + @include padding($tab-button-md-badge-padding-top, $tab-button-md-badge-padding-end, $tab-button-md-badge-padding-bottom, $tab-button-md-badge-padding-start); + @include position(8px, null, null, calc(50% + 6px)); + + min-width: $tab-button-md-badge-min-width; + + font-size: $tab-button-md-badge-font-size; + + font-weight: normal; +} + +::slotted(ion-badge:empty) { + display: block; + + min-width: $tab-button-md-badge-size-empty; + + height: $tab-button-md-badge-size-empty; +} -// Material Design TabButton Layout -// -------------------------------------------------- +// Material Design Tab Button: Icon Top Layout +// -------------------------------------------------------------- +// Icon +:host(.tab-layout-icon-top) ::slotted(ion-icon) { + @include margin(6px, null, 2px, null); +} + +// Label :host(.tab-layout-icon-top) ::slotted(ion-label) { - margin-bottom: -2px; + @include margin(0, null, 6px, null); } + +// Material Design Tab Button: Icon Bottom Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-icon-bottom) ::slotted(ion-badge) { + @include position(8px, null, null, 70%); +} + +// Icon +:host(.tab-layout-icon-bottom) ::slotted(ion-icon) { + @include margin(0, null, 6px, null); +} + +// Label :host(.tab-layout-icon-bottom) ::slotted(ion-label) { - margin-top: -2px; - // --label-transform: transform-origin(center, top); + @include margin(6px, null, 0, null); } -:host(.tab-selected) ::slotted(ion-label) { - transform: #{$tab-button-md-text-transform-active}; + +// Material Design Tab Button: Icon Start / Icon End Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-icon-start) ::slotted(ion-badge), +:host(.tab-layout-icon-end) ::slotted(ion-badge) { + @include position(16px, null, null, 80%); } -:host(.tab-selected) ::slotted(ion-icon) { - transform: #{$tab-button-md-icon-transform-active}; +// Icon +:host(.tab-layout-icon-start) ::slotted(ion-icon) { + @include margin(null, 6px, null, null); } -:host(.tab-layout-icon-end.tab-selected) ::slotted(ion-icon) { - transform: #{$tab-button-md-icon-right-transform-active}; +// Icon +:host(.tab-layout-icon-end) ::slotted(ion-icon) { + @include margin(null, null, null, 6px); } -:host(.tab-layout-icon-bottom.tab-selected) ::slotted(ion-icon) { - transform: #{$tab-button-md-icon-bottom-transform-active}; + +// Material Design Tab Button: Icon Hide / Label Only Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-icon-hide) ::slotted(ion-badge), +:host(.tab-has-label-only) ::slotted(ion-badge) { + @include position(16px, null, null, 70%); } -:host(.tab-layout-icon-start.tab-selected) ::slotted(ion-icon) { - transform: #{$tab-button-md-icon-left-transform-active}; +// Label +:host(.tab-layout-icon-hide) ::slotted(ion-label), +:host(.tab-has-label-only) ::slotted(ion-label) { + @include margin(0, null, 0, null); } + + +// Material Design Tab Button: Icon Only / Label Hide Layout +// -------------------------------------------------------------- + +// Badge +:host(.tab-layout-label-hide) ::slotted(ion-badge), +:host(.tab-has-icon-only) ::slotted(ion-badge) { + @include position(16px, null, null, null); +} + +// Icon +:host(.tab-layout-label-hide) ::slotted(ion-icon), +:host(.tab-has-icon-only) ::slotted(ion-icon) { + @include margin(0, null, 0, null); + + font-size: 24px; +} \ No newline at end of file diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index 84edda0380..32d2db7968 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -4,20 +4,23 @@ // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-md-padding-top: 8px !default; +$tab-button-md-padding-top: 0 !default; /// @prop - Padding end on the tab button $tab-button-md-padding-end: 12px !default; /// @prop - Padding bottom on the tab button -$tab-button-md-padding-bottom: 10px !default; +$tab-button-md-padding-bottom: 0 !default; /// @prop - Padding start on the tab button -$tab-button-md-padding-start: 12px, !default; +$tab-button-md-padding-start: 12px !default; /// @prop - Font size of the inactive tab button text $tab-button-md-font-size: 12px !default; +/// @prop - Letter spacing of the tab button +$tab-button-md-letter-spacing: .03em !default; + /// @prop - Font weight of the tab button text $tab-button-md-font-weight: normal !default; @@ -33,14 +36,26 @@ $tab-button-md-icon-color: $tabbar-md-color !default; /// @prop - Icon color of the active tab button $tab-button-md-icon-color-active: $tabbar-md-color-activated !default; +/// @prop - Margin top on the tab button icon +$tab-button-md-icon-margin-top: 16px !default; + +/// @prop - Margin end on the tab button icon +$tab-button-md-icon-margin-end: 0 !default; + +/// @prop - Margin bottom on the tab button icon +$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default; + +/// @prop - Margin start on the tab button icon +$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; + /// @prop - Font size of the active tab button text $tab-button-md-font-size-active: 14px !default; /// @prop - Margin top on the tab button text -$tab-button-md-text-margin-top: 0 !default; +$tab-button-md-text-margin-top: 2px !default; /// @prop - Margin end on the tab button text -$tab-button-md-text-margin-end: $tab-button-md-text-margin-top !default; +$tab-button-md-text-margin-end: 0 !default; /// @prop - Margin bottom on the tab button text $tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; @@ -51,29 +66,32 @@ $tab-button-md-text-margin-start: $tab-button-md-text-margin-end ! /// @prop - Capitalization of the tab button text $tab-button-md-text-capitalization: none !default; -/// @prop - Transform for the active tab button text -$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default; - -/// @prop - Text transition for the tab button text -$tab-button-md-text-transition: transform .1s ease-in-out !default; - -/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or label-only -$tab-button-md-icon-transform-active: translate3d(0, -2px, 0) !default; - -/// @prop - Transform for the active tab button icon when the layout is icon-right -$tab-button-md-icon-right-transform-active: translate3d(6px, 0, 0) !default; - -/// @prop - Transform for the active tab button icon when the layout is icon-bottom -$tab-button-md-icon-bottom-transform-active: translate3d(0, 2px, 0) !default; - -/// @prop - Transform for the active tab button icon when the layout is icon-left -$tab-button-md-icon-left-transform-active: translate3d(-6px, 0, 0) !default; - -/// @prop - Text transition for the tab button icon -$tab-button-md-icon-transition: transform .1s ease-in-out !default; - /// @prop - Size of the tab button icon $tab-button-md-icon-size: 22px !default; /// @prop - Opacity of the inactive tab button $tab-button-md-opacity: .7 !default; + +/// @prop - Border radius on the tab button badge +$tab-button-md-badge-border-radius: 8px !default; + +/// @prop - Padding top on the tab button badge +$tab-button-md-badge-padding-top: 3px !default; + +/// @prop - Padding end on the tab button badge +$tab-button-md-badge-padding-end: 2px !default; + +/// @prop - Padding bottom on the tab button badge +$tab-button-md-badge-padding-bottom: 2px !default; + +/// @prop - Padding start on the tab button badge +$tab-button-md-badge-padding-start: 2px !default; + +/// @prop - Minimum width of the tab button badge +$tab-button-md-badge-min-width: 12px !default; + +/// @prop - Font size of the tab button badge +$tab-button-md-badge-font-size: 8px !default; + +/// @prop - Size of the empty tab button badge +$tab-button-md-badge-size-empty: 8px !default; diff --git a/core/src/components/tab-button/tab-button.scss b/core/src/components/tab-button/tab-button.scss index b32b5e2a3a..8ba3246a13 100644 --- a/core/src/components/tab-button/tab-button.scss +++ b/core/src/components/tab-button/tab-button.scss @@ -12,32 +12,33 @@ * @prop --padding-start: Start padding of the tab button * @prop --ripple-color: Color of the button ripple effect */ - --badge-end: 4%; --ripple-color: var(--color-selected); flex: 1; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; color: var(--color); } +// Tab Button: Native +// -------------------------------------------------- + a { - @include text-inherit(); @include margin(0); - @include padding( - var(--padding-top), - var(--padding-end), - var(--padding-bottom), - var(--padding-start), - ); + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include text-inherit(); display: flex; position: relative; - flex-direction: column; - align-items: center; - justify-content: flex-start; + flex-direction: inherit; + align-items: inherit; + justify-content: inherit; width: 100%; height: 100%; @@ -66,6 +67,10 @@ a:focus-visible { } } + +// Tab Button: States +// -------------------------------------------------- + :host(.tab-selected) { color: var(--color-selected); } @@ -81,15 +86,9 @@ a:focus-visible { opacity: .4; } -::slotted(ion-label) { - order: 0; -} -::slotted(ion-icon) { - order: -1; - - height: 1em; -} +// Tab Button: Label / Icon +// -------------------------------------------------- ::slotted(ion-label), ::slotted(ion-icon) { @@ -97,7 +96,6 @@ a:focus-visible { align-self: center; - min-width: 26px; max-width: 100%; text-overflow: ellipsis; @@ -108,55 +106,49 @@ a:focus-visible { box-sizing: border-box; } +::slotted(ion-label) { + order: 0; +} + +::slotted(ion-icon) { + order: -1; + + height: 1em; +} + + :host(.tab-has-label-only) ::slotted(ion-label) { white-space: normal; } - -// Tab Badges +// Tab Button: Badge // -------------------------------------------------- ::slotted(ion-badge) { - @include position(null, var(--badge-end), null, null); - @include padding(1px, 6px); - box-sizing: border-box; position: absolute; - height: auto; - - font-size: 12px; - - line-height: 16px; + z-index: 1; } -// Tab Button Layout +// Tab Button: Layout // -------------------------------------------------- -:host(.tab-layout-icon-start) a { +:host(.tab-layout-icon-start) { flex-direction: row; } -:host(.tab-layout-icon-end) a { +:host(.tab-layout-icon-end) { flex-direction: row-reverse; } -:host(.tab-layout-icon-bottom) a { +:host(.tab-layout-icon-bottom) { flex-direction: column-reverse; } -:host(.tab-layout-icon-start) a, -:host(.tab-layout-icon-end) a, -:host(.tab-layout-icon-hide) a, -:host(.tab-layout-label-hide) a, -:host(.tab-has-icon-only) a, -:host(.tab-has-label-only) a { - justify-content: center; -} - :host(.tab-layout-icon-hide) ::slotted(ion-icon) { display: none; } @@ -165,21 +157,6 @@ a:focus-visible { display: none; } -:host(.tab-layout-icon-top), -:host(.tab-layout-icon-bottom), -:host(.tab-layout-icon-only), -:host(.tab-layout-label-hide), -:host(.tab-has-icon-only) { - --badge-end: #{calc(50% - 30px)}; -} - -:host(.tab-layout-icon-hide), -:host(.tab-layout-icon-start), -:host(.tab-layout-icon-end), -:host(.tab-has-label-only) { - --badge-end: #{calc(50% - 50px)}; -} - ion-ripple-effect { color: var(--ripple-color); } diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md index 32e73878b7..17155f18e2 100644 --- a/core/src/components/tab/readme.md +++ b/core/src/components/tab/readme.md @@ -1,10 +1,8 @@ # ion-tab -The Tab component is a child component of the [Tabs](../Tabs/) component. -Each Tab is meant to be a top level navigation stack for an app. -Meaning that an app can have many tabs, all wit their own independent navigation. +The tab component is a child component of [tabs](../tabs). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation. -See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs. +See the [tabs documentation](../tabs/) for more details on configuring tabs. diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index a399c26159..83cf9e04f4 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -22,7 +22,7 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion Settings - + diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md index bab7ae521b..e3f92d8c6f 100644 --- a/core/src/components/tabs/usage/angular.md +++ b/core/src/components/tabs/usage/angular.md @@ -39,5 +39,6 @@ About + ``` diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md index acfd0e84ec..d873220446 100644 --- a/core/src/components/tabs/usage/javascript.md +++ b/core/src/components/tabs/usage/javascript.md @@ -1,13 +1,21 @@ ```html + + - - + + + + + + + + @@ -15,18 +23,22 @@ Schedule 6 + Speakers + Map + About + ```