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="Sidesheet" 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="Sidesheet" 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="SideSheet" 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, Button, TextArea } 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="SideSheet" visible={visible} onCancel={() => setVisible(false)} mask={false} disableScroll={false}> <p>Here is what you entered: </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="SideSheet" 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, { useState } from 'react'; import { SideSheet, Button, Typography, Banner, Form } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const show = () => { setVisible(true); }; const handleCancel = (e) => { setVisible(false); }; const { DatePicker, Select, Radio, RadioGroup, } = Form; const footer = ( <div style={{ display: 'flex', justifyContent: 'flex-end' }}> <Button style={{ marginRight: 8 }}>Reset</Button> <Button theme="solid">Submit</Button> </div> ); return ( <> <Button onClick={show}>More Information</Button> <SideSheet title={<Typography.Title heading={4}>Create New Package</Typography.Title>} headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }} visible={visible} footer={footer} onCancel={handleCancel} > <Form> <DatePicker field="date" type="dateTime" initValue={new Date()} style={{ width: 272 }} label={{ text: 'Created Time', required: true }} /> <RadioGroup field="type" label="Target Operating System" direction="horizontal" initValue={'all'} > <Radio value="all">All</Radio> <Radio value="ios">iOS</Radio> <Radio value="android">Android</Radio> <Radio value="web">Web</Radio> </RadioGroup> <RadioGroup field="origin" label="Package Origin" direction="horizontal" initValue={'scm'}> <Radio value="scm">Uploaded From SCM</Radio> <Radio value="manual">Uploaded Manually</Radio> </RadioGroup> <Banner fullMode={false} icon={null} closeIcon={null} bordered description={ <Typography.Text> Software Config Management (SCM) is a platform for publish and manage code versions. You can compile and manage code versions in this platform. </Typography.Text> } /> <br /> <Select field="users" label={{ text: 'Created User', required: true }} style={{ width: 560 }} multiple initValue={['1', '2', '3', '4']} > <Select.Option value="1">Tianyi Lee</Select.Option> <Select.Option value="2">Chen Qu</Select.Option> <Select.Option value="3">Yan Cai</Select.Option> <Select.Option value="4">Wenzhuo Cui</Select.Option> </Select> </Form> </SideSheet> </> ); };