YTUI 2

API

Name	Desc	Type	Default	Vue Only
size	按钮尺寸	String	2rem
scheme	配色方案 plain / outline / translucent / solid	String	outline
shape	按钮形状 round / pill/ circle / square	String	pill
default	按钮内容插槽	Slot		true

Usage

默认状态

矩形、配色镂空。

jsx


<Button>默认</Button>

按钮形状

矩形 / 药丸。

jsx

<div class="flex gap-4">
  <Button shape="round">矩形</Button>
  <Button shape="pill">药丸</Button>
</div>

按钮配色方案

基础色 + 方案名。

固定的方案名有：极简 / 镂空 / 半透 / 实色。

默认自带的配色方案有：default / secondary / primary

Code

jsx


默认自带的配色方案有：default / secondary / primary

<DesignDemo >
  <div class="flex gap-4 p-4">
    <Button scheme="default-plain">极简
      <Icon name="go" size="1rem" />
    </Button>
    <Button scheme="outline">镂空</Button>
    <Button scheme="translucent">半透</Button>
    <Button scheme="solid">实色</Button>
  </div>
  <div class="flex gap-4 p-4">
    <Button scheme="secondary-plain">极简
      <Icon name="go" size="1rem" />
    </Button>
    <Button scheme="secondary-outline">镂空</Button>
    <Button scheme="secondary-translucent">半透</Button>
    <Button scheme="secondary-solid">实色</Button>
  </div>
  <div class="flex items-center gap-4 p-4">
    <Button scheme="primary-plain">极简
      <Icon name="go" size="1rem" />
    </Button>
    <Button scheme="primary-outline">镂空</Button>
    <Button scheme="primary-translucent">半透</Button>
    <Button scheme="primary-solid">实色</Button>
  </div>
</DesignDemo>

所有为镂空的按钮都有统一的边框，配合使用最协调。且镂空按钮对 UI 的视觉侵扰最低，更适合大规模使用。

若搭配实色按钮，尽量保证仅搭配 1 个实色按钮，多思考，找到功能的重点。

临时定义按钮配色

可在默认的 plain 配色基础上，添加 className 或 style 自定义样式。

注意，任何环境下添加 css 类名请通过 className 属性，不要用 class 属性。

jsx

<DesignDemo>
  <div class="flex gap-4">
    <Button scheme="plain" className="!bg-[#978af9]">自定义背景色</Button>
    <Button scheme="plain" :style="{backgroundColor: 'rgba(151, 138, 249, .5)'}">自定义背景色</Button>
  </div>
</DesignDemo>

极简按钮

必须有图标或彩色文字，与普通文字作强区分。

jsx

<Button scheme="default-plain">
  文字加图标
  <Icon name="go" size="14px" />
</Button>
<Button scheme="primary-plain">彩色文字</Button>
<Button shape="circle" scheme="default-plain" iconOnly={true}>
  <Icon name="go" size="1rem" />
</Button>

自适应宽度

按钮最小宽高比为 1:2. 当内容很长时，按钮可自适应内容宽度。

jsx

<div class="flex gap-4">
  <Button>1:2</Button>
  <Button>按钮可自适应内容宽度</Button>
</div>

特殊按钮

仅图标，这也是按钮的最小尺寸（长宽 1:1）。

jsx

<div class="flex gap-4">
  <Button shape="circle">
    <Icon name="go" size="1rem" />
  </Button>
  <Button shape="square">
    <Icon name="go" size="1rem" />
  </Button>
  <Button shape="circle" scheme="plain">
    <Icon name="go" size="1rem" />
  </Button>
</div>

自定义尺寸

可通过 size 设置任意尺寸的按钮。

推荐的尺寸规格是 [1, 1.5, 2, 2.5, ...] rem 或 [16, 24, 32, 40, ...] px 有规律递增。

jsx

<div class="flex items-end gap-4">
  <Button size="1rem">1rem</Button>
  <Button size="1.5rem">1.5rem</Button>
  <Button size="2rem">2rem</Button>
  <Button size="2.5rem">2.5rem</Button>
  <Button size="3rem">3rem</Button>
</div>

进阶

自定义配色方案

统一使用预定义的函数创建出新的配色方案，传参是不透明的颜色值，例如 rgb(60,60,60) / #AABBCCEE。命名规范：.button--scheme-[方案名称]。

less

@import "ytui/styles/mixin.less";

.button--scheme-primary {
  ._scheme(rgb(74, 180, 187));
}

使用：

jsx

<Button scheme="primary-outline">按钮</Button>

API ​

Usage ​

默认状态 ​

按钮形状 ​

按钮配色方案 ​

临时定义按钮配色 ​

极简按钮 ​

自适应宽度 ​

特殊按钮 ​

自定义尺寸 ​

进阶 ​

自定义配色方案 ​

API