diff --git a/docs/markdown/action-sheet.md b/docs/markdown/action-sheet.md new file mode 100644 index 000000000..dc04da961 --- /dev/null +++ b/docs/markdown/action-sheet.md @@ -0,0 +1,41 @@ +# ActionSheet 上拉菜单 + +--- + +## 使用指南 + +在 Taro 文件中引入组件 + +:::demo + +```js +import { AtActionSheet } from "taro-ui" +``` + +::: + +## 一般用法 + +:::demo + +```html + + 按钮一 + 按钮二 + + 清除位置信息并退出 + + +``` + +::: + +## AtActionSheet 参数 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ---------- | -------------- | ------- | ------ | ------ | +| title | 元素的标题 | String | - | - | +| isOpened | 是否展示元素 | Boolean | - | - | +| cancleText | 取消按钮的内容 | String | - | - | diff --git a/docs/markdown/activity-indicator.md b/docs/markdown/activity-indicator.md new file mode 100644 index 000000000..f826ef3b1 --- /dev/null +++ b/docs/markdown/activity-indicator.md @@ -0,0 +1,34 @@ +# ActivityIndicator 活动指示器 + +--- + +## 使用指南 + +在 Taro 文件中引入组件 + +:::demo + +```js +import { AtActivityIndicator } from "taro-ui" +``` + +::: + +## 一般用法 + +:::demo + +```html + +``` + +::: + +## AtActivityIndicator 参数 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------- | ---------------- | ------ | ----------------- | ------ | +| mode | 元素的类型 | String | `center`,`normal` | - | +| size | loading 图的大小 | Number | - | - | +| color | loading 图的样色 | String | - | - | +| content | 元素的内容文本 | String | - | - | diff --git a/docs/markdown/modal.md b/docs/markdown/modal.md new file mode 100644 index 000000000..99166fec0 --- /dev/null +++ b/docs/markdown/modal.md @@ -0,0 +1,40 @@ +# Modal 模态框 + +--- + +## 使用指南 + +在 Taro 文件中引入组件 + +:::demo + +```js +import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui" +``` + +::: + +## 一般用法 + +:::demo + +```html + + 标题 + + + 这里是正文内容，欢迎加入京东凹凸实验室 + 这里是正文内容，欢迎加入京东凹凸实验室 + 这里是正文内容，欢迎加入京东凹凸实验室 + + + + + + + +``` + +::: diff --git a/docs/markdown/progress.md b/docs/markdown/progress.md new file mode 100644 index 000000000..f5e78547c --- /dev/null +++ b/docs/markdown/progress.md @@ -0,0 +1,35 @@ +# Progress 进度条 + +--- + +## 使用指南 + +在 Taro 文件中引入组件 + +:::demo + +```js +import { AtProgress } from "taro-ui" +``` + +::: + +## 一般用法 + +:::demo + +```html + +``` + +::: + +## AtProgress 参数 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------------- | ------------ | ------- | -------------------------- | ------- | +| color | 元素的颜色 | String | - | - | +| status | 元素的状态 | String | `active`,`fail`,`finished` | - | +| percent | 元素的进度 | Number | - | - | +| strokeWidth | 元素的规格 | Number | - | - | +| isHidePercent | 是否隐藏文字 | Boolean | - | `false` | diff --git a/docs/markdown/toast.md b/docs/markdown/toast.md new file mode 100644 index 000000000..4122f49af --- /dev/null +++ b/docs/markdown/toast.md @@ -0,0 +1,36 @@ +# Toast 轻提示 + +--- + +## 使用指南 + +在 Taro 文件中引入组件 + +:::demo + +```js +import { AtToast } from "taro-ui" +``` + +::: + +## 一般用法 + +:::demo + +```html + +``` + +::: + +## AtToast 参数 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------------ | ------------- | ------- | ------ | ------- | +| text | 元素的内容 | String | - | - | +| iconType | icon 的种类 | String | - | - | +| iconSize | icon 的大小 | Number | - | - | +| iconColor | icon 的颜色 | Number | - | - | +| isOpened | 是否展现组件 | Boolean | - | - | +| isHiddenIcon | 是否隐藏 icon | Boolean | - | `false` | diff --git a/docs/nav.config.yml b/docs/nav.config.yml index ab08f2af7..da48104e4 100644 --- a/docs/nav.config.yml +++ b/docs/nav.config.yml @@ -37,6 +37,18 @@ components: name: Grid - title: FloatLayout 浮动布局 name: FloatLayout + - title: 操作反馈 + items: + - title: Toast 轻提示 + name: Toast + - title: Modal 模态框 + name: Modal + - title: Progress 进度条 + name: Progress + - title: ActionSheet 上拉菜单 + name: ActionSheet + - title: ActivityIndicator 活动指示器 + name: ActivityIndicator # - title: 布局 # name: Layout # - title: 标签 diff --git a/docs/view/ActionSheet/index.jsx b/docs/view/ActionSheet/index.jsx new file mode 100644 index 000000000..ce72db23b --- /dev/null +++ b/docs/view/ActionSheet/index.jsx @@ -0,0 +1,10 @@ +import * as Nerv from 'nervjs' +import ActionSheetDoc from '@md/action-sheet.md' + +class ActionSheetView extends Nerv.Component { + render () { + return + } +} + +export default ActionSheetView diff --git a/docs/view/ActionSheet/index.scss b/docs/view/ActionSheet/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/docs/view/ActivityIndicator/index.jsx b/docs/view/ActivityIndicator/index.jsx new file mode 100644 index 000000000..932c8085d --- /dev/null +++ b/docs/view/ActivityIndicator/index.jsx @@ -0,0 +1,10 @@ +import * as Nerv from 'nervjs' +import ActivityIndicatorDoc from '@md/activity-indicator.md' + +class ActivityIndicatorView extends Nerv.Component { + render () { + return + } +} + +export default ActivityIndicatorView diff --git a/docs/view/ActivityIndicator/index.scss b/docs/view/ActivityIndicator/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/docs/view/Modal/index.jsx b/docs/view/Modal/index.jsx new file mode 100644 index 000000000..d8e923544 --- /dev/null +++ b/docs/view/Modal/index.jsx @@ -0,0 +1,10 @@ +import * as Nerv from 'nervjs' +import ModalDoc from '@md/modal.md' + +class ModalView extends Nerv.Component { + render () { + return + } +} + +export default ModalView diff --git a/docs/view/Modal/index.scss b/docs/view/Modal/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/docs/view/Progress/index.jsx b/docs/view/Progress/index.jsx new file mode 100644 index 000000000..8c7477a34 --- /dev/null +++ b/docs/view/Progress/index.jsx @@ -0,0 +1,10 @@ +import * as Nerv from 'nervjs' +import ProgressDoc from '@md/progress.md' + +class ProgressView extends Nerv.Component { + render () { + return + } +} + +export default ProgressView diff --git a/docs/view/Progress/index.scss b/docs/view/Progress/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/docs/view/Toast/index.jsx b/docs/view/Toast/index.jsx new file mode 100644 index 000000000..ef655c0c4 --- /dev/null +++ b/docs/view/Toast/index.jsx @@ -0,0 +1,10 @@ +import * as Nerv from 'nervjs' +import ToastDoc from '@md/toast.md' + +class ToastView extends Nerv.Component { + render () { + return + } +} + +export default ToastView diff --git a/docs/view/Toast/index.scss b/docs/view/Toast/index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/progress/index.js b/src/components/progress/index.js index 9559116b6..5c6fffda1 100644 --- a/src/components/progress/index.js +++ b/src/components/progress/index.js @@ -1,12 +1,14 @@ import Taro from '@tarojs/taro' import { View } from '@tarojs/components' +import PropTypes from 'prop-types' + import './index.scss' export default class AtProgress extends Taro.Component { render () { let { percent } = this.props - const { strokeWidth, color, status, hidePercent } = this.props + const { strokeWidth, color, status, isHidePercent } = this.props if (percent < 0) { percent = 0 @@ -36,10 +38,18 @@ export default class AtProgress extends Taro.Component { /> - {!hidePercent && ( + {!isHidePercent && ( {percent}% )} ) } } + +AtProgress.propTypes = { + color: PropTypes.string, + status: PropTypes.string, + percent: PropTypes.number, + strokeWidth: PropTypes.number, + isHidePercent: PropTypes.bool, +} diff --git a/src/components/toast/index.js b/src/components/toast/index.js index ebf746764..b1885bacf 100644 --- a/src/components/toast/index.js +++ b/src/components/toast/index.js @@ -1,9 +1,11 @@ import Taro from '@tarojs/taro' import { View, Icon } from '@tarojs/components' +import PropTypes from 'prop-types' + import './index.scss' -export default class Toast extends Taro.Component { +export default class AtToast extends Taro.Component { constructor (props) { super(...arguments) @@ -69,7 +71,7 @@ export default class Toast extends Taro.Component { render () { const { isOpened } = this.state - const { text, hiddenIcon, iconSize, iconType, iconColor } = this.props + const { text, isHiddenIcon, iconSize, iconType, iconColor } = this.props const iconClass = [ 'at-toast-content__icon', @@ -79,7 +81,7 @@ export default class Toast extends Taro.Component { return isOpened ? ( - {!hiddenIcon && ( + {!isHiddenIcon && ( @@ -91,6 +93,15 @@ export default class Toast extends Taro.Component { } } -Toast.defaultProps = { +AtToast.defaultProps = { duration: 3000 } + +AtToast.propTypes = { + text: PropTypes.string, + isOpened: PropTypes.bool, + iconType: PropTypes.string, + iconSize: PropTypes.string, + iconColor: PropTypes.string, + isHiddenIcon: PropTypes.bool +} diff --git a/src/pages/action/progress/index.js b/src/pages/action/progress/index.js index 80f4360b8..78a0bd69f 100644 --- a/src/pages/action/progress/index.js +++ b/src/pages/action/progress/index.js @@ -75,7 +75,7 @@ export default class ProgressPage extends Taro.Component { - + diff --git a/src/pages/action/toast/index.js b/src/pages/action/toast/index.js index d60f96152..12d1cb037 100644 --- a/src/pages/action/toast/index.js +++ b/src/pages/action/toast/index.js @@ -12,7 +12,7 @@ const INIT_STATE = { iconSize: 100, iconColor: 'white', iconType: 'cancel', - hiddenIcon: false + isHiddenIcon: false } export default class ToastPage extends Component { @@ -40,7 +40,7 @@ export default class ToastPage extends Component { iconSize, iconType, text, - hiddenIcon + isHiddenIcon } = this.state return ( @@ -112,7 +112,7 @@ export default class ToastPage extends Component { iconSize={iconSize} iconType={iconType} iconColor={iconColor} - hiddenIcon={hiddenIcon} + isHiddenIcon={isHiddenIcon} /> )