mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(tabs): apply design-doc (#16048)
This commit is contained in:
Manu MA
42
core/src/components/tab-button/readme.md
Normal file
42
core/src/components/tab-button/readme.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 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
|
||||
<style>
|
||||
ion-tab-bar {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-tabs>
|
||||
<!-- User tabs -->
|
||||
<ion-tab></ion-tab>
|
||||
<ion-tab></ion-tab>
|
||||
|
||||
<!-- User provided ion-tab-bar that can be customized -->
|
||||
<ion-tab-bar color="dark" layout="icon-only">
|
||||
</ion-tabs>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| `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](/docs/theming/basics). | `string \| undefined` |
|
||||
| `disabled` | `disabled` | The selected tab component | `boolean` |
|
||||
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` |
|
||||
| `layout` | `layout` | Set the layout of the text and icon in the tabbar. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
|
||||
| `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` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
72
core/src/components/tab-button/tab-button.ios.scss
Normal file
72
core/src/components/tab-button/tab-button.ios.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.ios.vars";
|
||||
|
||||
:host {
|
||||
--padding-top: #{$tab-button-ios-padding-top};
|
||||
--padding-end: #{$tab-button-ios-padding-end};
|
||||
--padding-bottom: #{$tab-button-ios-padding-bottom};
|
||||
--padding-start: #{$tab-button-ios-padding-start};
|
||||
--color: #{$tab-button-ios-text-color};
|
||||
--color-selected: #{$tabbar-ios-color-activated};
|
||||
--background: transparent;
|
||||
--background-focused: #{$tabbar-ios-background-focused};
|
||||
|
||||
max-width: $tab-button-ios-max-width;
|
||||
|
||||
font-size: $tab-button-ios-font-size;
|
||||
}
|
||||
|
||||
:host(.tab-has-label-only) ::slotted(ion-label) {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: $tab-button-ios-font-size + 2;
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
::slotted(ion-label) {
|
||||
@include margin(0, null, 1px, null);
|
||||
|
||||
min-height: $tab-button-ios-font-size + 1;
|
||||
}
|
||||
|
||||
::slotted(ion-icon) {
|
||||
@include margin(4px, null, null, null);
|
||||
|
||||
font-size: $tab-button-ios-icon-size;
|
||||
}
|
||||
|
||||
::slotted(ion-icon::before) {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
// iOS TabButton Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.tab-layout-icon-end) ::slotted(ion-label),
|
||||
:host(.tab-layout-icon-start) ::slotted(ion-label),
|
||||
:host(.tab-layout-icon-hide) ::slotted(ion-label) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-end) ::slotted(ion-icon),
|
||||
:host(.tab-layout-icon-start) ::slotted(ion-icon) {
|
||||
min-width: 24px;
|
||||
height: 26px;
|
||||
|
||||
margin-top: 2px;
|
||||
margin-bottom: 1px;
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
:host(.tab-layout-label-hide) ::slotted(ion-icon) {
|
||||
@include margin(0);
|
||||
}
|
||||
37
core/src/components/tab-button/tab-button.ios.vars.scss
Normal file
37
core/src/components/tab-button/tab-button.ios.vars.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tab-button-ios-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end on the tab button
|
||||
$tab-button-ios-padding-end: 2px !default;
|
||||
|
||||
/// @prop - Padding bottom on the tab button
|
||||
$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tab-button-ios-padding-start: $tab-button-ios-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the tab button
|
||||
$tab-button-ios-max-width: 240px !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tab-button-ios-text-color: $tabbar-ios-color !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tab-button-ios-text-color-active: $tabbar-ios-color-activated !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$tab-button-ios-icon-color: $tabbar-ios-color !default;
|
||||
|
||||
/// @prop - Icon color of the active tab button
|
||||
$tab-button-ios-icon-color-active: $tabbar-ios-color-activated !default;
|
||||
|
||||
/// @prop - Font size of the tab button text
|
||||
$tab-button-ios-font-size: 10px !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tab-button-ios-icon-size: 30px !default;
|
||||
88
core/src/components/tab-button/tab-button.md.scss
Normal file
88
core/src/components/tab-button/tab-button.md.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.md.vars";
|
||||
|
||||
// Material Design Tab Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--padding-top: #{$tab-button-md-padding-top};
|
||||
--padding-end: #{$tab-button-md-padding-end};
|
||||
--padding-bottom: #{$tab-button-md-padding-bottom};
|
||||
--padding-start: #{$tab-button-md-padding-start};
|
||||
--color: #{$tab-button-md-text-color};
|
||||
--color-selected: #{$tabbar-md-color-activated};
|
||||
--background: transparent;
|
||||
--background-focused: #{$tabbar-md-background-focused};
|
||||
|
||||
max-width: 168px;
|
||||
|
||||
font-size: $tab-button-md-font-size;
|
||||
font-weight: $tab-button-md-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Tab Button Text
|
||||
// --------------------------------------------------
|
||||
|
||||
::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
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(ion-icon) {
|
||||
@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 TabButton Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.tab-layout-icon-top) ::slotted(ion-label) {
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-bottom) ::slotted(ion-label) {
|
||||
margin-top: -2px;
|
||||
// --label-transform: transform-origin(center, top);
|
||||
}
|
||||
|
||||
:host(.tab-selected) ::slotted(ion-label) {
|
||||
transform: #{$tab-button-md-text-transform-active};
|
||||
}
|
||||
|
||||
:host(.tab-selected) ::slotted(ion-icon) {
|
||||
transform: #{$tab-button-md-icon-transform-active};
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-end.tab-selected) ::slotted(ion-icon) {
|
||||
transform: #{$tab-button-md-icon-right-transform-active};
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-bottom.tab-selected) ::slotted(ion-icon) {
|
||||
transform: #{$tab-button-md-icon-bottom-transform-active};
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-start.tab-selected) ::slotted(ion-icon) {
|
||||
transform: #{$tab-button-md-icon-left-transform-active};
|
||||
}
|
||||
79
core/src/components/tab-button/tab-button.md.vars.scss
Normal file
79
core/src/components/tab-button/tab-button.md.vars.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top on the tab button
|
||||
$tab-button-md-padding-top: 8px !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;
|
||||
|
||||
/// @prop - Padding start on the tab button
|
||||
$tab-button-md-padding-start: 12px, !default;
|
||||
|
||||
/// @prop - Font size of the inactive tab button text
|
||||
$tab-button-md-font-size: 12px !default;
|
||||
|
||||
/// @prop - Font weight of the tab button text
|
||||
$tab-button-md-font-weight: normal !default;
|
||||
|
||||
/// @prop - Text color of the inactive tab button
|
||||
$tab-button-md-text-color: $tabbar-md-color !default;
|
||||
|
||||
/// @prop - Text color of the active tab button
|
||||
$tab-button-md-text-color-active: $tabbar-md-color-activated !default;
|
||||
|
||||
/// @prop - Icon color of the inactive tab button
|
||||
$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 - 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;
|
||||
|
||||
/// @prop - Margin end on the tab button text
|
||||
$tab-button-md-text-margin-end: $tab-button-md-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom on the tab button text
|
||||
$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default;
|
||||
|
||||
/// @prop - Margin start on the tab button text
|
||||
$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default;
|
||||
|
||||
/// @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;
|
||||
169
core/src/components/tab-button/tab-button.scss
Normal file
169
core/src/components/tab-button/tab-button.scss
Normal file
@@ -0,0 +1,169 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
:host {
|
||||
--badge-end: 4%;
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: 100%;
|
||||
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
a {
|
||||
@include text-inherit();
|
||||
@include margin(0);
|
||||
@include padding(
|
||||
var(--padding-top),
|
||||
var(--padding-end),
|
||||
var(--padding-bottom),
|
||||
var(--padding-start),
|
||||
);
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
outline: none;
|
||||
|
||||
background: var(--background);
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
background: var(--background-focused);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
a:hover {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
:host(.tab-selected) {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
:host(.tab-hidden) {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:host(.tab-disabled) {
|
||||
pointer-events: none;
|
||||
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
::slotted(ion-label) {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
::slotted(ion-icon) {
|
||||
order: -1;
|
||||
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
::slotted(ion-label),
|
||||
::slotted(ion-icon) {
|
||||
display: block;
|
||||
|
||||
align-self: center;
|
||||
|
||||
min-width: 26px;
|
||||
max-width: 100%;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host(.tab-has-label-only) ::slotted(ion-label) {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Tab Badges
|
||||
// --------------------------------------------------
|
||||
|
||||
::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;
|
||||
}
|
||||
|
||||
|
||||
// Tab Button Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.tab-layout-icon-start) a {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-end) a {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
:host(.tab-layout-icon-bottom) a {
|
||||
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;
|
||||
}
|
||||
|
||||
:host(.tab-layout-label-hide) ::slotted(ion-label) {
|
||||
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)};
|
||||
}
|
||||
128
core/src/components/tab-button/tab-button.tsx
Normal file
128
core/src/components/tab-button/tab-button.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
|
||||
|
||||
import { Color, Mode, TabbarClickDetail, TabbarLayout } from '../../interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
import { TabbarChangedDetail } from '../tab-bar/tab-bar-interface';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-button',
|
||||
styleUrls: {
|
||||
ios: 'tab-button.ios.scss',
|
||||
md: 'tab-button.md.scss'
|
||||
},
|
||||
shadow: true
|
||||
})
|
||||
export class TabButton implements ComponentInterface {
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@Prop({ context: 'queue' }) queue!: QueueApi;
|
||||
@Prop({ context: 'document' }) doc!: Document;
|
||||
|
||||
/**
|
||||
* The selected tab component
|
||||
*/
|
||||
@State() selected = false;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* 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](/docs/theming/basics).
|
||||
*/
|
||||
@Prop() color?: Color;
|
||||
|
||||
/**
|
||||
* Set the layout of the text and icon in the tabbar.
|
||||
*/
|
||||
@Prop() layout: TabbarLayout = 'icon-top';
|
||||
|
||||
/**
|
||||
* The URL which will be used as the `href` within this tab's button anchor.
|
||||
*/
|
||||
@Prop() href?: string;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
@Prop() tab?: string;
|
||||
|
||||
/**
|
||||
* The selected tab component
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* Emitted when the tab bar is clicked
|
||||
* @internal
|
||||
*/
|
||||
@Event() ionTabButtonClick!: EventEmitter<TabbarClickDetail>;
|
||||
|
||||
@Listen('parent:ionTabBarChanged')
|
||||
onTabbarChanged(ev: CustomEvent<TabbarChangedDetail>) {
|
||||
this.selected = this.tab === ev.detail.tab;
|
||||
}
|
||||
|
||||
@Listen('click')
|
||||
onClick(ev: Event) {
|
||||
if (!this.disabled) {
|
||||
this.ionTabButtonClick.emit({
|
||||
tab: this.tab,
|
||||
href: this.href
|
||||
});
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
if (this.tab === undefined) {
|
||||
console.warn('ion-tab-button needs a tab, so it can be selected');
|
||||
}
|
||||
}
|
||||
|
||||
private get hasLabel() {
|
||||
return !!this.el.querySelector('ion-label');
|
||||
}
|
||||
|
||||
private get hasIcon() {
|
||||
return !!this.el.querySelector('ion-icon');
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const { color, tab, selected, layout, disabled, hasLabel, hasIcon } = this;
|
||||
return {
|
||||
'role': 'tab',
|
||||
'ion-activatable': true,
|
||||
'aria-selected': selected ? 'true' : null,
|
||||
'id': `tab-button-${tab}`,
|
||||
'aria-controls': `tab-view-${tab}`,
|
||||
class: {
|
||||
...createColorClasses(color),
|
||||
|
||||
'tab-selected': selected,
|
||||
'tab-disabled': disabled,
|
||||
'tab-has-label': hasLabel,
|
||||
'tab-has-icon': hasIcon,
|
||||
'tab-has-label-only': hasLabel && !hasIcon,
|
||||
'tab-has-icon-only': hasIcon && !hasLabel,
|
||||
[`tab-layout-${layout}`]: true,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { mode, href } = this;
|
||||
return (
|
||||
<a href={href || '#'}>
|
||||
<slot></slot>
|
||||
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user