按钮

安装

按钮组件包含在 @cypress-design/react-button 软件包。 你也想安装 @cypress-design/constants-button 以获取 TypeScript 的适当类型.

npm install @cypress-design/vue-button @cypress-design/constants-button

或者用纱线

yarn add @cypress-design/vue-button @cypress-design/constants-button

使用量

import Button from '@cypress-design/vue-button'

<script lang="ts" setup>
import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
</script>

<template>
  <Button>
    <IconActionQuestionMarkCircle class="mr-2" fill-color="indigo-400" />
    Button
  </Button>
</template>

平方按钮

<script lang="ts" setup>
import { IconActionQuestionMarkCircle } from '@cypress-design/vue-icon'
</script>

<template>
  <div class="flex gap-4 items-center">
    <Button v-for="size of [20, 24, 32, 40, 48]" :size="`${size}`" square>
      <IconActionQuestionMarkCircle
        fill-color="indigo-400"
        :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
      />
    </Button>
  </div>
</template>

可能的变体

变体及其可用的大小加样式 disabled 设置为 true (代为).

<script lang="ts" setup>
import {
  default as Button,
  VariantClassesTable,
  SizeClassesTable,
} from '@cypress-design/vue-button'

const darkVariants = [
  'outline-dark',
  'outline-red-dark-mode',
  'outline-jade-dark-mode',
  'outline-indigo-dark-mode',
  'outline-purple-dark-mode',
  'red-dark-mode',
  'purple-dark-mode',
  'indigo-dark-mode',
  'disabled-dark-mode',
]
</script>

<template>
  <div class="flex flex-wrap justify-stretch gap-[8px]">
    <div
      v-for="(_, variant) in VariantClassesTable"
      class="p-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
      :class="{
        'bg-gray-1000 text-white': darkVariants.includes(variant),
        'bg-white text-gray-900': !darkVariants.includes(variant),
      }"
    >
      {{ variant }}
      <div
        class="flex gap-[8px] items-center"
        v-for="(_, size) in SizeClassesTable"
      >
        {{ size }}
        <Button :variant="variant" :size="size"> Button </Button>
      </div>
      <div class="flex gap-[8px] items-center">
        🚫
        <Button :variant="variant" :size="48" disabled="true"> Button </Button>
      </div>
    </div>
  </div>
</template>