taro-material/h5/Tab/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import AtComponent from "../common/component";
import './index.scss';

export default class RMTab extends AtComponent {
  render() {
    const { customStyle, className, tabDirection, index, current } = this.props;

    return <View className={classNames({
      'at-tabs-pane': true,
      'at-tabs-pane--vertical': tabDirection === 'vertical',
      'at-tabs-pane--active': index === current,
      'at-tabs-pane--inactive': index !== current
    }, className)} style={customStyle}>
        {this.props.children}
      </View>;
  }
}

RMTab.defaultProps = {
  customStyle: '',
  className: '',
  tabDirection: 'horizontal',
  index: 0,
  current: 0
};

RMTab.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  tabDirection: PropTypes.oneOf(['horizontal', 'vertical']),
  index: PropTypes.number,
  current: PropTypes.number
};