Button Rough 按钮
同 Button 组件,但是样式有些区别
基础用法
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
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
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
将按钮转换为块级元素。
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
html
<xtt-button-rough style="max-width: 200px" line="2">long long long long long long long long text</xtt-button-rough>
RTL
设置按钮的文字方向为从右到左
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
按钮的加载状态
html
<xtt-button-rough loading>loading...</xtt-button-rough>