按钮

涵盖各种变体的按钮：语义色、描边（outline）、圆角、圆形、尺寸、图标、加载状态以及社交品牌。可通过 components.Button 设置全局默认值。

变体

变体

Vue

<div class="thl-demo-row">
  <ThlButton v-for="c in ['default','primary','success','info','warning','danger','inverse','purple']" :key="c" :variant="c">{{ c }}</ThlButton>
  <ThlButton variant="link">link</ThlButton>
</div>

React

{['default','primary','success','info','warning','danger','inverse','purple'].map((c) => (
  <Button key={c} variant={c}>{c}</Button>
))}
<Button variant="link">link</Button>

Angular

@for (c of ['default','primary','success','info','warning','danger','inverse','purple']; track c) {
  <button thl-button [variant]="c">{{ c }}</button>
}
<button thl-button variant="link">link</button>

描边、圆角、圆形

描边、圆角、圆形

Vue

<div>
  <div class="thl-demo-row"><ThlButton variant="primary" outline>Outline</ThlButton><ThlButton variant="success" rounded>Rounded</ThlButton><ThlButton variant="danger" rounded outline>Both</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="primary" circle icon="plus" aria-label="add" /><ThlButton variant="danger" circle icon="heart" size="lg" aria-label="like" /><ThlButton variant="info" circle icon="star" size="xl" aria-label="star" /></div>
</div>

React

<Button variant="primary" outline>Outline</Button>
<Button variant="success" rounded>Rounded</Button>
<Button variant="danger" rounded outline>Both</Button>
<Button variant="primary" circle icon="plus" aria-label="add" />
<Button variant="danger" circle icon="heart" size="lg" aria-label="like" />

Angular

<button thl-button variant="primary" outline>Outline</button>
<button thl-button variant="success" rounded>Rounded</button>
<button thl-button variant="danger" rounded outline>Both</button>
<button thl-button variant="primary" circle icon="plus" aria-label="add"></button>
<button thl-button variant="danger" circle icon="heart" size="lg" aria-label="like"></button>

尺寸、图标、加载、块级

尺寸、图标、加载、块级

Vue

<div>
  <div class="thl-demo-row"><ThlButton v-for="s in ['xs','sm','md','lg','xl']" :key="s" variant="info" :size="s">{{ s }}</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="primary" icon="download">Download</ThlButton><ThlButton variant="success" icon-right="arrow-right">Next</ThlButton><ThlButton variant="warning" loading>Loading</ThlButton><ThlButton disabled>Disabled</ThlButton></div>
  <div class="thl-demo-row"><ThlButton variant="success" block>Block button</ThlButton></div>
</div>

React

<Button variant="info" size="xs">xs</Button> … <Button variant="info" size="xl">xl</Button>
<Button variant="primary" icon="download">Download</Button>
<Button variant="success" iconRight="arrow-right">Next</Button>
<Button variant="warning" loading>Loading</Button>
<Button disabled>Disabled</Button>
<Button variant="success" block>Block button</Button>

Angular

<button thl-button variant="info" size="xs">xs</button> … <button thl-button variant="info" size="xl">xl</button>
<button thl-button variant="primary" icon="download">Download</button>
<button thl-button variant="success" iconRight="arrow-right">Next</button>
<button thl-button variant="warning" loading>Loading</button>
<button thl-button disabled>Disabled</button>
<button thl-button variant="success" block>Block button</button>

社交按钮与按钮组

社交按钮与按钮组

Vue

<div>
  <div class="thl-demo-row"><ThlButton v-for="s in ['facebook','twitter','linkedin','github','youtube','instagram']" :key="s" :variant="s" :icon="s === 'twitter' ? 'twitter' : s">{{ s }}</ThlButton></div>
  <div class="thl-demo-row"><ThlButtonGroup><ThlButton>Left</ThlButton><ThlButton>Middle</ThlButton><ThlButton>Right</ThlButton></ThlButtonGroup><ThlButtonGroup vertical><ThlButton variant="primary">Top</ThlButton><ThlButton variant="primary">Bottom</ThlButton></ThlButtonGroup></div>
</div>

React

<Button variant="facebook" icon="facebook">facebook</Button>
<ButtonGroup><Button>Left</Button><Button>Middle</Button><Button>Right</Button></ButtonGroup>
<ButtonGroup vertical><Button variant="primary">Top</Button><Button variant="primary">Bottom</Button></ButtonGroup>

Angular

<button thl-button variant="facebook" icon="facebook">facebook</button>
<thl-button-group><button thl-button>Left</button><button thl-button>Middle</button><button thl-button>Right</button></thl-button-group>
<thl-button-group vertical><button thl-button variant="primary">Top</button><button thl-button variant="primary">Bottom</button></thl-button-group>

全局默认值

createThl({ components: { Button: { rounded: true, size: 'sm' } } })

除非 prop 另行指定，所有按钮都会变为圆角、小尺寸。

在 Angular 中，thl-button 是挂在原生 <button> / <a> 上的属性组件（attribute component），因此 type、disabled、routerLink、表单提交和焦点行为都与原生一致。波纹效果（ripple）默认开启（Angular 中使用 ripple / noRipple 控制）。

API

Button

<ThlButton> · import { ThlButton } from '@thl-ui/vue'

Prop	类型	默认值
variant	string	—
size	string	—
outline	boolean	—
rounded	boolean	—
circle	boolean	—
block	boolean	—
loading	boolean	—
disabled	boolean	—
icon	string	—
iconRight	string	—
label	string	—
href	string	—
type	string	"button"
ripple	boolean	true

事件: click

插槽: icondefault

ButtonGroup

<ThlButtonGroup> · import { ThlButtonGroup } from '@thl-ui/vue'

Prop	类型	默认值
vertical	boolean	—
justified	boolean	—

插槽: default