TUI

<template>
  <div class="component-card-demo-wrap">
    <TsButton>基础按钮</TsButton>
    <TsButton type="default">默认按钮</TsButton>
    <TsButton type="primary">主要按钮</TsButton>
    <TsButton type="warning">警告按钮</TsButton>
    <TsButton type="danger">危险按钮</TsButton>
    <TsButton type="success">成功按钮</TsButton>
    <TsButton type="text">文本按钮</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton :disabled="true">普通禁用</TsButton>
    <TsButton :disabled="true" :border="false">无边框禁用</TsButton>
    <TsButton type="default" :disabled="true" :loading="true">默认按钮loading禁用</TsButton>
    <TsButton type="default" :disabled="true" flash>默认按钮flash禁用</TsButton>
    <TsButton type="primary" :disabled="true">主要按钮禁用</TsButton>
    <TsButton type="default" flash>默认按钮flash效果</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsButton type="default" size="small">small</TsButton>
    <TsButton type="default">medium</TsButton>
    <TsButton type="default" size="large">large</TsButton>
    <TsButton type="default" size="x-large">x-large</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsButton type="default">border 效果</TsButton>
    <TsButton type="default" shadow>shadow按钮</TsButton>
    <TsButton type="default" icon="SearchIcon">搜索</TsButton>
    <TsButton type="default" icon="SignInIcon">登录</TsButton>
    <TsButton type="default" icon="VerifyingIcon">安全环境检测</TsButton>
    <TsButton type="default" icon="LoadingIcon">上传中</TsButton>
    <TsButton type="default" icon="CheckCircleIcon">保存成功</TsButton>
    <TsButton type="default">
      <template #icon>
        <TsLoading></TsLoading>
      </template>
      <span>自定义ICON</span>
    </TsButton>
    <TsButton type="default" icon="SignInIcon" :loading="loadingicon" @click="handleLoading">点击开启loading</TsButton>
    <TsButton type="default" :loading="true">
      <template #loading>
        <TsIcon name="VerifyingIcon" class="ts-spinY"></TsIcon>
      </template>
      安全环境检测
    </TsButton>
    <TsButton type="default" icon="LoadingIcon" :loading="true">上传中</TsButton>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsLoading, TsIcon } from 'tui';
import { ref } from 'vue';

const loadingicon = ref(false);
const handleLoading = () => {
  loadingicon.value = true;
  setTimeout(() => {
    loadingicon.value = false;
  }, 2000);
};
</script>

<template>
  <div>
    <div class="component-card-demo-wrap">
      <TsButton :border="false" color="#fff" bg="#2d5bff" hoverBg="#1e40af">快速开始</TsButton>
      <TsButton bg="transparent" color="#2d5bff" borderColor="#2d5bff" hoverBg="#eff6ff">查看文档</TsButton>
      <TsButton :border="false" shadow bg="linear-gradient(135deg, #6c5ce7, #9b59b6)" hoverBg="linear-gradient(135deg, #4534c9, #9a39c2)" color="#fff" hoverColor="#fff">查看文档</TsButton>
      <TsButton :border="false" shadow="0 8px 25px rgba(108, 92, 231, 0.3)" bg="linear-gradient(135deg, #6c5ce7, #9b59b6)" hoverBg="linear-gradient(135deg, #4534c9, #9a39c2)" color="#fff">
        查看文档
      </TsButton>
    </div>
    <div class="example-tips-wrap">
      <div class="tip-title">Tips:</div>
      <div class="tip-desc">颜色属性继承自定义属性变量，可通过修改以下变量来全局调整按钮颜色样式：</div>
      <TsText class="tip-desc" mode="code">`bg` -> `hoverBg` -> `activeBg`</TsText>
      <TsText class="tip-desc" mode="code">`color` -> `hoverColor` -> `activeColor`</TsText>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsButton, TsText } from 'tui';
</script>