T-Text 文字
- 示例代码路径:
/pages/components/t-text/t-text - 示例代码地址:https://gitee.com/turbo-ui/turbo-ui-demo/tree/master/pages/components/t-text/t-text
兼容端
| 安卓 | 苹果 | Web | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | ❌ | ✅ |
使用示例
vue
<template>
<t-card title="主题">
<t-row>
<t-text>默认文本</t-text>
<t-text :ma="['0','5']" type="primary">主题文本</t-text>
<t-text :ma="['0','5']" type="error">错误文本</t-text>
<t-text :ma="['0','5']" type="success">成功文本</t-text>
<t-text :ma="['0','5']" type="warning">警告文本</t-text>
</t-row>
</t-card>
<t-card title="下划线">
<t-row>
<t-text decoration="underline">默认文本</t-text>
<t-text decoration="underline" :ma="['0','5']" type="primary">主题文本</t-text>
<t-text decoration="underline" :ma="['0','5']" type="error">错误文本</t-text>
<t-text decoration="underline" :ma="['0','5']" type="success">成功文本</t-text>
<t-text decoration="underline" :ma="['0','5']" type="warning">警告文本</t-text>
</t-row>
</t-card>
</template>属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | "default" | 文本类型,可选值:default/primary/error/success/warning |
| color | String | "#333333" | 文本颜色 |
| size | String | "14" | 文本大小 |
| showBar | Boolean | false | 显示标题块 |
| barDirection | String | "left" | 块方向 |
| barWidth | String | "3" | 块宽度 |
| barHeight | String | "10" | 块高度 |
| barColor | String | "" | 块颜色 |
| barMx | Array | ["0","4"] | 块左右外边距,[左边距,右边距] |
| barRound | String | "8" | 块圆角 |
| ma | Array | [] | 外边距 |
| dark | Boolean | true | 是否暗黑模式自适应 |
| decoration | String | "" | 文本修饰线,可选值:underline/line-through/overline |
| bold | String | "normal" | 字体粗细,可选值:normal/bold/400/700 |
| lines | Number | -1 | 文本行数限制,-1表示不限制 |
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| 无 | 该组件暂无事件方法 |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 文本内容插槽 |
