mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
8029df344a
* 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
120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
|
|
|
|
import { Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../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;
|
|
@Prop({ context: 'config' }) config!: Config;
|
|
|
|
/**
|
|
* The selected tab component
|
|
*/
|
|
@State() selected = false;
|
|
|
|
/**
|
|
* The mode determines which platform styles to use.
|
|
*/
|
|
@Prop() mode!: Mode;
|
|
|
|
/**
|
|
* Set the layout of the text and icon in the tab bar.
|
|
* It defaults to `'icon-top'`.
|
|
*/
|
|
@Prop({ mutable: true }) layout?: TabButtonLayout;
|
|
|
|
/**
|
|
* 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<TabButtonClickDetail>;
|
|
|
|
@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,
|
|
selected: this.selected
|
|
});
|
|
}
|
|
ev.preventDefault();
|
|
}
|
|
|
|
componentWillLoad() {
|
|
if (this.layout === undefined) {
|
|
this.layout = this.config.get('tabButtonLayout', 'icon-top');
|
|
}
|
|
}
|
|
|
|
private get hasLabel() {
|
|
return !!this.el.querySelector('ion-label');
|
|
}
|
|
|
|
private get hasIcon() {
|
|
return !!this.el.querySelector('ion-icon');
|
|
}
|
|
|
|
hostData() {
|
|
const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
|
|
return {
|
|
'role': 'tab',
|
|
'ion-activatable': true,
|
|
'aria-selected': selected ? 'true' : null,
|
|
'id': `tab-button-${tab}`,
|
|
'aria-controls': `tab-view-${tab}`,
|
|
class: {
|
|
'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 type="unbounded"></ion-ripple-effect>}
|
|
</a>
|
|
);
|
|
}
|
|
}
|