0.0.26 • Published 4 months ago
@ray-js/components-ty-actionsheet v0.0.26
English | 简体中文
@ray-js/components-ty-actionsheet
Tuya Style ActionSheet, the client has an API to provide actionsheet. If there is no special customization requirements, it is recommended to give priority to showActionSheet
Installation
$ npm install @ray-js/components-ty-actionsheet
# or
$ yarn add @ray-js/components-ty-actionsheet
Usage
Hooks
import ActionSheet from '@ray-js/components-ty-actionsheet';
import TimerPicker from '@ray-js/components-ty-time-picker';
const [time, setTime] = React.useState({
hour: new Date().getHours(),
minute: new Date().getMinutes(),
});
const handleTimeChange = (value: any) => {
setTime(value);
};
const { modal, setVisible } = ActionSheet.useActionSheet({
header: '请选择时间',
content: () => <TimerPicker value={time} onChange={handleTimeChange} />,
});
<>
<Button onClick={() => setVisible(true)}>选择时间</Button>
{modal}
</>;
Control State
const [visible, setVisible] = React.useState(false);
<ActionSheet
// overlayCloseable={false}
show={visible}
header="Title"
onCancel={() => setVisible(false)}
>
<SilderDemo />
</ActionSheet>;
Functional
const Popup = ActionSheet.createPopup();
<Button onClick={() =>
Popup.open({
header: 'Functional Popup',
content: (
<View style={{ padding: 16 }}>
content
</View>
),
})
}>Open Popup</Button>
<Popup.Container />
0.0.25
4 months ago
0.0.26
4 months ago
0.0.24
10 months ago
0.0.21
1 year ago
0.0.23-beta-1
1 year ago
0.0.22-beta-1
1 year ago
0.0.20
1 year ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.18
1 year ago
0.0.19
1 year ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10-beta-b491ade8
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago