Easy UI

Appearance

Text 文本 ​

文本的常见操作

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-text.js";
</script>
js
import "easy-component-ui/ea-text";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

由 variant 属性来选择 Text 的类型。

DefaultPrimarySuccessInfoWarningDanger
查看代码
html
<div class="row">
  <ea-text>Default</ea-text>
  <ea-text variant="primary">Primary</ea-text>
  <ea-text variant="success">Success</ea-text>
  <ea-text variant="info">Info</ea-text>
  <ea-text variant="warning">Warning</ea-text>
  <ea-text variant="danger">Danger</ea-text>
</div>

尺寸 ​

使用 size 属性配置尺寸，可选的尺寸大小有: large、medium 或 small。

LargeDefaultSmall
查看代码
html
<div class="row">
  <ea-text size="large">Large</ea-text>
  <ea-text>Default</ea-text>
  <ea-text size="small">Small</ea-text>
</div>

省略 ​

通过 truncated 属性，在文本超过视图或最大宽度设置时展示省略符。通过 line-clamp 属性控制多行的样式。

TIP

当 truncated 或 line-clamp 启用时，若未设置原生 title 属性，组件会自动将文本内容设置为容器的 title，以便鼠标悬停时显示完整文本。

Self element set width 100px Squeezed by parent element The -webkit-line-clamp CSS property
allows limiting of the contents of
a block to the specified number of lines.
查看代码
html
<ea-text tag="p" truncated style="width: 100px;">
  Self element set width 100px
</ea-text>
<ea-row style="width: 100px;">
  <ea-text tag="p" truncated>Squeezed by parent element</ea-text>
</ea-row>
<ea-text tag="p" line-clamp="2">
  The -webkit-line-clamp CSS property<br />
  allows limiting of the contents of<br />
  a block to the specified number of lines.
</ea-text>

覆盖 ​

使用 tag 属性覆盖元素标签，可选值: span、p、b、i、sub、sup、ins、del、mark。

spanThis is a paragraph.BoldItalic This is subscript This is superscriptInsertedDeletedMarked
查看代码
html
<ea-text>span</ea-text>
<ea-text tag="p">This is a paragraph.</ea-text>
<ea-text tag="b">Bold</ea-text>
<ea-text tag="i">Italic</ea-text>
<ea-text>
  This is
  <ea-text tag="sub" size="small">subscript</ea-text>
</ea-text>
<ea-text>
  This is
  <ea-text tag="sup" size="small">superscript</ea-text>
</ea-text>
<ea-text tag="ins">Inserted</ea-text>
<ea-text tag="del">Deleted</ea-text>
<ea-text tag="mark">Marked</ea-text>

EaText API ​

EaText Attributes ​

属性名说明类型可选值默认值
variant文本类型stringnormal / primary / success / warning / danger / infonormal
size文本大小stringlarge / medium / smallmedium
truncated文本是否截断boolean—false
line-clamp截断的行数number—0
tag文本标签stringspan / p / b / i / sub / sup / ins / del / markspan

EaText Slots ​

插槽名说明
default默认内容

EaText CSS Part ​

名称说明
container容器

EaText CSS Custom Properties ​

属性名说明默认值
--ea-text-line-clamp截断行数0
--ea-text-primary-color主色文本颜色var(--blue-500)
--ea-text-success-color成功文本颜色var(--green-500)
--ea-text-info-color信息文本颜色var(--grey-500)
--ea-text-warning-color警告文本颜色var(--yellow-500)
--ea-text-danger-color危险文本颜色var(--red-500)
--ea-text-small-font-size小号字体大小var(--font-size-sm)
--ea-text-medium-font-size中号字体大小var(--font-size-md)
--ea-text-large-font-size大号字体大小var(--font-size-lg)