@tarojs/components
Version:
Taro 组件库。
27 lines (26 loc) • 1.04 kB
JavaScript
import classNames from 'classnames';
import { h } from '@stencil/core';
export const TabbarItem = ({ index, isSelected = false, textColor, iconPath, badgeText, showRedDot = false, text, onSelect }) => {
const className = classNames('weui-tabbar__item', {
'weui-bar__item_on': isSelected
});
const badgeStyle = {
position: 'absolute',
top: '-2px',
right: '-13px'
};
const dotStyle = {
position: 'absolute',
top: '0',
right: '-6px'
};
function onClick() {
onSelect(index);
}
return (h("a", { key: index, href: 'javascript:;', class: className, onClick: onClick },
h("span", { style: { display: 'inline-block', position: 'relative' } },
h("img", { src: iconPath, alt: '', class: 'weui-tabbar__icon' }),
!!badgeText && (h("span", { class: 'weui-badge taro-tabbar-badge', style: badgeStyle }, badgeText)),
showRedDot && (h("span", { class: 'weui-badge weui-badge_dot', style: dotStyle }))),
h("p", { class: 'weui-tabbar__label', style: { color: textColor } }, text)));
};