Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<template>
  <p>
    <px-button>Button</px-button>
    <px-button type="primary">Primary</px-button>
    <px-button type="success">Success</px-button>
    <px-button type="warning">Warning</px-button>
    <px-button type="danger">Danger</px-button>
    <px-button type="sakura">Sakura</px-button>
  </p>

  <p>
    <px-button plain>Plain</px-button>
    <px-button type="primary" plain>Primary</px-button>
    <px-button type="success" plain>Success</px-button>
    <px-button type="warning" plain>Warning</px-button>
    <px-button type="danger" plain>Danger</px-button>
    <px-button type="sakura" plain>Sakura</px-button>
  </p>

  <p>
    <px-button round>Round</px-button>
    <px-button type="primary" round>Primary</px-button>
    <px-button type="success" round>Success</px-button>
    <px-button type="warning" round>Warning</px-button>
    <px-button type="danger" round>Danger</px-button>
    <px-button type="sakura" round>Sakura</px-button>
  </p>

  <p>
    <px-button icon="search" circle />
    <px-button type="primary" icon="edit-solid" circle />
    <px-button type="success" icon="check-solid" circle />
    <px-button type="warning" icon="star-solid" circle />
    <px-button type="danger" icon="trash-solid" circle />
    <px-button type="sakura" icon="tag-solid" circle />
  </p>
</template>

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

<template>
  <p>
    <px-button>Button</px-button>
    <px-button type="primary">Primary</px-button>
    <px-button type="success">Success</px-button>
    <px-button type="warning">Warning</px-button>
    <px-button type="danger">Danger</px-button>
    <px-button type="sakura">Sakura</px-button>
  </p>
  <p>
    <px-button disabled>Button</px-button>
    <px-button type="primary" disabled>Primary</px-button>
    <px-button type="success" disabled>Success</px-button>
    <px-button type="warning" disabled>Warning</px-button>
    <px-button type="danger" disabled>Danger</px-button>
    <px-button type="sakura" disabled>Sakura</px-button>
  </p>
</template>

图标按钮

使用 icon 属性来定义按钮的图标。

<template>
  <div>
    <px-button type="primary" icon="edit" />
    <px-button type="primary" icon="share" />
    <px-button type="primary" icon="trash" />
    <px-button type="primary" icon="search">Search</px-button>
    <px-button type="primary">
      Upload
      <px-icon icon="upload-alt-solid" style="margin-left: 8px" color="#fff" />
    </px-button>
  </div>
</template>

按钮组

使用 <px-button-group> 对多个按钮分组。

<template>
  <p>
    <px-button-group type="primary" round>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
    </px-button-group>
  </p>
  <p>
    <px-button-group type="success" round>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
      <px-button>Button3</px-button>
    </px-button-group>
  </p>
  <p>
    <px-button-group type="warning" round>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
      <px-button>Button3</px-button>
      <px-button>Button4</px-button>
    </px-button-group>
  </p>
  <p>
    <px-button-group type="danger">
      <px-button type="primary" icon="edit" round />
      <px-button type="primary" icon="share" />
      <px-button type="primary" icon="trash" round />
    </px-button-group>
  </p>
  <p>
    <px-button-group type="sakura">
      <px-button type="primary" icon="edit" round />
      <px-button type="primary" icon="share" />
      <px-button type="primary" icon="trash" round />
    </px-button-group>
  </p>
</template>

加载状态

使用 loading 属性来定义按钮的加载状态。

TIP

您可以使用 loading 插槽或 loadingIcon 属性自定义您的 loading 图标

ps: loading 插槽优先级高于 loadingIcon 属性

<template>
  <div>
    <px-button type="primary" loading>Loading</px-button>
    <px-button type="primary" loading-icon="circle-notch" loading>
      Loading
    </px-button>
    <px-button type="primary" loading>
      <template #loading>
        <px-icon
          style="margin-right: 6px"
          icon="star-crescent-solid"
          spin
          color="#fff"
        />
      </template>
      Loading
    </px-button>
  </div>
</template>

按钮尺寸

使用 size 属性来定义按钮的尺寸。

<template>
  <p>
    <px-button type="primary" size="large">817</px-button>
    <px-button type="success" size="large">817</px-button>
    <px-button type="warning" size="large">817</px-button>
    <px-button type="danger" size="large">817</px-button>
    <px-button type="sakura" size="large">817</px-button>
  </p>
  <p>
    <px-button type="primary">817</px-button>
    <px-button type="success">817</px-button>
    <px-button type="warning">817</px-button>
    <px-button type="danger">817</px-button>
    <px-button type="sakura">817</px-button>
  </p>
  <p>
    <px-button type="primary" size="small">817</px-button>
    <px-button type="success" size="small">817</px-button>
    <px-button type="warning" size="small">817</px-button>
    <px-button type="danger" size="small">817</px-button>
    <px-button type="sakura" size="small">817</px-button>
  </p>
</template>

Tag

可以自定义元素标签。例如, 按钮, div, 路由链接, nuxt 链接。

<template>
  <px-button>button</px-button>
  <px-button tag="div" role="button" tabindex="0">div</px-button>
  <px-button type="primary" tag="a">a</px-button>
</template>

自定义颜色

您可以自定义按钮的颜色。

组件库将自动计算按钮各状态的颜色。

TIP

由于技术力问题, 请勿对此功能抱有太高期望, 如果希望实现自定义主题, 更加推荐直接修改 @property 属性, 详情见下述

<template>
  <px-text size="12">使用color属性自动计算颜色,可能出现计算错误</px-text>
  <div class="m-y-20">
    <px-button color="#626aef">Button</px-button>
    <px-button color="#626aef" disabled>Button</px-button>
    <px-button color="#626aef" plain>Button</px-button>
    <px-button-group color="#626aef" circle>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
    </px-button-group>
  </div>
  <div class="m-y-20">
    <px-button color="#dfee56">Button</px-button>
    <px-button color="#dfee56" disabled>Button</px-button>
    <px-button color="#dfee56" plain>Button</px-button>
    <px-button-group color="#dfee56" round>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
    </px-button-group>
  </div>
  <div class="m-y-20">
    <px-button color="#fadbe0">Button</px-button>
    <px-button color="#fadbe0" disabled>Button</px-button>
    <px-button color="#fadbe0" plain>Button</px-button>
    <px-button-group color="#fadbe0">
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
    </px-button-group>
  </div>
  <px-text size="12">直接修改paintWorklet变量</px-text>
  <div class="paint m-y-20">
    <px-button>Button</px-button>
    <px-button-group>
      <px-button>Button1</px-button>
      <px-button>Button2</px-button>
    </px-button-group>
  </div>
</template>
<style scoped>
.paint .px-button {
  --px-button-text-color: #554562;
  --px-border-color: #554562;
  --px-bg-color: #fadbe0;
  --px-bg-shadow-color: #eaadbd;
}
</style>

节流模式

可以通过 useThrottle 属性来定义按钮是否使用节流模式默认为 true。

<script setup>
const handleBtnClick = () => {
  console.log('btn click')
}
</script>

<template>
  <p>
    <px-button @click="handleBtnClick"> with throttle</px-button>
    <px-button :use-throttle="false" @click="handleBtnClick">
      without throttle
    </px-button>
  </p>
</template>

新圆角样式

对 pixelbox.worklet 进行修改, 支持一种新的圆角样式, 同时限定圆角种类为 3 种, 通过修改 --px-border-radius 值控制, 当前展示值大于 3 的情况, 提供属性 chubby 控制

WARNING

由于算法不够完善, 普适性不高, 提供属性 chubby 限制样式基础模板, 该圆角样式对 --px-border, --px-border-[position], --px-border-radius-[postion], --px-bg-shadow-border, 元素宽高都有一定要求, 请合理使用

<template>
  <p>
    <px-button chubby>Chubby</px-button>
    <px-button type="primary" chubby>Primary</px-button>
    <px-button type="success" chubby>Success</px-button>
  </p>
  <p>
    <px-button type="warning" chubby>Warning</px-button>
    <px-button type="danger" chubby>Danger</px-button>
    <px-button type="sakura" chubby>Sakura</px-button>
  </p>
  <p>
    <px-button icon="search" chubby />
    <px-button type="primary" icon="edit-solid" chubby />
    <px-button type="success" icon="check-solid" chubby />
    <px-button type="warning" icon="star-solid" chubby />
    <px-button type="danger" icon="trash-solid" chubby />
    <px-button type="sakura" icon="tag-solid" chubby />
  </p>
  <hr />
  <p class="compare">
    <px-button round>Round</px-button>
    <px-button type="primary" round>Primary</px-button>
    <px-button type="success" round>Success</px-button>
  </p>
  <p class="compare">
    <px-button type="warning" round>Warning</px-button>
    <px-button type="danger" round>Danger</px-button>
    <px-button type="sakura" round>Sakura</px-button>
  </p>
  <p class="compare">
    <px-button icon="search" circle />
    <px-button type="primary" icon="edit-solid" circle />
    <px-button type="success" icon="check-solid" circle />
    <px-button type="warning" icon="star-solid" circle />
    <px-button type="danger" icon="trash-solid" circle />
    <px-button type="sakura" icon="tag-solid" circle />
  </p>
</template>
<style scoped>
.compare .px-button {
  --px-button-size: 60px;
}
</style>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Button API

Props

Name	Description	Type	Default
size	按钮尺寸	`enum`	default
type	按钮类型	`enum`	base
plain	是否为朴素按钮	`boolean`	false
round	是否为圆角按钮	`boolean`	false
circle	是否为圆形按钮	`boolean`	false
chubby	另一种圆角样式,可能更圆	`boolean`	false
loading	是否为加载中状态	`boolean`	false
loadingIcon	自定义加载中状态图标组件	`string`	-
disabled	是否禁用按钮	`boolean`	false
icon	按钮图标	`string`	-
autofocus	自动聚焦(原生`autofocus`属性)	`boolean`	false
nativeType	原生 type 属性	`enum`	button
label	按钮文字(优先级低于插槽)	`string`	-
tag	自定义元素标签	`string \| Component`	button
useThrottle	是否开启节流	`boolean`	false
throttleDuration	节流时间间隔(ms)	`number`	500
color	自定义颜色	`string`	-

Events

Name	Description	Type
click	按钮点击事件	`function`

Slots

Name	Description
default	默认插槽,按钮内容
loading	自定义加载图标

Expose

Name	Description	Type
ref	获取原生按钮元素	`object`
size	获取按钮尺寸	`object`
type	获取按钮类型	`object`
disabled	获取按钮是否禁用	`object`

ButtonGroup API

Props

Name	Description	Type	Default
size	按钮组尺寸	`enum`	default
type	按钮组类型	`enum`	base
disabled	按钮组是否禁用	`boolean`	false
round	按钮组是否为圆角	`boolean`	false
circle	按钮组是否为圆形	`boolean`	false
color	自定义颜色	`string`	-

Slots

Name	Description
default	默认插槽 `SubComponent: PxButton`

Button 按钮 ​

基础用法 ​

禁用状态 ​

图标按钮 ​

按钮组 ​

加载状态 ​

按钮尺寸 ​

Tag ​

自定义颜色 ​

节流模式 ​

新圆角样式 ​

API_Table插件测试 ​

​ Button API

​ Props

​ Events

​ Slots

​ Expose

​ ButtonGroup API

​ Props

​ Slots

Button 按钮

基础用法

禁用状态

图标按钮

按钮组

加载状态

按钮尺寸

Tag

自定义颜色

节流模式

新圆角样式

API_Table插件测试

Button API

Props

Events

Slots

Expose

ButtonGroup API

Props

Slots