From 8a00b59044e58c3f13e081f80af1df1c2ab9f795 Mon Sep 17 00:00:00 2001 From: Jerome Lin Date: Fri, 25 Aug 2017 16:02:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=AE=8C=E5=96=84,=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D`Mask`=E3=80=81`Icon`=E7=BB=84=E4=BB=B6bug,`Progress`?= =?UTF-8?q?=E7=BB=84=E4=BB=B6type=E5=B1=9E=E6=80=A7=E6=9B=B4=E5=90=8D?= =?UTF-8?q?=E4=B8=BAshape?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 6 +- components/Alert/Alert.jsx | 2 + components/Badge/Badge.jsx | 4 +- components/Confirm/Confirm.jsx | 2 + components/Mask/Mask.jsx | 4 +- components/Modal/Modal.jsx | 13 ++-- components/Progress/Progress.jsx | 10 +-- components/SwipeAction/SwipeAction.jsx | 2 +- docs/zh-cn/SUMMARY.md | 18 +++++ docs/zh-cn/components/ActionSheet.md | 8 +- docs/zh-cn/components/Badge.md | 61 +++++++++++++++ docs/zh-cn/components/Button.md | 12 +-- docs/zh-cn/components/Cell.md | 72 +++++++++++++++++ docs/zh-cn/components/Checkbox.md | 14 ++-- docs/zh-cn/components/Icon.md | 36 +++++++++ docs/zh-cn/components/Input.md | 4 +- docs/zh-cn/components/Message.md | 57 ++++++++++++++ docs/zh-cn/components/Modal.md | 103 +++++++++++++++++++++++++ docs/zh-cn/components/NoticeBar.md | 63 +++++++++++++++ docs/zh-cn/components/Picker.md | 6 +- docs/zh-cn/components/Popup.md | 50 ++++++++++++ docs/zh-cn/components/Progress.md | 54 +++++++++++++ docs/zh-cn/components/Radio.md | 16 ++-- docs/zh-cn/components/Spinner.md | 48 ++++++++++++ docs/zh-cn/components/Stepper.md | 14 ++-- docs/zh-cn/components/Swipe.md | 68 ++++++++++++++++ docs/zh-cn/components/SwipeAction.md | 98 +++++++++++++++++++++++ docs/zh-cn/components/Switch.md | 4 +- docs/zh-cn/components/Tab.md | 93 ++++++++++++++++++++++ docs/zh-cn/components/Toast.md | 58 ++++++++++++++ docs/zh-cn/components/Uploader.md | 6 +- examples/index.js | 6 +- examples/pages/BadgePage.jsx | 7 +- examples/pages/CellPage.jsx | 14 ++-- examples/pages/Index.jsx | 6 +- examples/pages/MessagePage.jsx | 13 ++-- examples/pages/ModalPage.jsx | 6 +- examples/pages/NoticeBarPage.jsx | 22 +++--- examples/pages/ProgressPage.jsx | 2 +- examples/pages/SpinnerPage.jsx | 10 ++- examples/pages/SwipeActionPage.jsx | 6 +- examples/pages/TabPage.jsx | 96 +++++++++++------------ styles/components/Modal.scss | 2 +- styles/components/Progress.scss | 2 +- styles/components/SwipeAction.scss | 2 +- 45 files changed, 1046 insertions(+), 154 deletions(-) create mode 100644 docs/zh-cn/components/Badge.md create mode 100644 docs/zh-cn/components/Cell.md create mode 100644 docs/zh-cn/components/Icon.md create mode 100644 docs/zh-cn/components/Message.md create mode 100644 docs/zh-cn/components/Modal.md create mode 100644 docs/zh-cn/components/NoticeBar.md create mode 100644 docs/zh-cn/components/Popup.md create mode 100644 docs/zh-cn/components/Progress.md create mode 100644 docs/zh-cn/components/Spinner.md create mode 100644 docs/zh-cn/components/Swipe.md create mode 100644 docs/zh-cn/components/SwipeAction.md create mode 100644 docs/zh-cn/components/Tab.md create mode 100644 docs/zh-cn/components/Toast.md diff --git a/.eslintignore b/.eslintignore index 40b878db5..cba059305 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,5 @@ -node_modules/ \ No newline at end of file +node_modules/ +assets/ +dist/ +lib/ +coverage/ diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx index b1abbe7d0..7e1becc2c 100644 --- a/components/Alert/Alert.jsx +++ b/components/Alert/Alert.jsx @@ -25,6 +25,7 @@ class Alert extends PureComponent { Alert.propTypes = { prefixCls: PropTypes.string, + animationType: Modal.propTypes.animationType, message: PropTypes.string, cancelText: PropTypes.string, onCancel: PropTypes.func, @@ -32,6 +33,7 @@ Alert.propTypes = { Alert.defaultProps = { prefixCls: 'za-alert', + animationType: 'zoom', message: '', cancelText: '关闭', onCancel() {}, diff --git a/components/Badge/Badge.jsx b/components/Badge/Badge.jsx index 38c07011e..20e9fa639 100644 --- a/components/Badge/Badge.jsx +++ b/components/Badge/Badge.jsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; class Badge extends PureComponent { render() { - const { prefixCls, className, theme, shape, sup, text, children } = this.props; + const { prefixCls, className, theme, shape, sup, text, children, ...others } = this.props; const cls = classnames({ [`${prefixCls}`]: true, @@ -19,7 +19,7 @@ class Badge extends PureComponent { }); return ( - + {children} {text} diff --git a/components/Confirm/Confirm.jsx b/components/Confirm/Confirm.jsx index 07168c3be..5d08d1b6f 100644 --- a/components/Confirm/Confirm.jsx +++ b/components/Confirm/Confirm.jsx @@ -26,6 +26,7 @@ class Confirm extends PureComponent { Confirm.propTypes = { prefixCls: PropTypes.string, + animationType: Modal.propTypes.animationType, message: PropTypes.string, okText: PropTypes.string, cancelText: PropTypes.string, @@ -35,6 +36,7 @@ Confirm.propTypes = { Confirm.defaultProps = { prefixCls: 'za-confirm', + animationType: 'zoom', message: '', okText: '确定', cancelText: '取消', diff --git a/components/Mask/Mask.jsx b/components/Mask/Mask.jsx index b305ef3c2..8fb00d601 100644 --- a/components/Mask/Mask.jsx +++ b/components/Mask/Mask.jsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; class Mask extends PureComponent { render() { - const { prefixCls, className, visible, type, onClose } = this.props; + const { prefixCls, className, visible, type, onClose, ...others } = this.props; const markCls = classnames({ [`${prefixCls}`]: true, [className]: !!className, @@ -12,7 +12,7 @@ class Mask extends PureComponent { }); return visible - ?
+ ?
: null; } } diff --git a/components/Modal/Modal.jsx b/components/Modal/Modal.jsx index a053e22a6..fae362377 100644 --- a/components/Modal/Modal.jsx +++ b/components/Modal/Modal.jsx @@ -64,14 +64,14 @@ class Modal extends PureComponent { } render() { - const { prefixCls, className, animationType, animationDuration, width, minWidth, radius, onMaskClick, children } = this.props; + const { prefixCls, className, shape, animationType, animationDuration, width, onMaskClick, children } = this.props; const { isShow, isPending, animationState } = this.state; const cls = { modal: classnames({ [`${prefixCls}`]: true, [className]: !!className, - radius, + [`shape-${shape}`]: !!shape, [`fade-${animationState}`]: isPending, }), dialog: classnames({ @@ -91,7 +91,6 @@ class Modal extends PureComponent { }, dialog: { width, - minWidth, WebkitAnimationDuration: `${animationDuration}ms`, animationDuration: `${animationDuration}ms`, }, @@ -129,6 +128,7 @@ class Modal extends PureComponent { Modal.propTypes = { prefixCls: PropTypes.string, className: PropTypes.string, + shape: PropTypes.oneOf(['radius']), visible: PropTypes.bool, animationType: PropTypes.oneOf([ 'fade', 'door', 'flip', 'rotate', 'zoom', @@ -137,20 +137,17 @@ Modal.propTypes = { ]), animationDuration: PropTypes.number, width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - minWidth: PropTypes.number, - radius: PropTypes.bool, onMaskClick: PropTypes.func, }; Modal.defaultProps = { prefixCls: 'za-modal', className: null, + shape: null, visible: false, - animationType: 'zoom', + animationType: 'fade', animationDuration: 200, width: '70%', - minWidth: 270, - radius: false, onMaskClick() {}, }; diff --git a/components/Progress/Progress.jsx b/components/Progress/Progress.jsx index 97a9197b5..546e11687 100644 --- a/components/Progress/Progress.jsx +++ b/components/Progress/Progress.jsx @@ -6,16 +6,16 @@ import Spinner from '../Spinner'; class Progress extends PureComponent { render() { - const { prefixCls, className, theme, type, strokeWidth, percent, children, ...others } = this.props; + const { prefixCls, className, theme, shape, strokeWidth, percent, children, ...others } = this.props; const cls = classnames({ [`${prefixCls}`]: true, [`theme-${theme}`]: !!theme, - [`${prefixCls}-${type}`]: !!type, + [`shape-${shape}`]: !!shape, [className]: !!className, }); - const innerRender = type === 'circle' + const innerRender = shape === 'circle' ?
:
; @@ -33,7 +33,7 @@ Progress.propTypes = { prefixCls: PropTypes.string, className: PropTypes.string, theme: Spinner.propTypes.theme, - type: PropTypes.oneOf(['line', 'circle']), + shape: PropTypes.oneOf(['line', 'circle']), strokeWidth: Spinner.propTypes.strokeWidth, percent: Spinner.propTypes.percent, @@ -43,7 +43,7 @@ Progress.defaultProps = { prefixCls: 'za-progress', className: null, theme: Spinner.defaultProps.theme, - type: 'line', + shape: 'line', strokeWidth: Spinner.defaultProps.strokeWidth, percent: Spinner.defaultProps.percent, }; diff --git a/components/SwipeAction/SwipeAction.jsx b/components/SwipeAction/SwipeAction.jsx index 73c01b02f..ff85625b3 100644 --- a/components/SwipeAction/SwipeAction.jsx +++ b/components/SwipeAction/SwipeAction.jsx @@ -257,7 +257,7 @@ SwipeAction.propTypes = { }; SwipeAction.defaultProps = { - prefixCls: 'za-swipeAction', + prefixCls: 'za-swipeaction', left: [], right: [], moveTimeDuration: 300, diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index fdc481950..9c183582d 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -19,4 +19,22 @@ * 操作反馈 * [动作面板 ActionSheet](components/ActionSheet.md) * [按钮 Button](components/Button.md) + * [模态框 Modal](components/Modal.md) + * [弹出框 Popup](components/Popup.md) + * [滑动操作 SwipeAction](components/SwipeAction.md) + * [轻提示 Toast](components/Toast.md) + +* 数据展示 + * [徽标 Badge](components/Badge.md) + * [列表项 Cell](components/Cell.md) + * [图标 Icon](components/Icon.md) + * [消息 Message](components/Message.md) + * [通告栏 NoticeBar](components/NoticeBar.md) + * [进度条 Progress](components/Progress.md) + * [指示器 Spinner](components/Spinner.md) + * [图片轮播 Swipe](components/Swipe.md) + * [标签页 Tab](components/Tab.md) + + + diff --git a/docs/zh-cn/components/ActionSheet.md b/docs/zh-cn/components/ActionSheet.md index b673c3edc..fb1456b78 100644 --- a/docs/zh-cn/components/ActionSheet.md +++ b/docs/zh-cn/components/ActionSheet.md @@ -1,6 +1,6 @@ # 动作面板 ActionSheet -[demo页面](https://zhongantecheng.github.io/zarm/#/actionsheet) +[demo页面](https://zhongantecheng.github.io/zarm/#/action-sheet) ### 引入 @@ -72,12 +72,12 @@ import { ActionSheet } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-switch | | 类名前缀 | -| className | string | null | | 追加类名 | -| shape | string | null | 'radius' | 形状 | +| className | string | | | 追加类名 | +| shape | string | | 'radius' | 形状 | | visible | bool | false | | 是否显示 | | actions | arrayOf(object) | [ ] | object: { theme, text, onClick } | 动作列表 | | onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 | -| onCancel | func | null | void | 显示取消菜单，点击时触发的回调函数 | +| onCancel | func | | void | 显示取消菜单，点击时触发的回调函数 | | cancelText | string | '取消' | | 取消菜单的文案 | diff --git a/docs/zh-cn/components/Badge.md b/docs/zh-cn/components/Badge.md new file mode 100644 index 000000000..375ec8eda --- /dev/null +++ b/docs/zh-cn/components/Badge.md @@ -0,0 +1,61 @@ +# 徽标 Badge + +[demo页面](https://zhongantecheng.github.io/zarm/#/badge) + +### 引入 + +```js +import { Badge } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 点状 +```jsx + +``` + +###### 直角 +```jsx + +``` + +###### 圆角 +```jsx + +``` + +###### 椭圆形 +```jsx + +``` + +###### 圆形 +```jsx + +``` + +#### 上标位置 +```jsx + +
+ +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-badge | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'error' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| shape | string | | 'dot', 'radius', 'round', 'circle' | 形状 | +| text | any | | | 显示文字 | +| sup | bool | false | | 是否上标位置 | + + + + diff --git a/docs/zh-cn/components/Button.md b/docs/zh-cn/components/Button.md index 76b248e3f..c9c72867a 100644 --- a/docs/zh-cn/components/Button.md +++ b/docs/zh-cn/components/Button.md @@ -71,16 +71,16 @@ import { Button } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-button | | 类名前缀 | -| className | string | null | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| size | string | null | 'xl', 'lg', 'sm', 'xs' | 大小 | -| shape | string | null | 'radius', 'round', 'circle' | 形状 | +| className | string | | | 追加类名 | +| theme | string | 'default' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| size | string | | 'xl', 'lg', 'sm', 'xs' | 大小 | +| shape | string | | 'radius', 'round', 'circle' | 形状 | | block | bool | false | | 是否为块级元素 | | bordered | bool | false | | 是否是幽灵按钮 | | disabled | bool | false | | 是否禁用 | | loading | bool | false | | 是否显示加载中 | -| icon | React.element | null | | icon | -| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 | +| icon | React.element | | | icon | +| onClick | func | noop | | 点击后触发的回调函数 | diff --git a/docs/zh-cn/components/Cell.md b/docs/zh-cn/components/Cell.md new file mode 100644 index 000000000..409915a16 --- /dev/null +++ b/docs/zh-cn/components/Cell.md @@ -0,0 +1,72 @@ +# 列表项 Cell + +[demo页面](https://zhongantecheng.github.io/zarm/#/cell) + +### 引入 + +```js +import { Cell } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + + +
标题文字
+
描述文字
+
+ } + /> +``` + +###### 带描述 +```jsx + +} /> +``` + +###### 带图标、描述 +```jsx +} /> +} /> +``` + +###### 带跳转 +```jsx + {}} /> +``` + +#### 提示信息 +```jsx +}>标题不能为空}> + + +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-cell | | 类名前缀 | +| className | string | | | 追加类名 | +| icon | any | | | 显示的图标 | +| titile | any | | | 标题 | +| description | any | | | 描述 | +| hasArrow | bool | false | | 是否显示箭头 | +| onClick | func | noop | | 点击后触发的回调函数 | +| help | any | | | 下方提示信息，通常配合`Message`组件使用 | + + + + + + diff --git a/docs/zh-cn/components/Checkbox.md b/docs/zh-cn/components/Checkbox.md index 621bccdea..2de61d085 100644 --- a/docs/zh-cn/components/Checkbox.md +++ b/docs/zh-cn/components/Checkbox.md @@ -116,9 +116,9 @@ import { Checkbox } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-checkbox | | 类名前缀 | -| className | string | null | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| type | string | null | 'button', 'cell' | 显示类型 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| type | string | | 'button', 'cell' | 显示类型 | | checked | bool | false | | 是否选中 | | defaultChecked | bool | false | | 初始是否选中 | | disabled | bool | false | | 是否禁用 | @@ -129,10 +129,10 @@ import { Checkbox } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-checkbox | | 类名前缀 | -| className | string | null | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| shape | string | null | 'radius', 'round' | 形状 | -| type | string | null | 'button', 'cell' | 显示类型 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| shape | string | | 'radius', 'round' | 形状 | +| type | string | | 'button', 'cell' | 显示类型 | | value | array | [ ] | | 选中值 | | defaultValue | array | [ ] | | 初始选中值 | | block | bool | false | | 是否为块级元素 | diff --git a/docs/zh-cn/components/Icon.md b/docs/zh-cn/components/Icon.md new file mode 100644 index 000000000..5e7f27165 --- /dev/null +++ b/docs/zh-cn/components/Icon.md @@ -0,0 +1,36 @@ +# 图标 Icon + +[demo页面](https://zhongantecheng.github.io/zarm/#/icon) + +### 引入 + +```js +import { Icon } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + +``` + +###### 主题 +```jsx + +``` + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-stepper | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'default' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| type | string | | 'right', 'right-round', 'right-round-fill','wrong', 'wrong-round', 'wrong-round-fill', 'info-round', 'info-round-fill', 'question-round', 'question-round-fill', 'warning-round', 'warning-round-fill', 'arrow-left', 'arrow-right', 'arrow-top', 'arrow-bottom', 'add', 'add-round', 'add-round-fill', 'minus', 'minus-round', 'minus-round-fill', 'broadcast' | 图标类型 | + + + + diff --git a/docs/zh-cn/components/Input.md b/docs/zh-cn/components/Input.md index d9e2dc1ae..f1ecfd648 100644 --- a/docs/zh-cn/components/Input.md +++ b/docs/zh-cn/components/Input.md @@ -38,12 +38,12 @@ import { Input } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-input | | 类名前缀 | -| className | string | null | | 追加类名 | +| className | string | | | 追加类名 | | type | string | text | | 显示类型 | | value | string | | | 值 | | defaultValue | string | | | 初始值 | | disabled | bool | false | | 是否禁用 | -| rows | string, number | null | | 多行文本时的显示行数 | +| rows | string, number | | | 多行文本时的显示行数 | | autosize | bool | false | | 是否高度自适应 | | showLength | bool | false | | 是否显示输入字数 | | onChange | func | noop | \(value: string\) | 值变化时触发的回调函数 | diff --git a/docs/zh-cn/components/Message.md b/docs/zh-cn/components/Message.md new file mode 100644 index 000000000..4a5ff1542 --- /dev/null +++ b/docs/zh-cn/components/Message.md @@ -0,0 +1,57 @@ +# 消息 Message + +[demo页面](https://zhongantecheng.github.io/zarm/#/message) + +### 引入 + +```js +import { Message } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx +消息内容 +``` + +###### 设置主题 +```jsx +warning +``` + +###### 自定义图标 +```jsx +}>自定义图标 +``` + +#### 可操作 + +###### 链接样式的 +```jsx + alert('click this message!')}>链接样式的 +``` + +###### 可关闭的 +```jsx +可关闭的 +``` + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-message | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| icon | any | | | 设置图标 | +| hasClosable | bool | false | | 是否显示关闭按钮 | +| hasArrow | bool | false | | 是否显示箭头 | +| onClick | func | noop | | 点击后触发的回调函数 | + + + + + diff --git a/docs/zh-cn/components/Modal.md b/docs/zh-cn/components/Modal.md new file mode 100644 index 000000000..931062b3c --- /dev/null +++ b/docs/zh-cn/components/Modal.md @@ -0,0 +1,103 @@ +# 模态框 Modal + +[demo页面](https://zhongantecheng.github.io/zarm/#/modal) + +### 引入 + +```js +import { Modal } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + + this.setState({ visible: false })} /> + + 模态框内容 + + +``` + +###### 圆角 +```jsx + + this.setState({ visible: false })} /> + + 模态框内容 + + +``` + +###### 点击遮罩层关闭 +```jsx + this.setState({ visible: false })}> + + + 模态框内容 + + +``` + +###### 无头部 +```jsx + this.setState({ visible: false })}> + + 模态框内容 + + +``` + +###### 动画效果 +```jsx + this.setState({ visible: false })}> + + 模态框内容 + + +``` + +#### 特定场景 + +###### 警告框 +```jsx + this.setState({ visible: false })} + /> +``` + +###### 确认框 +```jsx + alert('click ok')} + onCancel={() => this.setState({ visible: false })} + /> +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-modal | | 类名前缀 | +| className | string | 无 | | 追加类名 | +| shape | string | 无 | 'radius' | 形状 | +| visible | bool | false | | 是否显示 | +| animationType | string | 'fade' | 'fade', 'door', 'flip', 'rotate', 'zoom','moveUp', 'moveDown', 'moveLeft', 'moveRight','slideUp', 'slideDown', 'slideLeft', 'slideRight' | 动画效果 | +| animationDuration | number | 200 | | 动画执行时间 | +| width | string, number | '70%' | | 宽度 | +| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 | + + + diff --git a/docs/zh-cn/components/NoticeBar.md b/docs/zh-cn/components/NoticeBar.md new file mode 100644 index 000000000..6512230e7 --- /dev/null +++ b/docs/zh-cn/components/NoticeBar.md @@ -0,0 +1,63 @@ +# 通告栏 NoticeBar + +[demo页面](https://zhongantecheng.github.io/zarm/#/notice-bar) + +### 引入 + +```js +import { NoticeBar } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx +普通 +``` + +###### 设置主题 +```jsx +错误色 +``` + +###### 自定义图标 +```jsx +}>自定义图标 +``` + +###### 自动滚动轮播 +```jsx +各位zarmer请注意，本组件使用了自动滚动功能，更多用法请参见使用文档。 +``` + +#### 可操作 + +###### 链接样式 +```jsx + alert('click this notice!')}>链接样式的 +``` + +###### 可关闭 +```jsx +可关闭的 +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-noticebar | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'warning' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| icon | any | | | 设置图标 | +| autoscroll | bool | false | | 是否开启自动滚动轮播 | +| hasClosable | bool | false | | 是否显示关闭按钮 | +| hasArrow | bool | false | | 是否显示箭头 | +| onClick | func | noop | | 点击后触发的回调函数 | + + + + diff --git a/docs/zh-cn/components/Picker.md b/docs/zh-cn/components/Picker.md index 068675ebf..21ed2a7ef 100644 --- a/docs/zh-cn/components/Picker.md +++ b/docs/zh-cn/components/Picker.md @@ -224,7 +224,7 @@ import { Picker } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-picker | | 类名前缀 | -| className | string | null | | 追加类名 | +| className | string | | | 追加类名 | | dataSource | array | [ ] | | 数据源 | | visible | bool | false | | 是否显示 | | value | array, string | | | 值 | @@ -235,7 +235,7 @@ import { Picker } from 'zarm'; | title | string | '请选择' | | 选择器标题 | | placeholder | string | '请选择' | | 输入提示信息 | | displayRender | func | noop | | 所选值渲染 | -| cols | number | null | | 级联选择器的级数 | +| cols | number | | | 级联选择器的级数 | | onChange | func | noop | \(selected: object\) | 值变化时触发的回调函数 | | onOk | func | noop | \(selected: object\) | 点击确定时触发的回调函数 | | onCancel | func | noop | \(selected: object\) | 点击取消时触发的回调函数 | @@ -246,7 +246,7 @@ import { Picker } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | mode | string | date | `year`, `date`, `time` | 指定日期选择模式 | -| format | string | null | 例：YYYY年MM月DD日
年:`YYYY`, 月:`MM`, 日:`DD`, 时:`hh`, 分:`mm`, 秒:`ss`。| 格式化显示值 | +| format | string | | 例：YYYY年MM月DD日
年:`YYYY`, 月:`MM`, 日:`DD`, 时:`hh`, 分:`mm`, 秒:`ss`。| 格式化显示值 | | minuteStep | number | 1 | | 分钟步长 | | wheelDefaultValue | array, string | | | 滚轮默认值 | diff --git a/docs/zh-cn/components/Popup.md b/docs/zh-cn/components/Popup.md new file mode 100644 index 000000000..92b270bd0 --- /dev/null +++ b/docs/zh-cn/components/Popup.md @@ -0,0 +1,50 @@ +# 弹出框 Popup + +[demo页面](https://zhongantecheng.github.io/zarm/#/popup) + +### 引入 + +```js +import { Popup } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + this.setState({ visible: false })}> +
更新成功
+ +``` + +###### 自动关闭 +```jsx + this.setState({ visible: false })}> +
5秒后自动关闭
+ +``` + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-popup | | 类名前缀 | +| className | string | | | 追加类名 | +| visible | bool | false | | 是否显示 | +| direction | string | 'bottom' | 'top', 'bottom', 'left', 'right' | 弹出方向 | +| autoClose | bool | false | | 是否自动关闭 | +| duration | number | 3000 | | 自动关闭前停留的时间（单位：毫秒） | +| maskType | string | 'normal' | 'transparent', 'light', 'normal', 'dark' | 遮罩层的类型 | +| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 | +| onClose | func | noop | | 关闭后触发的回调函数 | + + + diff --git a/docs/zh-cn/components/Progress.md b/docs/zh-cn/components/Progress.md new file mode 100644 index 000000000..26df25fea --- /dev/null +++ b/docs/zh-cn/components/Progress.md @@ -0,0 +1,54 @@ +# 进度条 Progress + +[demo页面](https://zhongantecheng.github.io/zarm/#/progress) + +### 引入 + +```js +import { Progress } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + +``` + +###### 设置主题 +```jsx + +``` + +###### 设置进度百分比 +```jsx + +``` + +###### 设置文本 +```jsx +{this.state.percent}% +``` + +#### 圆形 +```jsx + +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-progress | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| percent | number | 0 | | 进度百分比（范围：0～100） | +| shape | string | 'line' | 'line', 'circle' | 类型 | + + + + + diff --git a/docs/zh-cn/components/Radio.md b/docs/zh-cn/components/Radio.md index 2adaa0a10..ee6a996e5 100644 --- a/docs/zh-cn/components/Radio.md +++ b/docs/zh-cn/components/Radio.md @@ -96,10 +96,10 @@ import { Radio } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-radio | | 类名前缀 | -| className | string | 无 | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| type | string | 无 | 'button', 'cell' | 显示类型 | -| value | string, number | 无 | | 值 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| type | string | | 'button', 'cell' | 显示类型 | +| value | string, number | | | 值 | | defaultChecked | bool | false | | 初始是否选中 | | checked | bool | false | | 当前是否选中 | | disabled | bool | false | | 是否禁用 | @@ -110,10 +110,10 @@ import { Radio } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-radio | | 类名前缀 | -| className | string | 无 | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| type | string | 无 | 'button', 'cell' | 显示类型 | -| shape | string | 无 | 'radius', 'round' | 形状 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| type | string | | 'button', 'cell' | 显示类型 | +| shape | string | | 'radius', 'round' | 形状 | | block | bool | false | | 是否为块级元素 | | disabled | bool | false | | 是否禁用 | | compact | bool | false | | 是否启用紧凑模式 | diff --git a/docs/zh-cn/components/Spinner.md b/docs/zh-cn/components/Spinner.md new file mode 100644 index 000000000..0499bb0d9 --- /dev/null +++ b/docs/zh-cn/components/Spinner.md @@ -0,0 +1,48 @@ +# 指示器 Spinner + +[demo页面](https://zhongantecheng.github.io/zarm/#/spinner) + +### 引入 + +```js +import { Spinner } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + +``` + +###### 设置主题 +```jsx + +``` + +###### 设置动画 +```jsx + +``` + +###### 设置大小 +```jsx + +``` + + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-stepper | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| size | string | | 'lg' | 大小 | + + + + diff --git a/docs/zh-cn/components/Stepper.md b/docs/zh-cn/components/Stepper.md index dc5722ea4..28f0c17f8 100644 --- a/docs/zh-cn/components/Stepper.md +++ b/docs/zh-cn/components/Stepper.md @@ -60,14 +60,14 @@ import { Stepper } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-stepper | | 类名前缀 | -| className | string | 无 | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | -| shape | string | 无 | 'radius', 'circle' | 形状 | -| value | string | 无 | | 值 | -| defaultValue | string | 无 | | 初始值 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| shape | string | | 'radius', 'circle' | 形状 | +| value | string | | | 值 | +| defaultValue | string | | | 初始值 | | disabled | bool | false | | 是否禁用 | -| min | number | 无 | | 最小值 | -| max | number | 无 | | 最大值 | +| min | number | | | 最小值 | +| max | number | | | 最大值 | | step | number | 1 | | 步长 | | onChange | func | noop | \(value: number\) | 值变化时触发的回调函数 | diff --git a/docs/zh-cn/components/Swipe.md b/docs/zh-cn/components/Swipe.md new file mode 100644 index 000000000..bd59f79de --- /dev/null +++ b/docs/zh-cn/components/Swipe.md @@ -0,0 +1,68 @@ +# 图片轮播 Swipe + +[demo页面](https://zhongantecheng.github.io/zarm/#/swipe) + +### 引入 + +```js +import { Swipe } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + +
1
+
2
+
3
+ +``` + +###### 纵向 +```jsx + +
1
+
2
+
3
+ +``` + +###### 循环 +```jsx + +
1
+
2
+
3
+ +``` + +###### 自动循环轮播 +```jsx + +
1
+
2
+
3
+ +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-swipe | | 类名前缀 | +| className | string | | | 追加类名 | +| direction | string | 'left' | 'left', 'right', 'top', 'bottom' | 滑动方向 | +| height | number, string | | | 高度 | +| loop | bool | false | | 是否循环 | +| autoPlay | bool | false | | 是否自动轮播 | +| onChange | func | noop | \(value: number\) | 值变化时触发的回调函数 | +| onChangeEnd | func | noop | \(value: number\) | 值变化动画结束后触发的回调函数 | + + + + + diff --git a/docs/zh-cn/components/SwipeAction.md b/docs/zh-cn/components/SwipeAction.md new file mode 100644 index 000000000..d74748ef5 --- /dev/null +++ b/docs/zh-cn/components/SwipeAction.md @@ -0,0 +1,98 @@ +# 滑动操作 SwipeAction + +[demo页面](https://zhongantecheng.github.io/zarm/#/swipe-action) + +### 引入 + +```js +import { SwipeAction } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 右侧操作 +```jsx + console.log('右按钮1'), + }, + { + theme: 'success', + text: '右按钮2', + onClick: () => console.log('右按钮2'), + }, + ]}> + 左滑看看 + +``` + +###### 左侧操作 +```jsx + console.log('左按钮1'), + }, + { + theme: 'warning', + text: '左按钮2', + onClick: () => console.log('左按钮2'), + }, + ]}> + 右滑看看 + +``` + +###### 双侧操作 +```jsx + console.log('左按钮1'), + }, + { + theme: 'warning', + text: '左按钮2', + onClick: () => console.log('左按钮2'), + }, + ]} + right={[ + { + theme: 'error', + text: '右按钮1', + onClick: () => console.log('右按钮1'), + }, + { + theme: 'success', + text: '右按钮2', + onClick: () => console.log('右按钮2'), + }, + ]}> + 左右都能滑动（自动关闭） + +``` + + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-swipeaction | | 类名前缀 | +| className | string | | | 追加类名 | +| left | arrayOf(object) | [ ] | object: { theme, text, onClick } | 左侧按钮组 | +| right | arrayOf(object) | [ ] | object: { theme, text, onClick } | 右侧按钮组 | +| autoClose | bool | false | | 点击按钮是否自动关闭 | + + + + diff --git a/docs/zh-cn/components/Switch.md b/docs/zh-cn/components/Switch.md index 741d296d3..d1e5adf49 100644 --- a/docs/zh-cn/components/Switch.md +++ b/docs/zh-cn/components/Switch.md @@ -38,8 +38,8 @@ import { Switch } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-switch | | 类名前缀 | -| className | string | 无 | | 追加类名 | -| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | | checked | bool | false | | 值 | | defaultChecked | bool | false | | 初始值 | | disabled | bool | false | | 是否禁用 | diff --git a/docs/zh-cn/components/Tab.md b/docs/zh-cn/components/Tab.md new file mode 100644 index 000000000..708d0d6e4 --- /dev/null +++ b/docs/zh-cn/components/Tab.md @@ -0,0 +1,93 @@ +# 标签页 Tab + +[demo页面](https://zhongantecheng.github.io/zarm/#/tab) + +### 引入 + +```js +import { Tab } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + { console.log(index); }}> + 选项卡1内容 + 选项卡2内容 + +``` + +###### 可滑动 +```jsx + + 选项卡1内容 + 选项卡2内容 + +``` + +###### 自定义主题 +```jsx + + 选项卡1内容 + 选项卡2内容 + +``` + +###### 指定默认选项 +```jsx + + 选项卡1内容 + 选项卡2内容 + +``` + +###### 指定线条宽度 +```jsx + + 选项卡1内容 + 选项卡2内容 + +``` + +###### 禁用指定选项 +```jsx + + 选项卡1内容 + 选项卡2内容 + +``` + + + +### API + +#### Tab + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-tab | | 类名前缀 | +| className | string | | | 追加类名 | +| theme | string | 'primary' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 | +| value | string | | | 值 | +| defaultValue | string | | | 初始值 | +| disabled | bool | false | | 是否禁用 | +| canSwipe | bool | false | | 是否支持滑动切换 | +| lineWidth | number, string | | | 线条宽度 | +| onChange | func | noop | \(index: number\) | 值变化时触发的回调函数 | + + +#### Tab.Panel + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| className | string | | | 追加类名 | +| disabled | bool | false | | 是否禁用 | +| title | string | | | 标题 | +| children | number | | | 内容 | + + + + diff --git a/docs/zh-cn/components/Toast.md b/docs/zh-cn/components/Toast.md new file mode 100644 index 000000000..c0bc92136 --- /dev/null +++ b/docs/zh-cn/components/Toast.md @@ -0,0 +1,58 @@ +# 轻提示 Toast + +[demo页面](https://zhongantecheng.github.io/zarm/#/toast) + +### 引入 + +```js +import { Toast } from 'zarm'; +``` + +### 代码演示 + +#### 基本用法 + +###### 普通 +```jsx + + 默认3秒自动关闭 + +``` + +###### 指定停留时间 +```jsx + + 指定10秒自动关闭 + +``` + +###### 自定义内容 +```jsx + +
+ +
预约成功
+
+ +``` + +### API + +| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | +| :--- | :--- | :--- | :--- | :--- | +| prefixCls | string | za-toast | | 类名前缀 | +| className | string | | | 追加类名 | +| visible | bool | false | | 是否显示 | +| duration | number | 3000 | | 自动关闭前停留的时间（单位：毫秒） | +| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 | + + + + diff --git a/docs/zh-cn/components/Uploader.md b/docs/zh-cn/components/Uploader.md index af5f83be8..c59f8e9c7 100644 --- a/docs/zh-cn/components/Uploader.md +++ b/docs/zh-cn/components/Uploader.md @@ -50,10 +50,10 @@ import { Uploader } from 'zarm'; | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 | | :--- | :--- | :--- | :--- | :--- | | prefixCls | string | za-uploader | | 类名前缀 | -| className | string | 无 | | 追加类名 | -| accept | string | 无 | | 允许上传的附件格式 | +| className | string | | | 追加类名 | +| accept | string | | | 允许上传的附件格式 | | multiple | bool | false | | 是否多选 | -| capture | string | 无 | 照相机`camera`, 摄像机`camcorder`, 录音`microphone`| 唤起的原生应用 | +| capture | string | | 照相机`camera`, 摄像机`camcorder`, 录音`microphone`| 唤起的原生应用 | | disabled | bool | false | | 是否禁用 | | onBeforeSelect | func | noop | | 选择前触发的事件 | | onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 | diff --git a/examples/index.js b/examples/index.js index 6d635f11b..145068657 100644 --- a/examples/index.js +++ b/examples/index.js @@ -73,7 +73,7 @@ const rootRoute = { // 操作反馈 { - path: 'actionsheet', + path: 'action-sheet', getComponent(location, cb) { require.ensure([], (require) => { cb(null, require('./pages/ActionSheetPage')); @@ -105,7 +105,7 @@ const rootRoute = { }, }, { - path: 'swipeAction', + path: 'swipe-action', getComponent(location, cb) { require.ensure([], (require) => { cb(null, require('./pages/SwipeActionPage')); @@ -155,7 +155,7 @@ const rootRoute = { }, }, { - path: 'noticebar', + path: 'notice-bar', getComponent(location, cb) { require.ensure([], (require) => { cb(null, require('./pages/NoticeBarPage')); diff --git a/examples/pages/BadgePage.jsx b/examples/pages/BadgePage.jsx index 59f549b62..35fc41b53 100644 --- a/examples/pages/BadgePage.jsx +++ b/examples/pages/BadgePage.jsx @@ -20,7 +20,8 @@ class Page extends Component { } onClick={() => {}} /> } onClick={() => {}} /> } onClick={() => {}} /> - } onClick={() => {}} /> + } onClick={() => {}} /> + } onClick={() => {}} /> @@ -36,10 +37,10 @@ class Page extends Component {
-
+
-
+
diff --git a/examples/pages/CellPage.jsx b/examples/pages/CellPage.jsx index a73c8aa3d..9f08becec 100644 --- a/examples/pages/CellPage.jsx +++ b/examples/pages/CellPage.jsx @@ -16,7 +16,7 @@ class Page extends Component {
- 普通列表项 + 普通 @@ -25,7 +25,7 @@ class Page extends Component { - 带描述的列表项 + 带描述 @@ -35,17 +35,17 @@ class Page extends Component { - 带图标、描述的列表项 + 带图标、描述 - } /> + } /> } /> - 带跳转的列表项 + 带跳转 {}} /> @@ -55,7 +55,7 @@ class Page extends Component { - 带描述、箭头、跳转的列表项 + 带描述、箭头、跳转 {}} /> @@ -65,7 +65,7 @@ class Page extends Component { - 带图标、描述、箭头、跳转的列表项 + 带图标、描述、箭头、跳转 } onClick={() => {}} /> diff --git a/examples/pages/Index.jsx b/examples/pages/Index.jsx index 6dab179fb..188670ee9 100644 --- a/examples/pages/Index.jsx +++ b/examples/pages/Index.jsx @@ -36,11 +36,11 @@ class Page extends PureComponent { 操作反馈 - hashHistory.push('/actionsheet')} /> + hashHistory.push('/action-sheet')} /> hashHistory.push('/button')} /> hashHistory.push('/modal')} /> hashHistory.push('/popup')} /> - hashHistory.push('/swipeAction')} /> + hashHistory.push('/swipe-action')} /> hashHistory.push('/toast')} /> @@ -53,7 +53,7 @@ class Page extends PureComponent { hashHistory.push('/cell')} /> hashHistory.push('/icon')} /> hashHistory.push('/message')} /> - hashHistory.push('/noticebar')} /> + hashHistory.push('/notice-bar')} /> hashHistory.push('/progress')} /> hashHistory.push('/spinner')} /> hashHistory.push('/swipe')} /> diff --git a/examples/pages/MessagePage.jsx b/examples/pages/MessagePage.jsx index 9dbe2bcfe..cc50e997c 100644 --- a/examples/pages/MessagePage.jsx +++ b/examples/pages/MessagePage.jsx @@ -17,20 +17,19 @@ class Page extends Component { 基本 - primary - }>info - }>success - }>warning - }>error + 普通 + 自定义主题 + }>自定义图标 + 可操作 - alert('click this message!')}>链接样式的 - 可关闭的 + alert('click this message!')}>链接样式的 + 可关闭的
diff --git a/examples/pages/ModalPage.jsx b/examples/pages/ModalPage.jsx index ae7cc5e46..f1a61da40 100644 --- a/examples/pages/ModalPage.jsx +++ b/examples/pages/ModalPage.jsx @@ -118,7 +118,7 @@ class Page extends Component { - + this.close('modal3')} /> 模态框内容 @@ -146,7 +146,7 @@ class Page extends Component { @@ -24,11 +17,22 @@ class Page extends Component { 基本
- alert('click this notice!')}>带图标，带右侧箭头的链接样式 - }>自定义icon，自定义主题，显示关闭按钮。 + 普通 + 错误色 + }>自定义图标 各位zarmer请注意，本组件使用了自动滚动功能，更多用法请参见使用文档。
+ + + + 可操作 + +
+ alert('click this notice!')}>链接样式的 + 可关闭的 +
+
diff --git a/examples/pages/ProgressPage.jsx b/examples/pages/ProgressPage.jsx index 813c58d8e..32c14b214 100644 --- a/examples/pages/ProgressPage.jsx +++ b/examples/pages/ProgressPage.jsx @@ -29,7 +29,7 @@ class Page extends Component {
diff --git a/examples/pages/SpinnerPage.jsx b/examples/pages/SpinnerPage.jsx index cd82a5ddb..b15c08772 100644 --- a/examples/pages/SpinnerPage.jsx +++ b/examples/pages/SpinnerPage.jsx @@ -17,10 +17,16 @@ class Page extends Component { + }>普通 + + }>自定义主题 + + }>旋转动画 + }>大号 diff --git a/examples/pages/SwipeActionPage.jsx b/examples/pages/SwipeActionPage.jsx index 44e0bea04..b4a88199f 100644 --- a/examples/pages/SwipeActionPage.jsx +++ b/examples/pages/SwipeActionPage.jsx @@ -17,7 +17,6 @@ class Page extends Component { console.log('右按钮2'), }, ]}> - 左滑看看（自动关闭） + 左滑看看 console.log('右按钮2'), }, ]}> - 左右都能滑动 + 左右都能滑动（自动关闭） diff --git a/examples/pages/TabPage.jsx b/examples/pages/TabPage.jsx index 79e1e73c6..db3520f94 100644 --- a/examples/pages/TabPage.jsx +++ b/examples/pages/TabPage.jsx @@ -15,8 +15,6 @@ class TabPage extends Component { } render() { - const TabPanel = Tab.Panel; - return (
@@ -27,12 +25,12 @@ class TabPage extends Component { { console.log(i); }}> - +
选项卡1内容
- - + +
选项卡2内容
- + @@ -43,12 +41,12 @@ class TabPage extends Component { { console.log(i); }}> - +
试试点我左滑
- - + +
试试点我右滑
- + @@ -59,24 +57,24 @@ class TabPage extends Component { - - - + + + - - - + + + - - - + + + - - - + + + @@ -93,21 +91,21 @@ class TabPage extends Component { activeIndex: i, }); }}> - - - + + + console.log(i)}> - +
选项卡1内容
- - + +
选项卡2内容
- - + +
选项卡3内容
- + @@ -118,15 +116,15 @@ class TabPage extends Component { - +
选项卡1内容
- - + +
选项卡2内容
- - + +
选项卡3内容
- + @@ -137,15 +135,15 @@ class TabPage extends Component { - +
选项卡1内容
- - + +
选项卡2内容
- - + +
选项卡3内容
- + @@ -156,15 +154,15 @@ class TabPage extends Component { - +
选项卡1内容
- - + +
选项卡2内容
- - + +
选项卡3内容
- + diff --git a/styles/components/Modal.scss b/styles/components/Modal.scss index eb494d8bc..85ab53439 100644 --- a/styles/components/Modal.scss +++ b/styles/components/Modal.scss @@ -14,7 +14,7 @@ $prefixCls: za-modal; overflow: auto; z-index: $zIndex-modal; - &.radius { + &.shape-radius { .#{$prefixCls}-dialog { border-radius: $radius-md; } diff --git a/styles/components/Progress.scss b/styles/components/Progress.scss index 19ec26d5d..b2bbdd594 100644 --- a/styles/components/Progress.scss +++ b/styles/components/Progress.scss @@ -28,7 +28,7 @@ $prefixCls: za-progress; transition: width .3s; } - &-circle { + &.shape-circle { display: inline-block; width: r(150); height: r(150); diff --git a/styles/components/SwipeAction.scss b/styles/components/SwipeAction.scss index c67960397..5cdb6d6b4 100644 --- a/styles/components/SwipeAction.scss +++ b/styles/components/SwipeAction.scss @@ -1,4 +1,4 @@ -$prefixCls: za-swipeAction; +$prefixCls: za-swipeaction; .#{$prefixCls} { &-wrap {