zarm
Version:
基于 React 的移动端UI库
265 lines (238 loc) • 8.63 kB
Markdown
# ActionSheet 动作面板
## 基本用法
```jsx
import { useState, useRef } from 'react';
import { ActionSheet, List, Button } from 'zarm';
const BUTTONS = [
{
text: 'Action 1',
onClick: () => console.log('Clicked action 1'),
},
{
theme: 'default',
text: 'Action 2',
onClick: () => console.log('Clicked action 2'),
},
{
theme: 'danger',
text: 'Action 3',
onClick: () => console.log('Clicked action 3'),
},
{
disabled: true,
text: 'Disabled Action',
onClick: () => console.log('Clicked disabled action'),
},
];
const Demo = () => {
const containerRef = useRef();
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false);
return (
<>
<List>
<List.Item
title="普通"
suffix={
<Button size="xs" onClick={() => setVisible1(true)}>
开启
</Button>
}
/>
<List.Item
title="带取消操作"
suffix={
<Button size="xs" onClick={() => setVisible2(true)}>
开启
</Button>
}
/>
<List.Item
title="圆角、留边"
suffix={
<Button size="xs" onClick={() => setVisible3(true)}>
开启
</Button>
}
/>
<List.Item
title="指定挂载节点"
suffix={
<Button size="xs" onClick={() => setVisible4(true)}>
开启
</Button>
}
/>
</List>
<div ref={containerRef} />
<ActionSheet
visible={visible1}
actions={BUTTONS}
onMaskClick={() => setVisible1(!visible1)}
/>
<ActionSheet
visible={visible2}
actions={BUTTONS}
onMaskClick={() => setVisible2(!visible2)}
onCancel={() => setVisible2(!visible2)}
/>
<ActionSheet
spacing
visible={visible3}
actions={BUTTONS}
onMaskClick={() => setVisible3(!visible3)}
onCancel={() => setVisible3(!visible3)}
/>
<ActionSheet
visible={visible4}
actions={BUTTONS}
onMaskClick={() => setVisible4(!visible4)}
mountContainer={containerRef.current}
/>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 异步操作
```jsx
import { useState, useRef } from 'react';
import { ActionSheet, List, Button } from 'zarm';
const BUTTONS = [
{
text: 'Action 1',
},
{
text: 'Action 2',
},
{
theme: 'danger',
text: 'Action 3',
},
{
disabled: true,
text: 'Disabled Action',
},
];
const Demo = () => {
const [visible, setVisible] = useState(false);
return (
<>
<List>
<List.Item
title="普通"
suffix={
<Button size="xs" onClick={() => setVisible(true)}>
开启
</Button>
}
/>
</List>
<ActionSheet
visible={visible}
onMaskClick={() => setVisible(false)}
actions={BUTTONS}
onAction={async (action, index) => {
// 模拟异步操作
await new Promise((resolve) => setTimeout(resolve, 3000));
console.log(action);
setVisible(false);
}}
/>
</>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## 指令式
```jsx
import { ActionSheet, List, Button } from 'zarm';
const BUTTONS = [
{
text: 'Action 1',
onClick: () => console.log('Clicked action 1'),
},
{
theme: 'default',
text: 'Action 2',
onClick: () => console.log('Clicked action 2'),
},
{
theme: 'danger',
text: 'Action 3',
onClick: () => console.log('Clicked action 3'),
},
{
disabled: true,
text: 'Disabled Action',
onClick: () => console.log('Clicked disabled action'),
},
];
const Demo = () => {
return (
<List>
<List.Item
title="普通"
suffix={
<Button
size="xs"
onClick={() => {
const { close } = ActionSheet.show({
spacing: true,
actions: BUTTONS,
onMaskClick: () => {
close();
},
onCancel: () => {
close();
},
});
}}
>
开启
</Button>
}
/>
</List>
);
};
ReactDOM.render(<Demo />, mountNode);
```
## API
| 属性 | 类型 | 默认值 | 说明 |
| :------------- | :----------------------------------------------------------------------- | :------------------ | :--------------------------------- |
| visible | boolean | false | 是否显示 |
| spacing | boolean | false | 是否和外部有间距 |
| destroy | boolean | true | 弹层关闭后是否移除节点 |
| actions | Action[] | [] | 面板选项列表 |
| onMaskClick | () => void | - | 点击遮罩层时触发的回调函数 |
| onCancel | () => void | - | 显示取消菜单，点击时触发的回调函数 |
| onAction | (action: ActionSheetItemProps, index: number) => void \| Promise\<void\> | - | 点击面板选项后触发的函数 |
| cancelText | string | '取消' | 取消菜单的文案 |
| safeArea | boolean | false | 是否适配安全区域 |
| afterClose | () => void | - | ActionSheet 隐藏后的回调函数 |
| mountContainer | MountContainer | () => document.body | 指定 ActionSheet 挂载的 HTML 节点 |
### ActionSheetItemProps
| 属性 | 类型 | 默认值 | 说明 |
| :-------- | :--------- | :-------- | :---------------------------------------------- |
| text | ReactNode | - | 按钮文字 |
| theme | string | 'default' | 按钮主题，可选值 `default`、`primary`、`danger` |
| disabled | boolean | false | 按钮是否禁用 |
| className | string | - | 追加类名 |
| onClick | () => void | - | 按钮点击后触发的回调函数 |
## CSS 变量
| 属性 | 默认值 | 说明 |
| :----------------------------- | :---------------------------- | :----------------- |
| --background | '#fff' | 背景色 |
| --border-radius | '14px' | 圆角大小 |
| --spacing-margin | '8px' | 边距 |
| --item-height | '56px' | 选项高度 |
| --item-font-size | '20px' | 选项字体大小 |
| --item-font-weight | 500 | 选项字体粗细 |
| --item-text-color | 'var(--za-theme-primary)' | 选项字体色 |
| --item-active-background | 'var(--za-background-active)' | 选项选中背景 |
| --item-opacity-disabled | 'var(--za-opacity-disabled)' | 选项禁用不透明度 |
| --cancel-text-color | 'var(--za-theme-primary)' | 取消选项字体大小 |
| --cancel-margin-top | '8px' | 取消选项上边距大小 |