Skip to content

Button Rough 按钮

同 Button 组件,但是样式有些区别

default

基础用法

defaultlong long long long long long long long text with max width is 200pxdisabledautofocus
html
<xtt-button>default</xtt-button-rough>
<xtt-button-rough style="max-width: 200px">long long long long long long long long text with max width is 200px</xtt-button-rough>
<xtt-button-rough disabled>disabled</xtt-button-rough>
<xtt-button-rough autofocus>autofocus</xtt-button-rough>

type 样式

type 会更改按钮的显示风格,目前支持 6 种风格,分别为 primary、danger、success、warning、base、default

primarydangersuccesswarningbasedefault
html
<xtt-button-rough type="primary">primary</xtt-button-rough>
<xtt-button-rough type="danger">danger</xtt-button-rough>
<xtt-button-rough type="success">success</xtt-button-rough>
<xtt-button-rough type="warning">warning</xtt-button-rough>
<xtt-button-rough type="base">base</xtt-button-rough>
<xtt-button-rough>default</xtt-button-rough>

size 尺寸

按钮尺寸,目前支持 3 种尺寸,分别为 large、default、small

largedefaultsmall
html
<xtt-button-rough size="large">large</xtt-button-rough>
<xtt-button-rough>default</xtt-button-rough>
<xtt-button-rough size="small">large</xtt-button-rough>

block

将按钮转换为块级元素。

blockblockblockblockblockblock
html
<xtt-button-rough block>block</xtt-button-rough>
<xtt-button-rough type="primary" block>block</xtt-button-rough>
<xtt-button-rough type="danger" block>block</xtt-button-rough>
<xtt-button-rough type="success" block>block</xtt-button-rough>
<xtt-button-rough type="warning" block>block</xtt-button-rough>
<xtt-button-rough type="base" block>block</xtt-button-rough>

line

设置按钮内文字的最大行数,当文字超出最大行数时,会显示 ... 省略号。默认为 1

long long long long long long long long text
html
<xtt-button-rough style="max-width: 200px" line="2">long long long long long long long long text</xtt-button-rough>

RTL

设置按钮的文字方向为从右到左

long long long long long long long long text with max width is 200px
html
<xtt-button-rough style="max-width: 200px" rtl
	>long long long long long long long long text with max width is 200px</xtt-button
>

loading

按钮的加载状态

loading...
html
<xtt-button-rough loading>loading...</xtt-button-rough>