Button

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

<template>
    <div class="btn-margin-right">
        <Button>主要按钮</Button>
        <Button type="secondary">次要按钮</Button>
        <Button type="tertiary">第三按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="danger">危险按钮</Button>
    </div>
</template>

<script setup lang="ts">
    const types = [
        ['primary', '主要'],
        ['secondary', '次要'],
        ['tertiary', '第三'],
        ['warning', '警告'],
        ['danger', '危险'],
    ];
</script>

<template>
    <article>
        <strong v-for="[type, label] in types" :key="type" :style="{ color: `var(--semi-color-${type})`, marginRight: '10px' }">
            {{ label }}
        </strong>
    </article>
</template>

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

<template>
    <Button :style="{ marginRight: '8px' }" theme="light" type="primary">浅色主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="secondary">浅色次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="tertiary">浅色第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="warning">浅色警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="danger">浅色危险</Button>
</template>

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

<template>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="primary">深色主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="secondary">深色次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="tertiary">深色第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="warning">深色警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="danger">深色危险</Button>
</template>

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

<template>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="primary">主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="secondary">次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="tertiary">第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="warning">警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="danger">危险</Button>
</template>

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

<template>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="primary">主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="secondary">次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="tertiary">第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="warning">警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="danger">危险</Button>
</template>

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

<template>
    <div>
        <Button size="large" :style="{ marginRight: '8px' }">大尺寸</Button>
        <Button size="default" :style="{ marginRight: '8px' }">默认尺寸</Button>
        <Button size="small">小尺寸</Button>
    </div>
</template>

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

<template>
    <div>
        <Button block>块级按钮</Button>
    </div>
</template>

<script setup lang="ts">
    import { IconCamera, IconChevronDown, IconSidebar } from '@fibrous/semi-icons-vue';
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <strong>默认状态：</strong>
        <Button aria-label="截屏">
            <template #icon>
                <IconCamera />
            </template>
        </Button>
        <br />
        <br />
        <strong>禁用状态：</strong>
        <Button aria-label="截屏" disabled>
            <template #icon>
                <IconCamera />
            </template>
        </Button>
        <br />
        <br />
        <strong>复合类型：</strong>
        <span class="btn-margin-right">
            <Button aria-label="截屏" type="primary">
                <template #icon>
                    <IconCamera />
                </template>
            </Button>
            <Button aria-label="截屏" type="secondary">
                <template #icon>
                    <IconCamera />
                </template>
            </Button>
            <Button aria-label="截屏" type="warning">
                <template #icon>
                    <IconCamera />
                </template>
            </Button>
            <Button aria-label="截屏" type="danger">
                <template #icon>
                    <IconCamera />
                </template>
            </Button>
        </span>
        <br />
        <br />
        <strong>更改主题：</strong>
        <Button aria-label="截屏" :style="{ marginRight: '10px' }" theme="solid">
            <template #icon>
                <IconCamera />
            </template>
        </Button>
        <Button aria-label="截屏" theme="light">
            <template #icon>
                <IconCamera />
            </template>
        </Button>
        <br />
        <br />
        <strong>更改图标位置：</strong>
        <Button :style="{ marginRight: '10px' }" theme="solid">
            <template #icon>
                <IconSidebar />
            </template>
            收起
        </Button>
        <Button iconPosition="right" theme="solid">
            <template #icon>
                <IconChevronDown />
            </template>
            展开选项
        </Button>
        <br />
        <br />
    </div>
</template>

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

    const { Text } = Typography;
</script>

<template>
    <div>
        <Text :link="{ href: 'https://semi.design/' }">链接文本</Text>
        <br />
        <br />
        <Text :link="{ href: 'https://semi.design/' }">打开网站</Text>
        <br />
        <br />
        <Text link underline>
            带下划线的网页链接
            <template #icon>
                <IconLink />
            </template>
        </Text>
    </div>
</template>

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

<template>
    <div>
        <Button disabled>禁用</Button>
        <Button disabled theme="borderless">无背景禁用</Button>
        <Button disabled theme="light">浅色禁用</Button>
        <Button disabled theme="borderless" type="primary">无背景主要禁用</Button>
        <Button disabled theme="solid" type="warning">深色警告禁用</Button>
    </div>
</template>

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

    const saveLoading = ref(false);
    const delLoading = ref(true);
    const repLoading = ref(true);

    const reset = (status: boolean) => {
        saveLoading.value = status;
        delLoading.value = status;
        repLoading.value = status;
    };
</script>

<template>
    <div>
        <div>
            <div class="btn-margin-right" :style="{ display: 'inline-flex', alignItems: 'center', paddingBottom: '14px' }">
                <Button @click="reset(false)">关闭加载态</Button>
                <Button @click="reset(true)">开启加载态</Button>
            </div>
        </div>
        <hr />
        <Button :loading="saveLoading" :style="{ marginRight: '14px' }" @click="saveLoading = true">保存</Button>
        <Button :loading="delLoading" :style="{ marginRight: '14px' }" type="danger" @click="delLoading = true">
            <template #icon>
                <IconDelete />
            </template>
            删除
        </Button>
        <div :style="{ width: '200px', display: 'inline-block' }">
            <Button block :loading="repLoading" theme="solid" type="warning" @click="repLoading = true">撤销</Button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@fibrous/semi-icons-vue';
    import { Button } from '@fibrous/semi-ui-vue';

    const contents = ['Colorful', undefined];
    const rows = [
        { theme: 'solid', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel3 },
        { theme: 'light', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
        { theme: 'outline', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel2 },
        { theme: 'borderless', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
    ] as const;
</script>

<!-- The text goes in an explicit #default: after a sibling #icon template, a bare {{ content }} gets a leading space,
     which would count as text and break the icon-only layout. -->
<template>
    <div v-for="content in contents" :key="content ?? 'icon-only'" :style="{ display: 'flex', rowGap: '16px', marginTop: '20px', marginLeft: '10px', flexDirection: 'column' }">
        <div v-for="row in rows" :key="row.theme" :style="{ display: 'flex', columnGap: '16px' }">
            <Button :aria-label="content ? undefined : 'AI'" colorful :theme="row.theme" type="primary">
                <template #icon>
                    <component :is="row.primaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful loading :theme="row.theme" type="primary">
                {{ content }}
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful disabled :theme="row.theme" type="primary">
                <template #icon>
                    <component :is="row.primaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful :theme="row.theme" type="tertiary">
                <template #icon>
                    <component :is="row.tertiaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful loading :theme="row.theme" type="tertiary">
                {{ content }}
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful disabled :theme="row.theme" type="tertiary">
                <template #icon>
                    <component :is="row.tertiaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
        </div>
    </div>
</template>

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

    const sizes = ['large', 'default', 'small'] as const;
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div v-for="size in sizes" :key="size" :style="{ marginRight: '10px' }">
            <ButtonGroup aria-label="操作按钮组" :size="size">
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

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

<template>
    <div :style="{ display: 'flex' }">
        <div :style="{ marginRight: '10px' }">
            <ButtonGroup disabled>
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

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

    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'] as const;
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div v-for="type in types" :key="type" :style="{ marginRight: '10px' }">
            <ButtonGroup aria-label="操作按钮组" :type="type">
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive } from 'vue';
    import { IconTreeTriangleDown } from '@fibrous/semi-icons-vue';
    import { Button, Dropdown, SplitButtonGroup, type DropDownMenuItem } from '@fibrous/semi-ui-vue';

    const menu: DropDownMenuItem[] = [
        { node: 'item', name: '编辑项目', onClick: () => console.log('编辑项目点击') },
        { node: 'item', name: '重置项目' },
        { node: 'divider' },
        { node: 'item', name: '复制项目' },
        { node: 'item', name: '从项目创建模版' },
        { node: 'divider' },
        { node: 'item', name: '删除项目', type: 'danger' },
    ];

    const btnVisible = reactive<Record<number, boolean>>({ 1: false, 2: false, 3: false });
</script>

<template>
    <div>
        <SplitButtonGroup aria-label="项目操作按钮组" :style="{ marginRight: '10px' }">
            <Button theme="solid" type="primary">分裂按钮</Button>
            <Dropdown :menu="menu" position="bottomRight" trigger="click" @visibleChange="(v) => (btnVisible[1] = v)">
                <Button aria-label="更多操作" :style="btnVisible[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }" theme="solid" type="primary">
                    <template #icon>
                        <IconTreeTriangleDown />
                    </template>
                </Button>
            </Dropdown>
        </SplitButtonGroup>
        <SplitButtonGroup aria-label="项目操作按钮组" :style="{ marginRight: '10px' }">
            <Button theme="light" type="primary">分裂按钮</Button>
            <Dropdown :menu="menu" position="bottomRight" trigger="click" @visibleChange="(v) => (btnVisible[2] = v)">
                <Button aria-label="更多操作" :style="btnVisible[2] ? { background: 'var(--semi-color-fill-1)', padding: '8px 4px' } : { padding: '8px 4px' }" theme="light" type="primary">
                    <template #icon>
                        <IconTreeTriangleDown />
                    </template>
                </Button>
            </Dropdown>
        </SplitButtonGroup>
        <SplitButtonGroup aria-label="项目操作按钮组">
            <Button :style="btnVisible[3] ? { background: 'var(--semi-color-fill-0)' } : {}" theme="borderless" type="primary"> 分裂按钮 </Button>
            <Dropdown :menu="menu" position="bottomRight" trigger="click" @visibleChange="(v) => (btnVisible[3] = v)">
                <Button aria-label="更多操作" :style="btnVisible[3] ? { background: 'var(--semi-color-fill-1)', padding: '8px 4px' } : { padding: '8px 4px' }" theme="borderless" type="primary">
                    <template #icon>
                        <IconTreeTriangleDown />
                    </template>
                </Button>
            </Dropdown>
        </SplitButtonGroup>
    </div>
</template>