Button 按钮

行为/动作触发的控件

<template>
  <SkButton>
    按钮
  </SkButton>
</template>

用法

Label 标签

Prop	类型	默认值	描述
`label`	`string`	-	设置按钮的标签文本，可被默认插槽default 代替

<template>
  <div class="flex gap-3">
    <SkButton label="属性文本" />
    <SkButton>
      插槽文本
    </SkButton>
  </div>
</template>

Color 颜色

Prop	类型	默认值	描述
`color`	`{Color}`	`brand`	设置按钮的颜色主题

Color	描述
`neutral`	中性态颜色
`brand`	品牌态颜色
`success`	成功态颜色
`warning`	警告态颜色
`danger`	危险态颜色

<template>
  <div class="flex flex-col gap-3">
    <SkButton label="中性按钮" color="neutral" />
    <SkButton label="品牌按钮" color="brand" />
    <SkButton label="成功按钮" color="success" />
    <SkButton label="警告按钮" color="warning" />
    <SkButton label="危险按钮" color="danger" />
  </div>
</template>

Variant 变体

Prop	类型	默认值	描述
`variant`	`{Variant}`	`solid`	设置按钮的显示风格

Variant	描述
`solid`	实心
`bound`	边框
`text`	文字

<template>
  <div class="p-4 flex flex-wrap gap-3">
    <SkButton label="实心按钮" variant="solid" />
    <SkButton label="边框按钮" variant="bound" />
    <SkButton label="文字按钮" variant="text" />
  </div>
</template>

Size 尺寸

Prop	类型	默认值	描述
`size`	`{Size}`	`medium`	设置按钮的尺寸大小

Size	描述
`small`	小型
`medium`	中型
`large`	大型

<template>
  <div class="flex flex-wrap gap-3">
    <SkButton label="小型按钮" size="small" />
    <SkButton label="中型按钮" size="medium" />
    <SkButton label="大型按钮" size="large" />
  </div>
</template>

Radius 圆角

Prop	类型	默认值	描述
`radius`	`{Radius}`	`medium`	设置按钮的圆角样式

Radius	描述
`tiny`	微圆
`small`	小圆
`medium`	中圆
`large`	大圆
`huge`	圆角

<template>
  <div class="flex flex-wrap justify-center gap-3">
    <SkButton label="微圆按钮" radius="tiny" />
    <SkButton label="小圆按钮" radius="small" />
    <SkButton label="中圆按钮" radius="medium" />
    <SkButton label="大圆按钮" radius="large" />
    <SkButton label="圆角按钮" radius="huge" />
  </div>
</template>

Disabled 禁用

Prop	类型	默认值	描述
`disabled`	`boolean`	`false`	设置按钮是否为禁用状态

<template>
  <div class="flex flex-wrap gap-3">
    <SkButton label="正常按钮" />
    <SkButton label="禁用按钮" disabled />
  </div>
</template>

Full 占满

Prop	类型	默认值	描述
`full`	`boolean`	`false`	设置按钮是否占满容器宽度

<template>
  <div class="w-full p-4">
    <SkButton label="全宽按钮" full />
  </div>
</template>

例子

配合图标

通过直接编写到内容区实现左右两侧图标，这样可以提供更多自由度，避免过渡封装至难以更改

图标的设置可以配合 SkIcon 组件进行使用，前往获取该组件更多信息

<template>
  <div class="p-4 flex flex-wrap gap-2">
    <SkButton>
      <SkIcon name="i-lucide:cup-soda" size="16px" />
    </SkButton>
    <SkButton>
      <SkIcon name="i-lucide:search" size="16px" />
      搜索
    </SkButton>
    <SkButton>
      添加
      <SkIcon name="i-lucide:book-marked" size="16px" />
    </SkButton>
    <SkButton>
      <SkIcon name="i-lucide:search" size="16px" />
      左右
      <SkIcon name="i-lucide:airplay" size="16px" />
    </SkButton>
  </div>
</template>

加载状态

当前考虑了组件的灵活度和纯粹性问题，关于是否需要内置 loading 相关的逻辑，后续通过提案进行讨论

加载状态配合了 SkSpinner 减少使用成本，前往获取该组件更多信息

<template>
  <div class="p-4 flex flex-wrap gap-3">
    <SkButton disabled>
      <SkSpinner color="current" size="small" />
      加载中...
    </SkButton>
    <SkButton disabled>
      <SkIcon name="i-lucide:loader" size="32rpx" clax="animate-spin" />
      自定义加载图标
    </SkButton>
  </div>
</template>

定制样式

可以通过 clax 实现定制化样式，抛砖引玉，以下以渐变色按钮作为示例

<template>
  <SkButton
    label="渐变色按钮"
    radius="huge"
    clax="bg-gradient-to-tr from-blue-500 to-sky-500 text-white shadow-lg"
  />
</template>

接口

Props

属性名	类型	默认值	描述
`color`	`{Color}`	`'primary'`	详见 Color 颜色
`variant`	`{Variant}`	`'solid'`	详见 Variant 变体
`size`	`{Size}`	`'medium'`	详见 Size 尺寸
`radius`	`{Radius}`	`'medium'`	详见 Radius 圆角
`disabled`	`boolean`	`false`	详见 Disabled 禁用
`full`	`boolean`	`false`	详见 Full 占满
`clax`	`string`	-	用于拓展当前基础样式

Emits

事件名	参数	描述
`click`	`(event: any)`	当按钮被点击时触发

Slots

插槽名	描述
`default`	按钮内容

交互

正在完善中，敬请期待！😊