Banner

<script setup lang="ts">
    import { ref } from 'vue';
    import { Banner, Button, Layout } from '@fibrous/semi-ui-vue';

    const visible = ref(false);
    const toggle = () => {
        visible.value = !visible.value;
    };

    const commonStyle = {
        height: '64px',
        lineHeight: '64px',
        background: 'var(--semi-color-fill-0)',
    };
</script>

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

<script setup lang="ts">
    import { Banner } from '@fibrous/semi-ui-vue';
</script>

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

<script setup lang="ts">
    import { Banner, Typography } from '@fibrous/semi-ui-vue';

    const types = ['info', 'warning', 'danger', 'success'] as const;
</script>

<template>
    <div class="components-banner-demo" style="width: 640px">
        <template v-for="(type, index) in types" :key="type">
            <br v-if="index > 0" />
            <Banner bordered :fullMode="false" :type="type">
                <template #icon />
                <template #closeIcon />
                <template #title>
                    <div style="font-weight: 600; font-size: 14px; line-height: 20px">不知道 AppKey？</div>
                </template>
                <template #description>
                    <div>
                        你可先联系对应的研发同学，确认是否已在
                        <Typography.Text :link="{ href: 'https://semi.design/' }">应用云平台</Typography.Text>
                        申请了应用，并填写对应的信息。
                    </div>
                </template>
            </Banner>
        </template>
    </div>
</template>

<script setup lang="ts">
    import { Banner } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="width: 500px; padding: 20px; border: 1px solid var(--semi-color-border)">
        <Banner bordered :fullMode="false" title="Title" type="warning">
            <template #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 </template>
            <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>
</template>