antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
57 lines (43 loc) • 4.48 kB
Markdown
nav:
path: /components
group:
title: 数据展示
order: 8
toc: content
# Typography 排版
- 需要对一段文本进行展示时使用,支持省略,兼容不同平台的加粗等。
- 当需要带图标的行动点操作按钮时可以使用。
## 注意事项
- `icon` 属性可以支持 `Icon` 组件的 `type` 属性,也可以直接传入图标的链接地址。
- 禁用模式下,可以传入 `onDisabledTap` 事件,用于监听禁用状态下,用户对文本的点击。
## 代码示例
### 基础用法
<code src='../../demo/pages/Typography/index'></code>
## 属性
| 属性 | 说明 | 类型 | 默认值 |
| --------------------------- | ------------------------------------------------------------------- | ------------------------------ | -------- |
| text | 文本内容 | string | - |
| iconPosition | 图标位置 | `left` \| `right` | `right` |
| icon | 图标,可以支持 Icon 组件的 type 属性,也可以直接传入图标的链接地址 | IconType \| string | '' |
| className | 样式类 | string | - |
| activeClassName | 点击是激活态样式类 | string | - |
| style | 样式 | string | - |
| disabled | 是否禁用 | boolean | false |
| selectable | 是否可被选中 | boolean | false |
| fontWeight | 字重,兼容 iOS、Android 平台的加粗效果 | `normal` \| `medium` \| `bold` | `normal` |
| lineThrough | 添加删除线样式 | boolean | false |
| underline | 添加下划线样式 | boolean | false |
| ellipsisRow | 多行省略,值须大于等于 1,表现同 css 的 -webkit-line-clamp 属性一致 | number | - |
| #if ALIPAY onTap | 点击按钮,触发此回调 | (e: Event) => void | - |
| #if ALIPAY catchTap | 点击按钮,触发此回调,非冒泡 | (e: Event) => void | - |
| #if ALIPAY onDisabledTap | 禁用状态下,点击按钮,触发此回调 | (e: Event) => void | - |
| #if WECHAT bindtap | 点击按钮,触发此回调 | (e: Event) => void | - |
| #if WECHAT binddisabledtap | 禁用状态下,点击按钮,触发此回调 | (e: Event) => void | - |
### 主题定制
#### 样式变量
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
| 变量名 | 浅色模式默认值 | 深色模式默认值 | 备注 |
| ---------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------ |
| --typography-container-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">#333333</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | 排版容器颜色 |