Button 按钮

示例

当前状态

当前为占位实现，组件固定渲染文本 Default。

颜色

Default

vue

<script setup lang="ts">
import { Button } from '@fluxuijs/core'
import type { ButtonProps } from '@fluxuijs/core'

const colors: NonNullable<ButtonProps['color']>[] = ['primary', 'secondary', 'success', 'warning', 'danger']
</script>

<template>
  <div class="button-row">
    <Button v-for="color in colors" :key="`button-color-${color}`" :color="color" />
  </div>
</template>

<style scoped>
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>

变体

Default

vue

<script setup lang="ts">
import { Button } from '@fluxuijs/core'
import type { ButtonProps } from '@fluxuijs/core'

const variants: NonNullable<ButtonProps['variant']>[] = [
  'solid',
  'bordered',
  'flat',
  'faded',
  'light',
  'ghost',
  'shadow',
]
</script>

<template>
  <div class="button-row">
    <Button v-for="variant in variants" :key="`button-variant-${variant}`" :variant="variant" />
  </div>
</template>

<style scoped>
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
</style>

API

Props

名称	类型	默认值	说明
`color`	`ButtonProps['color']`	`'primary'`	颜色语义
`variant`	`ButtonProps['variant']`	`'solid'`	展示变体

类型定义

ButtonColor='primary' | 'secondary' | 'success' | 'danger' | 'warning'

Slots

名称	说明
无	当前版本未定义 slots

Events

名称	说明
无	当前版本未定义组件事件

Button 按钮 ​

示例 ​

颜色 ​

变体 ​

API ​

Props ​

类型定义 ​

Slots ​

Events ​

Button 按钮

示例

颜色

变体

API

Props

类型定义

Slots

Events