-
-
Notifications
You must be signed in to change notification settings - Fork 226
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
467 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
# 动作面板 ActionSheet | ||
|
||
[demo页面](https://zhongantecheng.github.io/zarm/#/actionsheet) | ||
|
||
### 引入 | ||
|
||
```js | ||
import { ActionSheet } from 'zarm'; | ||
``` | ||
|
||
### 代码演示 | ||
|
||
#### 基本用法 | ||
|
||
###### 普通 | ||
```jsx | ||
<ActionSheet | ||
visible={this.state.visible} | ||
onMaskClick={() => { | ||
this.setState({ | ||
visible: false, | ||
}); | ||
}} | ||
actions={[ | ||
{ | ||
text: '操作一', | ||
onClick: () => console.log('点击操作一'), | ||
}, | ||
{ | ||
text: '操作二', | ||
onClick: () => console.log('点击操作二'), | ||
}, | ||
]} | ||
/> | ||
``` | ||
|
||
###### 带取消操作 | ||
```jsx | ||
<ActionSheet | ||
visible={this.state.visible} | ||
onMaskClick={() => { | ||
this.setState({ | ||
visible: false, | ||
}); | ||
}} | ||
actions={[ | ||
{ | ||
text: '操作一', | ||
onClick: () => console.log('点击操作一'), | ||
}, | ||
{ | ||
text: '操作二', | ||
onClick: () => console.log('点击操作二'), | ||
}, | ||
{ | ||
theme: 'error', | ||
text: '操作三', | ||
onClick: () => console.log('点击操作三'), | ||
}, | ||
]} | ||
onCancel={() => { | ||
this.setState({ | ||
visible: false, | ||
}); | ||
}} | ||
/> | ||
``` | ||
|
||
|
||
### API | ||
|
||
| 属性 | 类型 | 默认值 | 可选值/参数 | 说明 | | ||
| :--- | :--- | :--- | :--- | :--- | | ||
| prefixCls | string | za-switch | | 类名前缀 | | ||
| className | string | null | | 追加类名 | | ||
| shape | string | null | 'radius' | 形状 | | ||
| visible | bool | false | | 是否显示 | | ||
| actions | arrayOf(object) | [ ] | object: { theme, text, onClick } | 动作列表 | | ||
| onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 | | ||
| onCancel | func | null | void | 显示取消菜单,点击时触发的回调函数 | | ||
| cancelText | string | '取消' | | 取消菜单的文案 | | ||
|
||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
# 按钮 Button | ||
|
||
[demo页面](https://zhongantecheng.github.io/zarm/#/button) | ||
|
||
### 引入 | ||
|
||
```js | ||
import { Button } from 'zarm'; | ||
``` | ||
|
||
### 代码演示 | ||
|
||
#### 基本用法 | ||
|
||
###### 普通 | ||
```jsx | ||
<Button>普通按钮</Button> | ||
``` | ||
|
||
###### 幽灵按钮 | ||
```jsx | ||
<Button bordered>幽灵按钮</Button> | ||
``` | ||
|
||
###### 块级按钮 | ||
```jsx | ||
<Button block>幽灵按钮</Button> | ||
``` | ||
|
||
###### 禁用状态 | ||
```jsx | ||
<Button disabled>禁用按钮</Button> | ||
``` | ||
|
||
#### 多主题 | ||
```jsx | ||
<Button>default</Button> | ||
<Button theme="primary">primary</Button> | ||
<Button theme="info">info</Button> | ||
<Button theme="success">success</Button> | ||
<Button theme="warning">warning</Button> | ||
<Button theme="error">error</Button> | ||
``` | ||
|
||
#### 按钮大小 | ||
```jsx | ||
<Button size="xl">超大号</Button> | ||
<Button size="lg">大号</Button> | ||
<Button>默认</Button> | ||
<Button size="sm">小号</Button> | ||
<Button size="xs">超小号</Button> | ||
``` | ||
|
||
#### 多形状 | ||
```jsx | ||
<Button shape="radius">圆角按钮</Button> | ||
<Button shape="round">椭圆角按钮</Button> | ||
<Button shape="circle">圆形按钮</Button> | ||
``` | ||
|
||
#### 带icon的按钮 | ||
```jsx | ||
<Button icon={<Icon type="right-round" theme="success" />}>正确</Button> | ||
<Button icon={<Icon type="wrong-round" theme="error" />}>错误</Button> | ||
<Button loading>加载中</Button> | ||
``` | ||
|
||
|
||
### API | ||
|
||
| 属性 | 类型 | 默认值 | 可选值/参数 | 说明 | | ||
| :--- | :--- | :--- | :--- | :--- | | ||
| 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' | 形状 | | ||
| block | bool | false | | 是否为块级元素 | | ||
| bordered | bool | false | | 是否是幽灵按钮 | | ||
| disabled | bool | false | | 是否禁用 | | ||
| loading | bool | false | | 是否显示加载中 | | ||
| icon | React.element | null | | icon | | ||
| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 | | ||
|
||
|
||
|
||
|
Oops, something went wrong.