UNPKG

3.55 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 * @supported weapp
30 */
31 maxLines?: number
32}
33declare namespace TextProps {
34 /** space 的合法值 */
35 interface TSpace {
36 /** 中文字符空格一半大小 */
37 ensp
38 /** 中文字符空格大小 */
39 emsp
40 /** 根据字体设置的空格大小 */
41 nbsp
42 }
43}
44/** 文本
45 * @classification base
46 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
47 * @example_react
48 * ```tsx
49 * export default class PageView extends Component {
50 * state = {
51 * contents: [],
52 * contentsLen: 0
53 * }
54 *
55 * add = () => {
56 * this.setState(prev => {
57 * const cot = prev.contents.slice()
58 * cot.push({ text: 'hello world' })
59 * return {
60 * contents: cot,
61 * contentsLen: cot.length
62 * }
63 * })
64 * }
65 *
66 * remove = () => {
67 * this.setState(prev => {
68 * const cot = prev.contents.slice()
69 * cot.pop()
70 * return {
71 * contents: cot,
72 * contentsLen: cot.length
73 * }
74 * })
75 * }
76 *
77 * render () {
78 * return (
79 * <View className='container'>
80 * {this.state.contents.map((item, index) => (
81 * <Text key={index}>{item.text}</Text>
82 * ))}
83 * <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
84 * <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
85 * </View>
86 * )
87 * }
88 * }
89 * ```
90 * @example_vue
91 * ``` html
92 * <template>
93 * <view class="container">
94 * <view v-for="(item, index) in contents">
95 * <text>{{item.text}} line {{index + 1}}</text>
96 * </view>
97 * <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
98 * <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
99 * </template>
100 *
101 * <script>
102 * export default {
103 * data() {
104 * return {
105 * contents: [],
106 * contentsLen: 0
107 * }
108 * },
109 * methods: {
110 * add () {
111 * const cot = this.contents.slice()
112 * cot.push({ text: 'hello world' })
113 * this.contents = cot
114 * this.contentsLen = cot.length
115 * },
116 *
117 * remove () {
118 * const cot = this.contents.slice()
119 * cot.pop()
120 * this.contents = cot
121 * this.contentsLen = cot.length
122 * }
123 * }
124 * }
125 * </script>
126 * ```
127 * @see https://developers.weixin.qq.com/miniprogram/dev/component/text.html
128 */
129declare const Text: ComponentType<TextProps>
130export { Text, TextProps }