SideSheet

import { createSignal } from 'solid-js';
import { SideSheet, Button } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(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 { createSignal } from 'solid-js';
import { SideSheet, RadioGroup, Radio, Button, type SideSheetProps, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(false);
    const change = () => {
        setVisible(!visible());
    };
    const [placement, setPlacement] = createSignal<SideSheetProps['placement']>('right');
    const changePlacement = (e: RadioChangeEvent) => {
        setPlacement(e.target.value as SideSheetProps['placement']);
    };
    return (
        <>
            <RadioGroup aria-label="侧边栏位置" 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 { createSignal } from 'solid-js';
import { SideSheet, RadioGroup, Radio, Button, type SideSheetProps, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(false);
    const change = () => {
        setVisible(!visible());
    };
    const [size, setSize] = createSignal<SideSheetProps['size']>('small');
    const changeSize = (e: RadioChangeEvent) => {
        setSize(e.target.value as SideSheetProps['size']);
    };
    return (
        <>
            <RadioGroup aria-label="侧边栏尺寸" 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 { createSignal } from 'solid-js';
import { SideSheet, TextArea, Button } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(false);
    const [value, setValue] = createSignal('');
    return (
        <>
            <Button onClick={() => setVisible(true)}>Open SideSheet</Button>
            <TextArea placeholder="Please enter something" onChange={(value) => setValue(value)} style={{ 'margin-top': '12px' }} />
            <SideSheet title="可操作外部的侧边栏" visible={visible()} onCancel={() => setVisible(false)} mask={false} disableScroll={false}>
                <p>这里是输入的内容：</p>
                <p>{value()}</p>
            </SideSheet>
        </>
    );
}

import { createSignal } from 'solid-js';
import { SideSheet, Button } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(false);
    const getContainer = () => {
        return document.querySelector('.sidesheet-container') as HTMLElement;
    };
    return (
        <div
            style={{
                height: '320px',
                overflow: 'hidden',
                position: 'relative',
                border: '1px solid var(--semi-color-border)',
                'border-radius': '2px',
                padding: '24px',
                'text-align': 'center',
                background: 'var(--semi-color-fill-0)',
            }}
            class="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 { createSignal } from 'solid-js';
import { Banner, Button, Form, FormDatePicker, FormRadio, FormRadioGroup, FormSelect, SideSheet, Typography } from '@fibrous/semi-ui-solid';

export default function SideSheetDemo() {
    const [visible, setVisible] = createSignal(false);
    const createTime = new Date();

    const show = () => {
        setVisible(true);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    return (
        <>
            <Button onClick={show}>More Information</Button>
            <SideSheet
                title="创建资源包"
                headerStyle={{ 'border-bottom': '1px solid var(--semi-color-border)' }}
                bodyStyle={{ 'border-bottom': '1px solid var(--semi-color-border)' }}
                visible={visible()}
                footer={
                    <div style={{ display: 'flex', 'justify-content': 'flex-end' }}>
                        <Button style={{ 'margin-right': '8px' }}>重置</Button>
                        <Button theme="solid">提交</Button>
                    </div>
                }
                closable={false}
                onCancel={handleCancel}
            >
                <Form>
                    <FormDatePicker field="date" type="dateTime" initValue={createTime} style={{ width: '272px' }} label={{ text: '创建时间', required: true }} />
                    <FormRadioGroup field="type" label="目标操作系统" direction="horizontal" initValue="all">
                        <FormRadio value="all">全平台</FormRadio>
                        <FormRadio value="ios">iOS</FormRadio>
                        <FormRadio value="android">Android</FormRadio>
                        <FormRadio value="web">Web</FormRadio>
                    </FormRadioGroup>
                    <FormRadioGroup field="origin" label="资源包来源" direction="horizontal" initValue="scm">
                        <FormRadio value="scm">从SCM上传</FormRadio>
                        <FormRadio value="manual">手动上传</FormRadio>
                    </FormRadioGroup>
                    <Banner
                        fullMode={false}
                        icon={null}
                        type="warning"
                        bordered
                        description={
                            <>
                                <Typography.Text strong>当前部署环境：线上部署</Typography.Text>
                                <br />
                                <Typography.Text>请选择正确的SCM构建产物，防止出现不符合预期的发布操作。</Typography.Text>
                            </>
                        }
                    />
                    <br />
                    <FormSelect field="users" label={{ text: '创建用户', required: true }} style={{ width: '560px' }} multiple initValue={['1', '2', '3', '4']}>
                        <FormSelect.Option value="1">曲晨一</FormSelect.Option>
                        <FormSelect.Option value="2">夏可曼</FormSelect.Option>
                        <FormSelect.Option value="3">曲晨三</FormSelect.Option>
                        <FormSelect.Option value="4">蔡妍</FormSelect.Option>
                    </FormSelect>
                </Form>
            </SideSheet>
        </>
    );
}