|
1 | | -# ActionSheet 动作面板 |
2 | | - |
3 | | -## 介绍 |
4 | | - |
5 | | -从底部弹出的动作菜单面板。 |
6 | | - |
7 | | -## 安装 |
8 | | - |
9 | | -```tsx |
10 | | -import { ActionSheet } from '@nutui/nutui-react-taro'; |
11 | | -``` |
12 | | - |
13 | | -## 代码演示 |
14 | | - |
15 | | -### 基础用法 |
16 | | - |
17 | | -:::demo |
18 | | - |
19 | | -<CodeBlock src='taro/demo1.tsx'></CodeBlock> |
20 | | - |
21 | | -::: |
22 | | - |
23 | | -### 展示取消按钮 |
24 | | - |
25 | | -:::demo |
26 | | - |
27 | | -<CodeBlock src='taro/demo2.tsx'></CodeBlock> |
28 | | - |
29 | | -::: |
30 | | - |
31 | | -### 展示描述信息 |
32 | | - |
33 | | -:::demo |
34 | | - |
35 | | -<CodeBlock src='taro/demo3.tsx'></CodeBlock> |
36 | | - |
37 | | -::: |
38 | | - |
39 | | -### 选项状态 |
40 | | - |
41 | | -:::demo |
42 | | - |
43 | | -<CodeBlock src='taro/demo4.tsx'></CodeBlock> |
44 | | - |
45 | | -::: |
46 | | - |
47 | | -### 自定义内容 |
48 | | - |
49 | | -:::demo |
50 | | - |
51 | | -<CodeBlock src='taro/demo5.tsx'></CodeBlock> |
52 | | - |
53 | | -::: |
54 | | - |
55 | | -### 自定义key |
56 | | - |
57 | | -:::demo |
58 | | - |
59 | | -<CodeBlock src='taro/demo6.tsx'></CodeBlock> |
60 | | - |
61 | | -::: |
62 | | - |
63 | | -## ActionSheet |
64 | | - |
65 | | -### Props |
66 | | - |
67 | | -| 属性 | 说明 | 类型 | 默认值 | |
68 | | -| --- | --- | --- | --- | |
69 | | -| visible | 遮罩层可见 | `boolean` | `false` | |
70 | | -| title | 设置列表面板标题 | `string` | `-` | |
71 | | -| description | 设置列表面板副标题/描述 | `string` | `-` | |
72 | | -| options | 列表项 | `Array` | `[]` | |
73 | | -| optionKey | 列表项的自定义设置 | `{ [key: string]: string }` | `-` | |
74 | | -| cancelText | 取消文案 | `string` | `取消` | |
75 | | -| onSelect | 选择之后触发 | `(item: any, index: number) => void` | `-` | |
76 | | -| onCancel | 点击取消文案时触发 | `() => void` | `-` | |
77 | | - |
78 | | -### options |
79 | | - |
80 | | -| 属性 | 说明 | 类型 | 默认值 | |
81 | | -| --- | --- | --- | --- | |
82 | | -| name | 列表项的标题key值 | `string` | `-` | |
83 | | -| description | 列表项的描述key值 | `string` | `-` | |
84 | | -| danger | 高亮颜色 | `string` | `$color-primary` | |
85 | | -| disabled | 禁用状态 | `string` | `$disabled-color` | |
86 | | - |
87 | | -## 主题定制 |
88 | | - |
89 | | -### 样式变量 |
90 | | - |
91 | | -组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 |
92 | | - |
93 | | -| 名称 | 说明 | 默认值 | |
94 | | -| --- | --- | --- | |
95 | | -| \--nutui-actionsheet-background-color | 背景色 | `$color-background-overlay` | |
96 | | -| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `0` | |
97 | | -| \--nutui-actionsheet-border-color | 标题和取消位置的border色值 | `#F7F8FC` | |
98 | | -| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `center` | |
99 | | -| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `none` | |
100 | | -| \--nutui-actionsheet-item-line-height | 列表项行高 | `24px` | |
101 | | -| \--nutui-actionsheet-item-color | 列表项字色 | `$color-title` | |
102 | | -| \--nutui-actionsheet-item-danger | 列表项danger字色 | `$color-primary` | |
| 1 | +# ActionSheet 动作面板 |
| 2 | + |
| 3 | +从底部弹出的动作菜单面板。 |
| 4 | + |
| 5 | +## 引入 |
| 6 | + |
| 7 | +```tsx |
| 8 | +import { ActionSheet } from '@nutui/nutui-react-taro'; |
| 9 | +``` |
| 10 | + |
| 11 | +## 示例代码 |
| 12 | + |
| 13 | +### 基础用法 |
| 14 | + |
| 15 | +:::demo |
| 16 | + |
| 17 | +<CodeBlock src='taro/demo1.tsx'></CodeBlock> |
| 18 | + |
| 19 | +::: |
| 20 | + |
| 21 | +### 展示取消按钮 |
| 22 | + |
| 23 | +:::demo |
| 24 | + |
| 25 | +<CodeBlock src='taro/demo2.tsx'></CodeBlock> |
| 26 | + |
| 27 | +::: |
| 28 | + |
| 29 | +### 展示描述信息 |
| 30 | + |
| 31 | +:::demo |
| 32 | + |
| 33 | +<CodeBlock src='taro/demo3.tsx'></CodeBlock> |
| 34 | + |
| 35 | +::: |
| 36 | + |
| 37 | +### 选项状态 |
| 38 | + |
| 39 | +:::demo |
| 40 | + |
| 41 | +<CodeBlock src='taro/demo4.tsx'></CodeBlock> |
| 42 | + |
| 43 | +::: |
| 44 | + |
| 45 | +### 自定义内容 |
| 46 | + |
| 47 | +:::demo |
| 48 | + |
| 49 | +<CodeBlock src='taro/demo5.tsx'></CodeBlock> |
| 50 | + |
| 51 | +::: |
| 52 | + |
| 53 | +### 自定义key |
| 54 | + |
| 55 | +:::demo |
| 56 | + |
| 57 | +<CodeBlock src='taro/demo6.tsx'></CodeBlock> |
| 58 | + |
| 59 | +::: |
| 60 | + |
| 61 | +## ActionSheet |
| 62 | + |
| 63 | +### Props |
| 64 | + |
| 65 | +| 属性 | 说明 | 类型 | 默认值 | |
| 66 | +| --- | --- | --- | --- | |
| 67 | +| visible | 遮罩层可见 | `boolean` | `false` | |
| 68 | +| title | 设置列表面板标题 | `string` | `-` | |
| 69 | +| description | 设置列表面板副标题/描述 | `string` | `-` | |
| 70 | +| options | 列表项 | `Array` | `[]` | |
| 71 | +| optionKey | 列表项的自定义设置 | `{ [key: string]: string }` | `-` | |
| 72 | +| cancelText | 取消文案 | `string` | `取消` | |
| 73 | +| onSelect | 选择之后触发 | `(item: any, index: number) => void` | `-` | |
| 74 | +| onCancel | 点击取消文案时触发 | `() => void` | `-` | |
| 75 | + |
| 76 | +### options |
| 77 | + |
| 78 | +| 属性 | 说明 | 类型 | 默认值 | |
| 79 | +| --- | --- | --- | --- | |
| 80 | +| name | 列表项的标题key值 | `string` | `-` | |
| 81 | +| description | 列表项的描述key值 | `string` | `-` | |
| 82 | +| danger | 高亮颜色 | `string` | `$color-primary` | |
| 83 | +| disabled | 禁用状态 | `string` | `$disabled-color` | |
| 84 | + |
| 85 | +## 主题定制 |
| 86 | + |
| 87 | +### 样式变量 |
| 88 | + |
| 89 | +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。 |
| 90 | + |
| 91 | +| 名称 | 说明 | 默认值 | |
| 92 | +| --- | --- | --- | |
| 93 | +| \--nutui-actionsheet-background-color | 背景色 | `$color-background-overlay` | |
| 94 | +| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `0` | |
| 95 | +| \--nutui-actionsheet-border-color | 标题和取消位置的border色值 | `#f6f6f6` | |
| 96 | +| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `center` | |
| 97 | +| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `none` | |
| 98 | +| \--nutui-actionsheet-item-line-height | 列表项行高 | `24px` | |
| 99 | +| \--nutui-actionsheet-item-color | 列表项字色 | `$color-title` | |
| 100 | +| \--nutui-actionsheet-item-danger | 列表项danger字色 | `$color-primary` | |
0 commit comments