View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnButton 组件的一些功能和用法。

类型 (type) ​

查看代码
vue
<template>
    <ShadcnButton type="primary">Primary</ShadcnButton>
    <ShadcnButton type="success">Success</ShadcnButton>
    <ShadcnButton type="warning">Warning</ShadcnButton>
    <ShadcnButton type="danger">Danger</ShadcnButton>
    <ShadcnButton type="info">Info</ShadcnButton>
    <ShadcnButton type="text">Text</ShadcnButton>
    <ShadcnButton type="default">Default</ShadcnButton>
</template>

<script setup lang="ts">
</script>

尺寸 (size) ​

查看代码
vue
<template>
    <ShadcnButton size="small">Small</ShadcnButton>
    <ShadcnButton size="default">Default</ShadcnButton>
    <ShadcnButton size="large">Large</ShadcnButton>
</template>

<script setup lang="ts">
</script>

图标 (icon) ​

查看代码
vue
<template>
    <ShadcnButton>
        <template #icon>
            <ShadcnIcon icon="Save"/>
        </template>
        Icon
    </ShadcnButton>
    <ShadcnButton type="success">   
        <template #icon>            
            <ShadcnIcon icon="Save"/>        
        </template>
        Icon + Type
    </ShadcnButton>
    <ShadcnButton type="success" size="small">
        <template #icon>
            <ShadcnIcon icon="Save"/>
        </template>
        Icon + Type + Size
    </ShadcnButton>
</template>

<script setup lang="ts">
</script>

圆角 (round) ​

查看代码
vue
<template>
    <ShadcnButton round>Round</ShadcnButton>
    <ShadcnButton type="danger" round>Round + Type</ShadcnButton>
    <ShadcnButton type="success" size="small" round>Round + Type + Size</ShadcnButton>
</template>

<script setup lang="ts">
</script>

禁用 (disabled) ​

查看代码
vue
<template>
    <ShadcnButton disabled>Disabled</ShadcnButton>
    <ShadcnButton type="danger" disabled>Disabled + Type</ShadcnButton>
    <ShadcnButton type="success" size="small" disabled>Disabled + Type + Size</ShadcnButton>
</template>

<script setup lang="ts">
</script>

圆形 (circle) ​

查看代码
vue
<template>
    <ShadcnButton circle size="large"></ShadcnButton>
    <ShadcnButton type="danger" circle></ShadcnButton>
    <ShadcnButton type="success" size="small" circle></ShadcnButton>
</template>

<script setup lang="ts">
</script>

加载 (loading) ​

查看代码
vue
<template>
    <ShadcnButton loading>Loading</ShadcnButton>
    <ShadcnButton type="success" loading>Loading + Type</ShadcnButton>
    <ShadcnButton type="success" size="small" loading>Loading + Type + Size</ShadcnButton>
</template>

<script setup lang="ts">
</script>

颜色 (color) ​

查看代码
vue
<template>
    <ShadcnButton color="red">Red</ShadcnButton>
    <ShadcnButton type="danger" color="red">Red + Type</ShadcnButton>
    <ShadcnButton type="success" size="small" color="red">Red + Type + Size</ShadcnButton>
</template>

<script setup lang="ts">
</script>

幽灵 (ghost) ​

查看代码
vue
<template>
    <ShadcnButton type="primary" ghost>Primary</ShadcnButton>
    <ShadcnButton type="success" ghost>Success</ShadcnButton>
    <ShadcnButton type="warning" ghost>Warning</ShadcnButton>
    <ShadcnButton type="danger" ghost>Danger</ShadcnButton>
    <ShadcnButton type="info" ghost>Info</ShadcnButton>
    <ShadcnButton type="text" ghost>Text</ShadcnButton>
    <ShadcnButton type="default" ghost>Default</ShadcnButton>
</template>

<script setup lang="ts">
</script>

按钮组 (group) ​

查看代码
vue
<template>
    <ShadcnButtonGroup>
      <ShadcnButton>Left</ShadcnButton>
      <ShadcnButton>Middle</ShadcnButton>
      <ShadcnButton>Right</ShadcnButton>
    </ShadcnButtonGroup>
</template>

<script setup lang="ts">
</script>

按钮组方向 (direction) ​

查看代码
vue
<template>
    <ShadcnButtonGroup direction="vertical">
        <ShadcnButton type="primary">T</ShadcnButton>
        <ShadcnButton type="primary">C</ShadcnButton>
        <ShadcnButton type="primary">B</ShadcnButton>
    </ShadcnButtonGroup>
</template>

<script setup lang="ts">
</script>

液态玻璃效果 (Glass) ​

查看代码
vue
<template>
    <ShadcnButton glass type="primary">Primary</ShadcnButton>
    <ShadcnButton glass type="success">Success</ShadcnButton>
    <ShadcnButton glass type="warning">Warning</ShadcnButton>
    <ShadcnButton glass type="danger">Danger</ShadcnButton>
</template>

<script setup lang="ts">
</script>

按钮 (Button) 属性 ​

按钮组 (Button Group) 属性 ​

按钮 (Button) 事件 ​

按钮 (Button) 插槽 ​