nuke-tabbar/src/styles/index.js

带导航切换的tab组件

'use strict';

import VariableMix from './variable';

const commonStyle = function (variables) {
  return {
    'nav-item-has-icon': {
      flexDirection: 'row',
      height: variables['icon-height'],
    },
  };
};

function styleMix(theme = {}) {
  const Variables = VariableMix(theme);
  const core = theme.Core;
  return {
    Tabbar: {
      tabContainer: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        display: 'flex',
      },
      tabContent: {
        display: 'flex',
        flex: 1,
      },
      navBar: {
        // display: 'flex',
        flexDirection: 'row',
        height: Variables['bar-item-height'],
        // backgroundColor: '#ffffff',
        alignitems: 'center',
      },
      navBarItem: {
        ...core.padding(0, Variables['icon-item-padding-left-right']),
        height: Variables['bar-item-height'],
        whiteSpace: 'nowrap',
      },
      tbiContainer: {},
      navCapsule: {
        alignSelf: 'center',
        height: Variables['capsule-height'],
        ...core.border(
          Variables['capsule-border-width'],
          Variables['capsule-border-style'],
          Variables['capsule-border-color']
        ),
        borderRadius: `${Variables['capsule-border-corner']}rem`,
      },
      tabbarContent: {
        flexDirection: 'row',
        alignItems: 'center',
      },
      navItemIcon: {
        // marginBottom: Variables['icon-item-icon-margin-bottom'],
      },
      ...commonStyle(Variables),
    },

    Item: {
      'nav-item': {
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        // height: Variables['bar-item-height'],
      },
      'nav-item-top': {
        height: Variables['bar-item-height'],
        ...core.border(1, 'solid', '#dcdee3', 'bottom'),
      },
      'nav-item-bottom': {
        height: Variables['bar-item-height'],
        ...core.border(1, 'solid', '#dcdee3', 'top'),
      },
      'nav-item-capsule': {
        ...core.padding(0, Variables['capsule-item-padding-left-right']),
        // height: (Variables['capsule-height'] -2) +'rem',
        backgroundColor: Variables['capsule-item-bg-color'],
      },

      'nav-item-capsule-selected': {
        color: Variables['capsule-item-selected-color'],
        backgroundColor: Variables['capsule-item-selected-bg-color'],
      },

      'nav-item-top-selected': {
        ...core.border(1, 'solid', Variables['bar-item-selected-color'], 'bottom'),
      },

      'nav-item-text': {
        fontSize: '28rem',
        // lineHeight: '19px',
      },
      'nav-item-top-text': {
        fontSize: '28rem',
        // lineHeight: '19px',
      },
      'nav-item-bottom-text': {
        fontSize: '28rem',
        // lineHeight: '19px',
      },
      'nav-item-capsule-text': {
        fontSize: `${Variables['capsule-item-font-size']}rem`,
        color: Variables['capsule-item-color'],
      },
      'nav-item-capsule-selected-text': {
        color: Variables['capsule-item-selected-color'],
      },
      'nav-item-top-selected-text': {
        color: Variables['bar-item-selected-color'],
      },
      'nav-item-bottom-selected-text': {
        color: Variables['bar-item-selected-color'],
      },
      'nav-item-capsule-not-first': {
        ...core.border(
          Variables['capsule-separator-width'],
          Variables['capsule-separator-style'],
          Variables['capsule-border-color'],
          'left'
        ),
      },
    },
  };
}

export default styleMix;