preact-material-components
Version:
preact wrapper for "Material Components for the web"
71 lines • 2.5 kB
JavaScript
import { MDCTabBar } from '@material/tab-bar';
import { h } from 'preact';
import MaterialComponent from '../Base/MaterialComponent';
export class TabLabel extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'tab__text-label';
this.mdcProps = [];
}
materialDom(props) {
return h("span", Object.assign({}, props), props.children);
}
}
export class TabIcon extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'tab__icon';
this.mdcProps = [];
}
materialDom(props) {
return (h("span", Object.assign({ className: "material-icons" }, props), props.children));
}
}
export class Tab extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'tab';
this.mdcProps = ['active'];
this.mdcNotifyProps = ['active'];
}
materialDom(props) {
return (h("button", Object.assign({ class: "mdc-tab", role: "tab", "aria-selected": "true" }, props),
h("span", { class: "mdc-tab__content" }, props.children),
h("span", { class: `mdc-tab-indicator ${props.active ? 'mdc-tab-indicator--active' : ''}` },
h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })),
h("span", { class: "mdc-tab__ripple" })));
}
}
export class TabBar extends MaterialComponent {
constructor() {
super(...arguments);
this.componentName = 'tab-bar';
this.mdcProps = [];
this.mdcNotifyProps = ['activeTabIndex'];
}
componentDidMount() {
super.componentDidMount();
if (this.control) {
this.MDComponent = new MDCTabBar(this.control);
}
this.afterComponentDidMount();
}
componentWillUnmount() {
super.componentWillUnmount();
if (this.MDComponent) {
this.MDComponent.destroy();
}
}
materialDom(props) {
return (h("div", { class: "mdc-tab-bar", role: "tablist", ref: this.setControlRef },
h("div", { class: "mdc-tab-scroller" },
h("div", { class: "mdc-tab-scroller__scroll-area" },
h("div", { class: "mdc-tab-scroller__scroll-content" }, props.children)))));
}
}
export default class default_1 extends TabBar {
}
default_1.Tab = Tab;
default_1.TabLabel = TabLabel;
default_1.TabIcon = TabIcon;
//# sourceMappingURL=index.js.map