Banner

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

const commonStyle = {
    height: '64px',
    'line-height': '64px',
    background: 'var(--semi-color-fill-0)',
};

export default function BannerDemo() {
    const [visible, setVisible] = createSignal(false);
    const changeVisible = () => {
        setVisible(!visible());
    };

    return (
        <>
            <Layout class="components-layout-demo banner-basic">
                <Layout.Header style={commonStyle}>Header</Layout.Header>
                <Show when={visible()}>
                    <Banner onClose={changeVisible} description="Semi D2C 现已支持 Figma DevMode, 安装插件，随时查阅图层对应的前端代码" />
                </Show>
                <Layout.Content style={{ height: '300px', 'line-height': '300px' }}>Content</Layout.Content>
                <Layout.Footer style={commonStyle}>Footer</Layout.Footer>
            </Layout>
            <Button
                onClick={changeVisible}
                style={{
                    display: 'block',
                    width: '120px',
                    margin: '0 auto',
                }}
            >
                {visible() ? 'Hide Banner' : 'Show Banner'}
            </Button>
        </>
    );
}

import { Banner } from '@fibrous/semi-ui-solid';

export default function BannerDemo() {
    return (
        <>
            <Banner type="info" description="Semi D2C 现已支持 Figma DevMode, 安装插件，随时查阅图层对应的前端代码" />
            <br />
            <Banner type="warning" description="当前使用 Figma UI Kit 为旧版，可能无法支持完整的 Design to code 能力" />
            <br />
            <Banner type="danger" description="当前使用 API 已过期，请尽快升级" />
            <br />
            <Banner type="success" description="Semi DSM, Make Semi Design to Any Design" />
        </>
    );
}

import { For, Show } from 'solid-js';
import { Banner, Typography } from '@fibrous/semi-ui-solid';

const { Text } = Typography;

const types = ['info', 'warning', 'danger', 'success'] as const;

const titleStyle = {
    'font-weight': '600',
    'font-size': '14px',
    'line-height': '20px',
};

export default function BannerDemo() {
    return (
        <div style={{ width: '640px' }} class="components-banner-demo">
            <For each={types}>
                {(type, index) => (
                    <>
                        <Show when={index() > 0}>
                            <br />
                        </Show>
                        <Banner
                            fullMode={false}
                            type={type}
                            bordered
                            icon={null}
                            closeIcon={null}
                            title={<div style={titleStyle}>不知道 AppKey？</div>}
                            description={
                                <div>
                                    你可先联系对应的研发同学，确认是否已在 <Text link={{ href: 'https://semi.design/' }}>应用云平台</Text> 申请了应用，并填写对应的信息。
                                </div>
                            }
                        />
                    </>
                )}
            </For>
        </div>
    );
}

import { Banner } from '@fibrous/semi-ui-solid';

export default function BannerDemo() {
    return (
        <div style={{ width: '500px', padding: '20px', border: '1px solid var(--semi-color-border)' }}>
            <Banner fullMode={false} title="Title" type="warning" bordered description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat">
                <div class="semi-modal-footer">
                    <button class="semi-button semi-button-tertiary semi-button-light" type="button">
                        No, thanks.
                    </button>
                    <button class="semi-button semi-button-warning" type="button">
                        Sounds great!
                    </button>
                </div>
            </Banner>
            <br />
        </div>
    );
}