From b98c4eba05f98ac6961b147b571d805fd233d4c0 Mon Sep 17 00:00:00 2001 From: koppthe Date: Tue, 25 Dec 2018 23:20:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(customize-theme):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84=EF=BC=8C=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=20css=20=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/progress/index.js | 32 ++---- src/components/radio/index.js | 60 +++++----- src/components/range/index.js | 100 ++++++++-------- src/components/rate/index.js | 72 ++++++------ src/components/segmented-control/index.js | 95 ++++++++-------- src/components/slider/index.js | 81 +++++++------ src/components/steps/index.js | 94 ++++++++------- src/components/switch/index.js | 56 ++++----- src/components/tab-bar/index.js | 107 +++++++++--------- src/components/tabs/index.js | 65 ++++++----- .../navigation/segmented-control/index.js | 2 +- src/pages/view/steps/index.js | 50 ++++---- src/style/components/progress.scss | 71 ++++++++---- src/style/components/radio.scss | 36 ++++-- src/style/components/range.scss | 38 ++++--- src/style/components/rate.scss | 23 ++-- src/style/components/segmented-control.scss | 28 +++-- src/style/components/slider.scss | 2 + src/style/components/steps.scss | 53 ++++++--- src/style/components/swipe-action.scss | 20 ++-- src/style/components/switch.scss | 2 + src/style/components/tab-bar.scss | 40 +++++-- src/style/components/tabs.scss | 9 +- src/style/variables/default.scss | 1 + 24 files changed, 611 insertions(+), 526 deletions(-) diff --git a/src/components/progress/index.js b/src/components/progress/index.js index 728b3cbcc..dcd014b30 100644 --- a/src/components/progress/index.js +++ b/src/components/progress/index.js @@ -1,19 +1,15 @@ import Taro from '@tarojs/taro' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - -import AtIcon from '../icon/index' import AtComponent from '../../common/component' export default class AtProgress extends AtComponent { render () { + const { color } = this.props let { percent } = this.props - let { color } = this.props const { strokeWidth, status, isHidePercent } = this.props - let iconInfo = {} - if (percent < 0) { percent = 0 } else if (percent > 100) { @@ -27,20 +23,10 @@ export default class AtProgress extends AtComponent { }, this.props.className ) - - if (status === 'error') { - iconInfo = { - color: '#FF4949', - value: 'close-circle' - } - color = '#FF4949' - } else if (status === 'success') { - iconInfo = { - color: '#13CE66', - value: 'check-circle' - } - color = '#13CE66' - } + const iconClass = classNames('at-icon', { + 'at-icon-close-circle': status === 'error', + 'at-icon-check-circle': status === 'success', + }) const progressStyle = { width: percent && `${+percent}%`, @@ -61,11 +47,7 @@ export default class AtProgress extends AtComponent { {!isHidePercent && ( - {!status || status === 'progress' ? ( - percent + '%' /* eslint-disable-line prefer-template */ - ) : ( - - )} + {!status || status === 'progress' ? `${percent}%` : } )} diff --git a/src/components/radio/index.js b/src/components/radio/index.js index 7f608d17d..762b9e64b 100644 --- a/src/components/radio/index.js +++ b/src/components/radio/index.js @@ -1,34 +1,10 @@ import Taro from '@tarojs/taro' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - -import AtIcon from '../../components/icon/index' import AtComponent from '../../common/component' export default class AtRadio extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - value: '', - options: [], - onClick: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - value: PropTypes.string, - options: PropTypes.array, - onClick: PropTypes.func, - } - handleClick (option) { if (option.disabled) return this.props.onClick(option.value, ...arguments) @@ -63,8 +39,8 @@ export default class AtRadio extends AtComponent { }) } > - - + + {option.label} - + - { - option.desc - ? {option.desc} - : null - } + {option.desc && {option.desc}} ) } @@ -89,3 +61,25 @@ export default class AtRadio extends AtComponent { ) } } + +AtRadio.defaultProps = { + customStyle: '', + className: '', + value: '', + options: [], + onClick: () => {}, +} + +AtRadio.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + value: PropTypes.string, + options: PropTypes.array, + onClick: PropTypes.func, +} diff --git a/src/components/range/index.js b/src/components/range/index.js index 4f7f73d7e..a9a78f4ed 100644 --- a/src/components/range/index.js +++ b/src/components/range/index.js @@ -2,56 +2,9 @@ import Taro from '@tarojs/taro' import PropTypes from 'prop-types' import { View } from '@tarojs/components' import classNames from 'classnames' - import AtComponent from '../../common/component' -const defaultFunc = () => {} - export default class AtRange extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - sliderStyle: '', - railStyle: '', - trackStyle: '', - value: [0, 0], - min: 0, - max: 100, - disabled: false, - blockSize: 28, - onChange: defaultFunc, - onAfterChange: defaultFunc - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - sliderStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - railStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - trackStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - value: PropTypes.array, - min: PropTypes.number, - max: PropTypes.number, - disabled: PropTypes.bool, - blockSize: PropTypes.number, - onChange: PropTypes.func - } - constructor (props) { super(...arguments) const { max, min } = props @@ -188,9 +141,9 @@ export default class AtRange extends AtComponent { const { slider1X, slider2X } = this.state const sliderCommonStyle = { - width: `${blockSize}PX`, - height: `${blockSize}PX`, - marginLeft: `${-blockSize / 2}PX` + width: blockSize ? `${blockSize}PX` : '', + height: blockSize ? `${blockSize}PX` : '', + marginLeft: blockSize ? `${-blockSize / 2}PX` : '', } const slider1Style = { ...sliderCommonStyle, @@ -201,7 +154,7 @@ export default class AtRange extends AtComponent { left: `${slider2X}%` } const containerStyle = { - height: `${blockSize}PX`, + height: blockSize ? `${blockSize}PX` : '', } const smallX = slider1X > slider2X ? slider2X : slider1X @@ -254,3 +207,48 @@ export default class AtRange extends AtComponent { ) } } + +AtRange.defaultProps = { + customStyle: '', + className: '', + sliderStyle: '', + railStyle: '', + trackStyle: '', + value: [0, 0], + min: 0, + max: 100, + disabled: false, + blockSize: 0, + onChange: () => {}, + onAfterChange: () => {}, +} + +AtRange.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + sliderStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + railStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + trackStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + value: PropTypes.array, + min: PropTypes.number, + max: PropTypes.number, + disabled: PropTypes.bool, + blockSize: PropTypes.number, + onChange: PropTypes.func, + onAfterChange: PropTypes.func, +} diff --git a/src/components/rate/index.js b/src/components/rate/index.js index 2d318e64d..d6e7eeb7c 100644 --- a/src/components/rate/index.js +++ b/src/components/rate/index.js @@ -1,42 +1,10 @@ import Taro from '@tarojs/taro' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - -import AtIcon from '../../components/icon/index' import AtComponent from '../../common/component' export default class AtRate extends AtComponent { - static defaultProps = { - isTest: false, - customStyle: '', - className: '', - size: 20, - value: 0, - max: 5, - margin: 5, - onChange: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - size: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - value: PropTypes.number, - max: PropTypes.number, - margin: PropTypes.number, - onChange: PropTypes.func - } - constructor () { super(...arguments) if (process.env.NODE_ENV === 'test') { @@ -61,6 +29,10 @@ export default class AtRate extends AtComponent { const iconStyle = { marginRight: Taro.pxTransform(margin) } + const starIconStyle = { + fontSize: size ? `${size}px` : '', + } + // 生成星星颜色 className 数组，方便在jsx中直接map const classNameArr = [] const floorValue = Math.floor(value) @@ -87,9 +59,9 @@ export default class AtRate extends AtComponent { style={iconStyle} onClick={this.handleClick.bind(this, i + 1)} > - + - + ) } @@ -97,3 +69,33 @@ export default class AtRate extends AtComponent { ) } } + +AtRate.defaultProps = { + isTest: false, + customStyle: '', + className: '', + size: 0, + value: 0, + max: 5, + margin: 5, + onChange: () => {}, +} + +AtRate.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + size: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + value: PropTypes.number, + max: PropTypes.number, + margin: PropTypes.number, + onChange: PropTypes.func, +} diff --git a/src/components/segmented-control/index.js b/src/components/segmented-control/index.js index 43a543637..6728616ad 100644 --- a/src/components/segmented-control/index.js +++ b/src/components/segmented-control/index.js @@ -2,39 +2,9 @@ import Taro from '@tarojs/taro' import { View } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - import AtComponent from '../../common/component' export default class AtSegmentedControl extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - current: 0, - color: '#fff', - fontSize: '28', - disabled: false, - selectedColor: '#6190E8', - values: [], - onClick: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - current: PropTypes.number, - color: PropTypes.string, - fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - disabled: PropTypes.bool, - values: PropTypes.array, - onClick: PropTypes.func - } - constructor () { super(...arguments) if (process.env.NODE_ENV === 'test') { @@ -59,19 +29,21 @@ export default class AtSegmentedControl extends AtComponent { fontSize } = this.props - const rootStyle = `border-color: ${selectedColor};` - const itemStyle = ` - color: ${selectedColor}; - background-color:${color}; - border-color: ${selectedColor}; - font-size: ${Taro.pxTransform(fontSize)}; - ` - const selectedItemStyle = ` - color: ${color}; - background-color:${selectedColor}; - border-color: ${selectedColor}; - font-size: ${Taro.pxTransform(fontSize)}; - ` + const rootStyle = { + borderColor: selectedColor + } + const itemStyle = { + color: selectedColor, + fontSize: fontSize ? Taro.pxTransform(fontSize) : '', + borderColor: selectedColor, + backgroundColor: color, + } + const selectedItemStyle = { + color, + fontSize: fontSize ? Taro.pxTransform(fontSize) : '', + borderColor: selectedColor, + backgroundColor: selectedColor, + } return ( ( - {value} - ) + >{value}) ) } ) } } + +AtSegmentedControl.defaultProps = { + customStyle: '', + className: '', + current: 0, + color: '', + fontSize: 0, + disabled: false, + selectedColor: '', + values: [], + onClick: () => {}, +} + +AtSegmentedControl.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + current: PropTypes.number, + color: PropTypes.string, + fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + disabled: PropTypes.bool, + values: PropTypes.array, + onClick: PropTypes.func, +} diff --git a/src/components/slider/index.js b/src/components/slider/index.js index 6dbd3eb53..0e73b763a 100644 --- a/src/components/slider/index.js +++ b/src/components/slider/index.js @@ -2,7 +2,6 @@ import Taro from '@tarojs/taro' import { View, Slider } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - import AtComponent from '../../common/component' export default class AtSlider extends AtComponent { @@ -15,46 +14,6 @@ export default class AtSlider extends AtComponent { } } - static defaultProps = { - customStyle: '', - className: '', - min: 0, - max: 100, - step: 1, - value: 0, - disabled: false, - activeColor: '#6190e8', - backgroundColor: '#e9e9e9', - blockSize: 28, - blockColor: '#ffffff', - showValue: false, - onChange: () => {}, - onChanging: () => {} - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - min: PropTypes.number, - max: PropTypes.number, - step: PropTypes.number, - value: PropTypes.number, - disabled: PropTypes.bool, - activeColor: PropTypes.string, - backgroundColor: PropTypes.string, - blockSize: PropTypes.number, - blockColor: PropTypes.string, - showValue: PropTypes.bool, - onChange: PropTypes.func, - onChanging: PropTypes.func - } - static clampNumber (value, lower, upper) { return Math.max(lower, Math.min(upper, value)) } @@ -131,3 +90,43 @@ export default class AtSlider extends AtComponent { ) } } + +AtSlider.defaultProps = { + customStyle: '', + className: '', + min: 0, + max: 100, + step: 1, + value: 0, + disabled: false, + activeColor: '#6190e8', + backgroundColor: '#e9e9e9', + blockSize: 28, + blockColor: '#ffffff', + showValue: false, + onChange: () => {}, + onChanging: () => {}, +} + +AtSlider.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + value: PropTypes.number, + disabled: PropTypes.bool, + activeColor: PropTypes.string, + backgroundColor: PropTypes.string, + blockSize: PropTypes.number, + blockColor: PropTypes.string, + showValue: PropTypes.bool, + onChange: PropTypes.func, + onChanging: PropTypes.func, +} diff --git a/src/components/steps/index.js b/src/components/steps/index.js index d374ded09..d34ce90e5 100644 --- a/src/components/steps/index.js +++ b/src/components/steps/index.js @@ -2,33 +2,9 @@ import Taro from '@tarojs/taro' import { View, Text } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - -import AtIcon from '../../components/icon/index' import AtComponent from '../../common/component' export default class AtSteps extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - current: 0, - items: [], - onChange: () => {} - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - current: PropTypes.number, - items: PropTypes.array, - onChange: PropTypes.func - } - handleClick () { this.props.onChange(...arguments) } @@ -60,39 +36,39 @@ export default class AtSteps extends AtComponent { onClick={this.handleClick.bind(this, i)} > + {i !== 0 && } { - i !== 0 - ? - : null - } - { - item.success || item.error - ? + item.status + ? ( + + ) : { item.icon - ? + > + ) : {i + 1} } } - { - i !== items.length - 1 - ? - : null - } + {i !== items.length - 1 && } {item.title} @@ -107,3 +83,25 @@ export default class AtSteps extends AtComponent { ) } } + +AtSteps.defaultProps = { + customStyle: '', + className: '', + current: 0, + items: [], + onChange: () => {}, +} + +AtSteps.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + current: PropTypes.number, + items: PropTypes.array, + onChange: PropTypes.func, +} diff --git a/src/components/switch/index.js b/src/components/switch/index.js index 43f407fd4..26302d3b6 100644 --- a/src/components/switch/index.js +++ b/src/components/switch/index.js @@ -6,34 +6,6 @@ import classNames from 'classnames' import AtComponent from '../../common/component' export default class AtSwitch extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - title: '', - color: '#6190e8', - border: true, - disabled: false, - checked: false, - onChange: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - title: PropTypes.string, - color: PropTypes.string, - checked: PropTypes.bool, - border: PropTypes.bool, - disabled: PropTypes.bool, - onChange: PropTypes.func - } - handleChange (e) { this.props.onChange(e.detail.value, ...arguments) } @@ -88,3 +60,31 @@ export default class AtSwitch extends AtComponent { ) } } + +AtSwitch.defaultProps = { + customStyle: '', + className: '', + title: '', + color: '#6190e8', + border: true, + disabled: false, + checked: false, + onChange: () => {}, +} + +AtSwitch.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + title: PropTypes.string, + color: PropTypes.string, + checked: PropTypes.bool, + border: PropTypes.bool, + disabled: PropTypes.bool, + onChange: PropTypes.func, +} diff --git a/src/components/tab-bar/index.js b/src/components/tab-bar/index.js index b2391f868..939157d98 100644 --- a/src/components/tab-bar/index.js +++ b/src/components/tab-bar/index.js @@ -1,49 +1,11 @@ import Taro from '@tarojs/taro' -import { View } from '@tarojs/components' +import { View, Text } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - -import AtIcon from '../../components/icon/index' import AtBadge from '../../components/badge/index' import AtComponent from '../../common/component' export default class AtTabBar extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - fixed: false, - backgroundColor: '#fff', - current: 0, - iconSize: '24', - fontSize: '14', - color: '#333', - selectedColor: '#6190E8', - scroll: false, - tabList: [], - onClick: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - fixed: PropTypes.bool, - backgroundColor: PropTypes.string, - current: PropTypes.number, - iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - color: PropTypes.string, - selectedColor: PropTypes.string, - scroll: PropTypes.bool, - tabList: PropTypes.array, - onClick: PropTypes.func - } - // constructor () { // super(...arguments) // this.state = { @@ -80,10 +42,18 @@ export default class AtTabBar extends AtComponent { selectedColor } = this.props // const { isIPhoneX } = this.state - const defaultStyle = `color: ${color};` - const selectedStyle = `color: ${selectedColor};` - const titleStyle = `font-size: ${fontSize}px;` - const rootStyle = `background-color: ${backgroundColor};` + const defaultStyle = { + color: color || '' + } + const selectedStyle = { + color: selectedColor || '' + } + const titleStyle = { + fontSize: fontSize ? `${fontSize}px` : '' + } + const rootStyle = { + backgroundColor: backgroundColor || '' + } return ( {tabList.map((item, i) => ( - + ) : null} @@ -136,3 +104,34 @@ export default class AtTabBar extends AtComponent { ) } } + +AtTabBar.defaultProps = { + customStyle: '', + className: '', + fixed: false, + current: 0, + scroll: false, + tabList: [], + onClick: () => {}, +} + +AtTabBar.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + fixed: PropTypes.bool, + backgroundColor: PropTypes.string, + current: PropTypes.number, + iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + color: PropTypes.string, + selectedColor: PropTypes.string, + scroll: PropTypes.bool, + tabList: PropTypes.array, + onClick: PropTypes.func, +} diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js index e5c00b0fd..148641318 100644 --- a/src/components/tabs/index.js +++ b/src/components/tabs/index.js @@ -3,42 +3,9 @@ import Taro from '@tarojs/taro' import { View, ScrollView } from '@tarojs/components' import PropTypes from 'prop-types' import classNames from 'classnames' - import AtComponent from '../../common/component' export default class AtTabs extends AtComponent { - static defaultProps = { - customStyle: '', - className: '', - tabDirection: 'horizontal', - height: '', - current: 0, - swipeable: true, - scroll: false, - animated: true, - tabList: [], - onClick: () => { } - } - - static propTypes = { - customStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.string - ]), - className: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.string - ]), - height: PropTypes.string, - tabDirection: PropTypes.oneOf(['horizontal', 'vertical']), - current: PropTypes.number, - swipeable: PropTypes.bool, - scroll: PropTypes.bool, - animated: PropTypes.bool, - tabList: PropTypes.array, - onClick: PropTypes.func - } - constructor () { super(...arguments) this.state = { @@ -226,3 +193,35 @@ export default class AtTabs extends AtComponent { ) } } + +AtTabs.defaultProps = { + customStyle: '', + className: '', + tabDirection: 'horizontal', + height: '', + current: 0, + swipeable: true, + scroll: false, + animated: true, + tabList: [], + onClick: () => {}, +} + +AtTabs.propTypes = { + customStyle: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string + ]), + className: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.string + ]), + height: PropTypes.string, + tabDirection: PropTypes.oneOf(['horizontal', 'vertical']), + current: PropTypes.number, + swipeable: PropTypes.bool, + scroll: PropTypes.bool, + animated: PropTypes.bool, + tabList: PropTypes.array, + onClick: PropTypes.func, +} diff --git a/src/pages/navigation/segmented-control/index.js b/src/pages/navigation/segmented-control/index.js index b0170d395..62be45431 100644 --- a/src/pages/navigation/segmented-control/index.js +++ b/src/pages/navigation/segmented-control/index.js @@ -38,7 +38,7 @@ export default class Index extends Taro.Component { 基础用法 - + 标签 {current1 + 1} 的内容 diff --git a/src/pages/view/steps/index.js b/src/pages/view/steps/index.js index d301517e9..7c2df5b8a 100644 --- a/src/pages/view/steps/index.js +++ b/src/pages/view/steps/index.js @@ -29,26 +29,26 @@ export default class TimelinePage extends Taro.Component { render () { const items1 = [ - { 'title': '步骤一' }, - { 'title': '步骤二' } + { title: '步骤一' }, + { title: '步骤二' } ] const items2 = [ - { 'title': '步骤一' }, - { 'title': '步骤二' }, - { 'title': '步骤三' } + { title: '步骤一' }, + { title: '步骤二' }, + { title: '步骤三' } ] const items3 = [ - { 'title': '步骤一', 'desc': '这里是额外的信息，最多两行' }, - { 'title': '步骤二', 'desc': '这里是额外的信息，最多两行' }, - { 'title': '步骤三', 'desc': '这里是额外的信息，最多两行' } + { title: '步骤一', desc: '这里是额外的信息，最多两行' }, + { title: '步骤二', desc: '这里是额外的信息，最多两行' }, + { title: '步骤三', desc: '这里是额外的信息，最多两行' } ] const items4 = [ { - 'title': '步骤一', - 'desc': '这里是额外的信息，最多两行', - 'icon': { + title: '步骤一', + desc: '这里是额外的信息，最多两行', + icon: { value: 'sound', activeColor: '#fff', inactiveColor: '#78A4FA', @@ -56,9 +56,9 @@ export default class TimelinePage extends Taro.Component { } }, { - 'title': '步骤二', - 'desc': '这里是额外的信息，最多两行', - 'icon': { + title: '步骤二', + desc: '这里是额外的信息，最多两行', + icon: { value: 'shopping-cart', activeColor: '#fff', inactiveColor: '#78A4FA', @@ -66,9 +66,9 @@ export default class TimelinePage extends Taro.Component { } }, { - 'title': '步骤三', - 'desc': '这里是额外的信息，最多两行', - 'icon': { + title: '步骤三', + desc: '这里是额外的信息，最多两行', + icon: { value: 'camera', activeColor: '#fff', inactiveColor: '#78A4FA', @@ -79,18 +79,18 @@ export default class TimelinePage extends Taro.Component { const items5 = [ { - 'title': '步骤一', - 'desc': '这里是额外的信息，最多两行', - 'success': true + title: '步骤一', + desc: '这里是额外的信息，最多两行', + status: 'success' }, { - 'title': '步骤二', - 'desc': '这里是额外的信息，最多两行' + title: '步骤二', + desc: '这里是额外的信息，最多两行' }, { - 'title': '步骤三', - 'desc': '这里是额外的信息，最多两行', - 'error': true + title: '步骤三', + desc: '这里是额外的信息，最多两行', + status: 'error' } ] diff --git a/src/style/components/progress.scss b/src/style/components/progress.scss index 7f8951117..997a1dfc4 100644 --- a/src/style/components/progress.scss +++ b/src/style/components/progress.scss @@ -13,12 +13,16 @@ } } -$progress-height: 16px; +$at-progress-height: 16px; +$at-progress-inner-bg-color: $color-grey-6; +$at-progress-bar-bg-color: $color-brand-light; +$at-progress-text-size: $font-size-sm; .at-progress { display: flex; align-items: center; + /* elements */ &__outer { flex: 1 1 100%; margin-right: 0; @@ -26,16 +30,16 @@ $progress-height: 16px; &-inner { width: 100%; - background-color: $color-grey-6; - border-radius: 100px; + background-color: $at-progress-inner-bg-color; + border-radius: $at-progress-height / 2; vertical-align: middle; &-background { - height: $progress-height; - border-radius: 100px; - background-color: $color-brand-light; - transition: all 0.3s $ease-in-out-quad; position: relative; + height: $at-progress-height; + border-radius: $at-progress-height / 2; + background-color: $at-progress-bar-bg-color; + transition: all 0.3s $ease-in-out-quad; overflow: hidden; } } @@ -43,23 +47,48 @@ $progress-height: 16px; &__content { flex: 1 1 70px; - font-size: $font-size-sm; margin-left: 10px; + font-size: $at-progress-text-size; text-align: center; + + .at-icon { + font-size: 36px; + } + } + + /* modifiers */ + &--progress { + .at-progress__outer-inner-background::before { + content: ""; + opacity: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #fff; + border-radius: $at-progress-height / 2; + animation: progress-active 2s $ease-out-quad infinite; + } } -} -.at-progress--progress { - .at-progress__outer-inner-background::before { - content: ""; - opacity: 0; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #fff; - border-radius: 100px; - animation: progress-active 2s $ease-out-quad infinite; + &--error { + .at-progress__outer-inner-background { + background: $color-error; + } + + .at-icon { + color: $color-error; + } + } + + &--success { + .at-progress__outer-inner-background { + background: $color-success; + } + + .at-icon { + color: $color-success; + } } } diff --git a/src/style/components/radio.scss b/src/style/components/radio.scss index 2f0fadea6..b1787d2fd 100644 --- a/src/style/components/radio.scss +++ b/src/style/components/radio.scss @@ -1,46 +1,58 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; +$at-radio-bg-color: $color-bg; +$at-radio-title-color: $color-text-base; +$at-radio-title-size: $font-size-lg; +$at-radio-desc-color: $color-grey-2; +$at-radio-desc-size: $font-size-sm; +$at-radio-check-color: $color-brand; + .at-radio { - background-color: $color-bg; + background-color: $at-radio-bg-color; @include hairline-top-bottom(); - &__option_wrap { + /* elements */ + &__option-wrap { padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0; } - &__option_container { + &__option-container { display: flex; } &__title { flex: 6; - color: $color-text-base; - font-size: $font-size-lg; + color: $at-radio-title-color; + font-size: $at-radio-title-size; text-align: left; line-height: $line-height-zh; } &__icon { flex: 1; + font-size: $at-radio-title-size; text-align: right; - font-size: $font-size-lg; overflow: hidden; visibility: hidden; &--checked { visibility: visible; } + + .at-icon { + color: $at-radio-check-color; + } } &__desc { display: block; width: 86%; + color: $at-radio-desc-color; + font-size: $at-radio-desc-size; text-align: left; - font-size: $font-size-sm; - color: $color-grey-2; - letter-spacing: 0; line-height: $line-height-zh; + letter-spacing: 0; } &__option { @@ -48,19 +60,19 @@ @include active; &--disabled { - .at-radio__option_container, + .at-radio__option-container, .at-radio__desc { opacity: $opacity-disabled; } &:active { - background-color: $color-bg; + background-color: inherit; } } } &__option + &__option { - .at-radio__option_wrap { + .at-radio__option-wrap { @include hairline-top(); } } diff --git a/src/style/components/range.scss b/src/style/components/range.scss index 4488a1ada..882e31ca5 100644 --- a/src/style/components/range.scss +++ b/src/style/components/range.scss @@ -1,53 +1,55 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; -$height: 28PX; +$at-range-slider-size: 28PX; +$at-range-rail-height: 2PX; +$at-range-rail-bg-color: $color-grey-3; +$at-range-track-bg-color: $color-brand; +$at-range-slider-color: $color-white; +$at-range-slider-shadow: 0 0 4PX 0 rgba(0, 0, 0, 0.2); .at-range { position: relative; + padding: 0 $at-range-slider-size / 2 + 4PX; width: 100%; - padding: 0 $height; box-sizing: border-box; + /* elements */ &__container { position: relative; display: flex; align-items: center; width: 100%; - height: $height; - box-sizing: content-box; + height: $at-range-slider-size; + box-sizing: border-box; } &__rail { - position: absolute; - z-index: $zindex-form - 1; width: 100%; - height: 2PX; - background-color: $color-grey-3; + height: $at-range-rail-height; + background-color: $at-range-rail-bg-color; box-sizing: border-box; overflow: hidden; } &__track { position: absolute; - width: 20%; - height: 2PX; - background-color: $color-brand; - z-index: $zindex-form; + height: $at-range-rail-height; + background-color: $at-range-track-bg-color; } &__slider { position: absolute; - z-index: $zindex-form + 1; - width: $height; - height: $height; - margin-left: - $height / 2; + margin-left: -$at-range-slider-size / 2; + width: $at-range-slider-size; + height: $at-range-slider-size; border-radius: 50%; - background-color: #fff; - box-shadow: 0 0 4PX 0 rgba(0, 0, 0, 0.30); + background-color: $at-range-slider-color; + box-shadow: $at-range-slider-shadow; box-sizing: border-box; } + /* modifiers */ &--disabled { opacity: $opacity-disabled; } diff --git a/src/style/components/rate.scss b/src/style/components/rate.scss index 12548bea5..ac7de7551 100644 --- a/src/style/components/rate.scss +++ b/src/style/components/rate.scss @@ -1,10 +1,15 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; +$at-rate-icon-size: 20PX; +$at-rate-star-color: #ececec; +$at-rate-star-color-on: #ffca3e; + .at-rate { - line-height: 0; font-size: 0; + line-height: 0; + /* elements */ &__left { display: inline-block; position: absolute; @@ -19,23 +24,27 @@ &__icon { position: relative; - line-height: 0; - font-size: 0; display: inline-block; - color: #ececec; + color: $at-rate-star-color; + font-size: 0; + line-height: 0; transition: all 0.2s; + .at-icon { + font-size: $at-rate-icon-size; + } + &--on { - color: #ffca3e; + color: $at-rate-star-color-on; } &--off { - color: #ececec; + color: $at-rate-star-color; } &--half { .at-rate__left { - color: #ffca3e; + color: $at-rate-star-color-on; } } } diff --git a/src/style/components/segmented-control.scss b/src/style/components/segmented-control.scss index 01261bd7d..dc9c0da33 100644 --- a/src/style/components/segmented-control.scss +++ b/src/style/components/segmented-control.scss @@ -1,36 +1,48 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; +$at-segmented-control-color: $color-brand; +$at-segmented-control-color-active: $color-white; +$at-segmented-control-bg-color: $color-white; +$at-segmented-control-font-size: $font-size-base; +$at-segmented-control-min-width: 120px; + .at-segmented-control { display: inline-flex; position: relative; - text-align: center; width: 100%; + text-align: center; border-radius: $border-radius-md; box-sizing: border-box; white-space: nowrap; overflow: hidden; - @include border-thin($color: $color-brand, $width: 1PX); + @include border-thin($color: $at-segmented-control-color, $width: 1PX); + /* elements */ &__item { flex: 1; box-sizing: border-box; padding: $spacing-v-xs $spacing-h-sm; - min-width: 120px; - min-height: 20px; - color: $color-text-base; - font-size: $font-size-base; + min-width: $at-segmented-control-min-width; + color: $at-segmented-control-color; + font-size: $at-segmented-control-font-size; white-space: nowrap; text-overflow: ellipsis; - background-color: $color-bg; + background-color: $at-segmented-control-bg-color; overflow: hidden; transition: all 0.3s $ease-in-out-cubic; + + &--active { + color: $at-segmented-control-color-active; + background-color: $at-segmented-control-color; + } } &__item + &__item { - @include border-thin-left($color: $color-brand, $width: 1PX); + @include border-thin-left($color: $at-segmented-control-color, $width: 1PX); } + /* modifiers */ &--disabled { opacity: $opacity-disabled; } diff --git a/src/style/components/slider.scss b/src/style/components/slider.scss index 5c5dfd420..c3d2cc8ea 100644 --- a/src/style/components/slider.scss +++ b/src/style/components/slider.scss @@ -5,6 +5,7 @@ display: flex; align-items: center; + /* elements */ &__inner { flex: 1; } @@ -16,6 +17,7 @@ text-align: center; } + /* modifiers */ &--disabled { .at-slider__inner { opacity: $opacity-disabled; diff --git a/src/style/components/steps.scss b/src/style/components/steps.scss index af7813a24..4a562c868 100644 --- a/src/style/components/steps.scss +++ b/src/style/components/steps.scss @@ -1,7 +1,14 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; -$circularH: 28PX; +$at-steps-circle-size: 56px; +$at-steps-icon-size: 24px; +$at-steps-color: $color-white; +$at-steps-bg-color: $color-grey-4; +$at-steps-color-active: $color-grey-2; +$at-steps-bg-color-active: $color-brand; +$at-steps-line-color: $color-grey-3; +$at-steps-desc-color: $color-grey-3; .at-steps { display: flex; @@ -10,17 +17,15 @@ $circularH: 28PX; justify-content: center; box-sizing: border-box; + /* elements */ &__circular { - border-radius: 50%; align-items: center; justify-content: center; - line-height: $circularH; - // 为了让图标垂直水平居中 - font-size: 0; - height: $circularH; - width: $circularH; + width: $at-steps-circle-size; + height: $at-steps-circle-size; text-align: center; - z-index: $zindex-steps; + line-height: $at-steps-circle-size; + border-radius: 50%; transition: all 0.3s; } @@ -32,15 +37,15 @@ $circularH: 28PX; &--active { .at-steps__circular { - color: $color-white; - background-color: $color-brand; + color: $at-steps-color; + background-color: $at-steps-bg-color-active; } } &--inactive { .at-steps__circular { - color: $color-grey-2; - background-color: $color-grey-4; + color: $at-steps-color-active; + background-color: $at-steps-bg-color; } } } @@ -53,14 +58,29 @@ $circularH: 28PX; font-size: 0; } + &__single-icon { + font-size: $at-steps-circle-size; + + &--success { + color: $color-success; + } + + &--error { + color: $color-error; + } + } + + &__circle-icon { + font-size: $at-steps-icon-size; + } + &__left-line { position: absolute; width: 30%; top: 50%; right: 70%; height: 1Px; - background-color: $color-grey-3; - z-index: $zindex-steps - 1; + background-color: $at-steps-line-color; } &__right-line { @@ -69,8 +89,7 @@ $circularH: 28PX; top: 50%; left: 70%; height: 1Px; - background-color: $color-grey-3; - z-index: $zindex-steps - 1; + background-color: $at-steps-line-color; } &__num { @@ -85,8 +104,8 @@ $circularH: 28PX; } &__desc { + color: $at-steps-desc-color; font-size: $font-size-sm; - color: $color-grey-3; @include line(2); } } diff --git a/src/style/components/swipe-action.scss b/src/style/components/swipe-action.scss index eba298120..9860d58eb 100644 --- a/src/style/components/swipe-action.scss +++ b/src/style/components/swipe-action.scss @@ -1,15 +1,21 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; +$at-swipe-action-color: $color-white; +$at-swipe-action-font-size: $font-size-base; +$at-swipe-action-bg-color: $color-white; +$at-swipe-action-option-bg-color: $color-grey-2; + .at-swipe-action { position: relative; overflow: hidden; + /* elements */ &__content { - background-color: white; position: relative; - z-index: 2; font-size: $font-size-lg; + background-color: $at-swipe-action-bg-color; + z-index: 2; &.animtion { transition: transform 300ms $timing-func; @@ -20,13 +26,13 @@ @include active; @include align-items(center); - height: 100%; - background-color: $color-grey-2; display: inline-flex; - color: $color-white; - font-size: $font-size-base; padding: 0 $spacing-h-xl; + height: 100%; + color: $at-swipe-action-color; + font-size: $at-swipe-action-font-size; text-align: center; + background-color: $at-swipe-action-option-bg-color; } &__options { @@ -36,7 +42,7 @@ position: absolute; top: 0; right: 0; - z-index: 1; height: 100%; + z-index: 1; } } diff --git a/src/style/components/switch.scss b/src/style/components/switch.scss index 9a178305b..98df5996b 100644 --- a/src/style/components/switch.scss +++ b/src/style/components/switch.scss @@ -9,6 +9,7 @@ padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0; @include hairline-bottom(); + /* elements */ &__title { flex: 6; font-size: $font-size-base; @@ -37,6 +38,7 @@ z-index: $zindex-form; } + /* modifiers */ &--disabled { .at-switch__switch { opacity: $opacity-disabled; diff --git a/src/style/components/tab-bar.scss b/src/style/components/tab-bar.scss index 42274cea4..c588099cd 100644 --- a/src/style/components/tab-bar.scss +++ b/src/style/components/tab-bar.scss @@ -1,45 +1,65 @@ @import '../mixins/index.scss'; @import '../variables/default.scss'; +$at-tab-bar-bg-color: $color-white; +$at-tab-bar-min-height: 50px; +$at-tab-bar-title-max-width: 200px; +$at-tab-bar-color: $color-text-base; +$at-tab-bar-color-active: $color-brand; +$at-tab-bar-font-size: 28px; +$at-tab-bar-icon-color: $color-grey-0; +$at-tab-bar-icon-font-size: 48px; + .at-tab-bar { display: flex; - width: 100%; - min-height: 50px; padding: $spacing-v-sm 0 $spacing-v-xs; - text-align: center; - box-sizing: border-box; + width: 100%; + min-height: $at-tab-bar-bg-color; justify-content: center; align-items: start; - background-color: $color-bg; + text-align: center; + box-sizing: border-box; + background-color: $at-tab-bar-bg-color; @include hairline-top(); + /* elements */ &__item { flex: 1; padding: $spacing-v-sm $spacing-v-sm 0; - color: $color-text-base; - font-size: $font-size-xs; + color: $at-tab-bar-color; + font-size: 0; transition: all 0.2s; + + &--active { + color: $at-tab-bar-color-active; + } + } + + &__icon { + font-size: $at-tab-bar-icon-font-size; + line-height: 1; } &__title { display: block; padding: $spacing-v-xs 0; - max-width: 200px; - font-size: $font-size-xs; + max-width: $at-tab-bar-title-max-width; + font-size: $at-tab-bar-font-size; line-height: $line-height-base; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + /* modifiers */ &--fixed { position: fixed; bottom: 0; left: 0; right: 0; - z-index: $zindex-nav; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); + z-index: $zindex-nav; } &--ipx { diff --git a/src/style/components/tabs.scss b/src/style/components/tabs.scss index 64b1021bb..812436c82 100644 --- a/src/style/components/tabs.scss +++ b/src/style/components/tabs.scss @@ -6,12 +6,13 @@ height: 100%; overflow: hidden; + /* elements */ &__item { position: relative; flex: 1; padding: $spacing-v-lg $spacing-h-lg; - font-size: $font-size-base; color: $color-text-base; + font-size: $font-size-base; text-overflow: ellipsis; overflow: hidden; @@ -25,7 +26,6 @@ background-color: $color-brand; transform: scaleX(0); transition: all 0.15s; - z-index: $zindex-tab; } &--active { @@ -83,9 +83,9 @@ right: auto; width: 600%; height: 1PX; - z-index: $zindex-tab - 1; } + /* modifiers */ &--vertical { display: flex; flex: 1; @@ -104,7 +104,6 @@ bottom: auto; width: 1PX; height: 100%; - z-index: $zindex-tab - 1; } .at-tabs__header { @@ -126,7 +125,6 @@ width: 1PX; height: 100%; transform: scaleY(0); - z-index: $zindex-tab; } } @@ -144,6 +142,7 @@ font-size: 28px; box-sizing: border-box; + /* modifiers */ &--active { height: auto; } diff --git a/src/style/variables/default.scss b/src/style/variables/default.scss index 441a88c7b..cc047f2f2 100644 --- a/src/style/variables/default.scss +++ b/src/style/variables/default.scss @@ -113,6 +113,7 @@ $zindex-steps: 500 !default; $zindex-tab: 600 !default; $zindex-form: 700 !default; $zindex-nav: 800 !default; +$zindex-search-bar: 800 !default; $zindex-indexes: 805 !default; $zindex-flot-layout: 810 !default; $zindex-drawer: 900 !default;