xtt-ui

Appearance

Text Button 按钮 ​

文字按钮

default

基础用法 ​

defaultlong long long long long long long long text with max width is 200pxdisabledautofocus

在内部文字超出最大可显示宽度时, button 内的文字会显示 ... 省略，同时在鼠标 hover 或者 focus 时, 会显示一个 tooltip, tooltip 的内容为全部的文字

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

type 样式 ​

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

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

size 尺寸 ​

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

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

block ​

将按钮转换为块级元素。

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

line ​

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

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