复制<template>
  <TxButton>默认按钮</TxButton>
  <TxButton variant="primary">Primary</TxButton>
  <TxButton variant="secondary">Secondary</TxButton>
  <TxButton variant="ghost">Ghost</TxButton>
  <TxButton variant="danger">Danger</TxButton>
  <TxButton variant="success">Success</TxButton>
  <TxButton variant="warning">Warning</TxButton>
  <TxButton variant="info">Info</TxButton>
</template>

 复制<template>
  <TxButton disabled>默认按钮</TxButton>
  <TxButton variant="primary" disabled>Primary</TxButton>
  <TxButton variant="secondary" disabled>Secondary</TxButton>
  <TxButton variant="ghost" disabled>Ghost</TxButton>
  <TxButton variant="danger" disabled>Danger</TxButton>
</template>

 复制<script setup>
import { ref } from 'vue'

const loading = ref(false)

async function handleClick() {
  if (loading.value) return
  loading.value = true
  setTimeout(() => { loading.value = false }, 1200)
}
</script>

<template>
  <TxButton variant="primary" :loading="loading" @click="handleClick">
    {{ loading ? '加载中' : '点击加载' }}
  </TxButton>
  <TxButton variant="secondary" :loading="loading" @click="handleClick">
    {{ loading ? '加载中' : '点击加载' }}
  </TxButton>
  <TxButton circle icon="i-carbon-edit" :loading="loading" @click="handleClick" />
</template>

 复制<template>
  <TxButton size="lg">Large</TxButton>
  <TxButton size="md">Medium</TxButton>
  <TxButton size="sm">Small</TxButton>
</template>

 复制<template>
  <TxButton block variant="primary">Block Button</TxButton>
</template>

 复制<template>
  <TxButton dashed>Dashed</TxButton>
  <TxButton plain variant="primary">Plain</TxButton>
  <TxButton round variant="primary">Round</TxButton>
  <TxButton circle icon="i-carbon-edit" />
</template>

 复制<template>
  <TxButton variant="primary" vibrate-type="light">轻微震动</TxButton>
  <TxButton variant="primary" vibrate-type="medium">中等震动</TxButton>
  <TxButton variant="primary" vibrate-type="heavy">重度震动</TxButton>
  <TxButton variant="danger" vibrate-type="error">错误震动</TxButton>
  <TxButton variant="secondary" :vibrate="false">无震动</TxButton>
</template>

 复制<template>
  <TxSplitButton
    variant="primary"
    size="sm"
    icon="i-ri-play-fill"
    :loading="splitLoading"
    @click="handleRun"
  >
    RUN
    <template #menu="{ close }">
      <div style="display: flex; flex-direction: column; gap: 6px;">
        <TxButton size="sm" plain block icon="i-ri-settings-3-line" @click="close()">
          Settings
        </TxButton>
        <TxButton size="sm" plain block icon="i-ri-folder-open-line" @click="close()">
          Open Folder
        </TxButton>
      </div>
    </template>
  </TxSplitButton>
</template>

 复制<template>
  <TxButton icon="i-ri-add-line">创建项目</TxButton>
  <TxButton variant="ghost">次要操作</TxButton>
</template>