import React, { useState } from 'react'; import { SideSheet, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const change = () => { setVisible(!visible); }; return ( <> <Button onClick={change}>Open SideSheet</Button> <SideSheet title="滑动侧边栏" visible={visible} onCancel={change}> <p>This is the content of a basic sidesheet.</p> <p>Here is more content...</p> </SideSheet> </> ); };

import React, { useState } from 'react'; import { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const change = () => { setVisible(!visible); }; const [placement, setPlacement] = useState('right'); const changePlacement = e => { setPlacement(e.target.value); }; return ( <> <RadioGroup onChange={changePlacement} value={placement}> <Radio value={'right'}>right</Radio> <Radio value={'left'}>left</Radio> <Radio value={'top'}>top</Radio> <Radio value={'bottom'}>bottom</Radio> </RadioGroup> <br /> <br /> <Button onClick={change}>Open SideSheet</Button> <SideSheet title="滑动侧边栏" visible={visible} onCancel={change} placement={placement}> <p>This is the content of a basic sidesheet.</p> <p>Here is more content...</p> </SideSheet> </> ); };

import React, { useState } from 'react'; import { SideSheet, RadioGroup, Radio, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const change = () => { setVisible(!visible); }; const [size, setSize] = useState('small'); const changeSize = e => { setSize(e.target.value); }; return ( <> <RadioGroup onChange={changeSize} value={size}> <Radio value={'small'}>small</Radio> <Radio value={'medium'}>medium</Radio> <Radio value={'large'}>large</Radio> </RadioGroup> <br /> <br /> <Button onClick={change}>Open SideSheet</Button> <SideSheet title="滑动侧边栏" visible={visible} onCancel={change} size={size}> <p>This is the content of a basic sidesheet.</p> <p>Here is more content...</p> </SideSheet> </> ); };

import React, { useState } from 'react'; import { SideSheet, TextArea, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const [value, setValue] = useState(''); return ( <> <Button onClick={() => setVisible(true)}>Open SideSheet</Button> <TextArea placeholder="Please enter something" onChange={value => setValue(value)} style={{ marginTop: 12 }}/> <SideSheet title="可操作外部的侧边栏" visible={visible} onCancel={() => setVisible(false)} mask={false} disableScroll={false} > <p>这里是输入的内容：</p> <p>{value}</p> </SideSheet> </> ); };

import React, { useState } from 'react'; import { SideSheet, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const [value, setValue] = useState(''); const getContainer = () => { return document.querySelector('.sidesheet-container'); }; return ( <div style={{ height: 320, overflow: 'hidden', position: 'relative', border: '1px solid var(--semi-color-border)', borderRadius: 2, padding: 24, textAlign: 'center', background: 'var(--semi-color-fill-0)', }} className="sidesheet-container" > <span>Render in this</span> <br /> <br /> <Button onClick={() => setVisible(true)}>Open SideSheet</Button> <SideSheet title="渲染在指定容器内部" visible={visible} onCancel={() => setVisible(false)} width={220} getPopupContainer={getContainer} > <p>This is the content of a basic sidesheet.</p> <p>Here is more content...</p> </SideSheet> </div> ); };

import React from 'react'; import { SideSheet, Form, Button, Typography, Banner } from '@douyinfe/semi-ui'; class Demo extends React.Component { constructor() { super(); this.state = { visible: false }; } show() { this.setState({ visible: true, }); } handleCancel(e) { this.setState({ visible: false, }); } render() { const { DatePicker, Select, Radio, RadioGroup, } = Form; const footer = ( <div style={{ display: 'flex', justifyContent: 'flex-end' }}> <Button style={{ marginRight: 8 }}>重置</Button> <Button theme="solid">提交</Button> </div> ); return ( <> <Button onClick={() => this.show()}>More Information</Button> <SideSheet title={<Typography.Title heading={4}>创建资源包</Typography.Title>} headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} visible={this.state.visible} footer={footer} closeIcon={null} onCancel={() => this.handleCancel()} > <Form> <DatePicker field="date" type="dateTime" initValue={new Date()} style={{ width: 272 }} label={{ text: '创建时间', required: true }} /> <RadioGroup field="type" label="目标操作系统" direction="horizontal" initValue={'all'}> <Radio value="all">全平台</Radio> <Radio value="ios">iOS</Radio> <Radio value="android">Android</Radio> <Radio value="web">Web</Radio> </RadioGroup> <RadioGroup field="origin" label="资源包来源" direction="horizontal" initValue={'scm'}> <Radio value="scm">从SCM上传</Radio> <Radio value="manual">手动上传</Radio> </RadioGroup> <Banner fullMode={false} icon={null} type="warning" bordered description={ <> <Typography.Text strong>当前部署环境：线上部署</Typography.Text> <br /> <Typography.Text> 请选择正确的SCM构建产物，防止出现不符合预期的发布操作。 </Typography.Text> </> } /> <br /> <Select field="users" label={{ text: '创建用户', required: true }} style={{ width: 560 }} multiple initValue={['1', '2', '3', '4']} > <Select.Option value="1">曲晨一</Select.Option> <Select.Option value="2">夏可曼</Select.Option> <Select.Option value="3">曲晨三</Select.Option> <Select.Option value="4">蔡妍</Select.Option> </Select> </Form> </SideSheet> </> ); } }