多行文本 Textarea

输入框用于通过键盘输入内容，适用于多行文本

使用

API

安装使用

import { TiTextarea } from '@titian-design/mobile-react'

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiTextarea } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiTextarea placeholder="请输入评论文字，限200字以内…" />
    </div>
  );
}

字数统计

codesanbox

copy

code

import React from 'react';
import { TiTextarea } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiTextarea autoHeight placeholder="请输入评论文字" showCount />
    </div>
  );
}

高度自适应

codesanbox

copy

code

import React from 'react';
import { TiTextarea } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiTextarea autoHeight placeholder="请输入评论文字" maxlength={-1} />
    </div>
  );
}

TiTextarea API

属性 Properties

名称	类型	必填	默认值	说明	备注
value	string	否	-	当前输入的值	-
placeholder	string	否	-	输入框为空时占位符	-
placeholderStyle	string	否	-	指定 placeholder 的样式	-
disabled	boolean	否	-	是否禁用	false
showCount	boolean	否	-	是否显示统计字数	false
maxlength	number	否	-	最大输入长度，设置为 -1 的时候不限制最大长度	140
autoFocus	boolean	否	-	自动聚焦，拉起键盘	false
focus	boolean	否	-	获取焦点	false
autoHeight	boolean	否	-	是否自动增高，设置 auto-height 时，style.height 不生效	false
confirmType	string	否	-	设置键盘右下角按钮的文字，仅在 type='text'时生效	done
extStyle	string | Record<string, string>	否	-	根节点样式	-

事件 Events

名称	参数列表	描述	备注
onInput	(e: CustomEvent<{value: string}>) => void	键盘输入时触发，	-
onFocus	(e: CustomEvent) => void	输入框聚焦时触发，	-
onBlur	(e: CustomEvent<{value: string}>) => void	输入框失去焦点时触发	-
onConfirm	(e: CustomEvent<{value: string}>) => void	点击完成按钮时触发	-

外部样式类 External Classes

名称	说明	备注
extClass	根节点样式类	-
textareaClass	textarea 样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--textarea-height	220px	文本域高度	-
--textarea-padding-v	theme.spacing.vertical.v6	文本域垂直方向内边距	-
--textarea-padding-h	theme.spacing.horizontal.h7	文本域水平方向内边距	-
--textarea-min-height	172px	文本域最新高度，自增模式下有效	-
--textarea-font-size	theme.fontSize.t6	文本域字号	-
--textarea-line-height	theme.lineHeight.multiline.t6	文本域行高	-
--textarea-font-weight	theme.fontWeight.regular	文字字重	-
--textarea-color	theme.color.gray.texticon.900	文字颜色（输入后）	-
--textarea-placeholder-color	theme.color.gray.texticon.400	文字颜色（Placeholder）	-
--textarea-count-color	theme.color.gray.texticon.250	字数计数文字，颜色	-
--textarea-count-font-size	theme.fontSize.t4	字数计数文字，大小	-
--textarea-count-line-height	theme.lineHeight.single.t4	字数计数文字，大小	-