UNPKG

3.87 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps } from './common'
3interface TextProps extends StandardProps {
4 /** 文本是否可选
5 * @default false
6 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
7 */
8 selectable?: boolean
9 /** 文本是否可选,该属性会使文本节点显示为 inline-block
10 * @default false
11 * @supported weapp, h5, harmony_hybrid
12 */
13 userSelect?: boolean
14 /** 显示连续空格
15 * @supported weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
16 */
17 space?: keyof TextProps.TSpace
18 /** 是否解码
19 * @default false
20 * @supported weapp, alipay, tt, qq, jd
21 * @h5 默认解码,不支持设置
22 */
23 decode?: boolean
24 /** 多行省略,值须大于等于 1,表现同 css 的 -webkit-line-clamp 属性一致。
25 * @supported alipay
26 */
27 numberOfLines?: number
28 /**
29 * 文本溢出处理
30 * @supported weapp-skyline
31 * @default 'visible'
32 */
33 overflow?: keyof TextProps.Overflow
34 /** 限制文本最大行数
35 * @supported weapp, harmony
36 */
37 maxLines?: number
38}
39declare namespace TextProps {
40 /** space 的合法值 */
41 interface TSpace {
42 /** 中文字符空格一半大小 */
43 ensp
44 /** 中文字符空格大小 */
45 emsp
46 /** 根据字体设置的空格大小 */
47 nbsp
48 }
49 interface Overflow {
50 /** 修剪文本 */
51 clip
52 /** 淡出 */
53 fade
54 /** 显示省略号 */
55 ellipsis
56 /** 文本不截断 */
57 visible
58 }
59}
60/** 文本
61 * @classification base
62 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
63 * @example_react
64 * ```tsx
65 * export default class PageView extends Component {
66 * state = {
67 * contents: [],
68 * contentsLen: 0
69 * }
70 *
71 * add = () => {
72 * this.setState(prev => {
73 * const cot = prev.contents.slice()
74 * cot.push({ text: 'hello world' })
75 * return {
76 * contents: cot,
77 * contentsLen: cot.length
78 * }
79 * })
80 * }
81 *
82 * remove = () => {
83 * this.setState(prev => {
84 * const cot = prev.contents.slice()
85 * cot.pop()
86 * return {
87 * contents: cot,
88 * contentsLen: cot.length
89 * }
90 * })
91 * }
92 *
93 * render () {
94 * return (
95 * <View className='container'>
96 * {this.state.contents.map((item, index) => (
97 * <Text key={index}>{item.text}</Text>
98 * ))}
99 * <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
100 * <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
101 * </View>
102 * )
103 * }
104 * }
105 * ```
106 * @example_vue
107 * ``` html
108 * <template>
109 * <view class="container">
110 * <view v-for="(item, index) in contents">
111 * <text>{{item.text}} line {{index + 1}}</text>
112 * </view>
113 * <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
114 * <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
115 * </template>
116 *
117 * <script>
118 * export default {
119 * data() {
120 * return {
121 * contents: [],
122 * contentsLen: 0
123 * }
124 * },
125 * methods: {
126 * add () {
127 * const cot = this.contents.slice()
128 * cot.push({ text: 'hello world' })
129 * this.contents = cot
130 * this.contentsLen = cot.length
131 * },
132 *
133 * remove () {
134 * const cot = this.contents.slice()
135 * cot.pop()
136 * this.contents = cot
137 * this.contentsLen = cot.length
138 * }
139 * }
140 * }
141 * </script>
142 * ```
143 * @see https://developers.weixin.qq.com/miniprogram/dev/component/text.html
144 */
145declare const Text: ComponentType<TextProps>
146export { Text, TextProps }