Textarea Autosize

Textarea Autosize 组件会自动调整其高度以匹配其内容长度。

介绍

Textarea Autosize 是一个实用组件，它取代了原生的 <textarea> HTML。其高度会根据键盘输入和窗口大小调整事件自动调整。

默认情况下，一个空的 Textarea Autosize 组件会渲染为单行，如下面的演示所示

基础知识

导入

import TextareaAutosize from '@mui/material/TextareaAutosize';

最小高度

使用 minRows 属性来定义组件的最小高度

<TextareaAutosize
  aria-label="minimum height"
  minRows={3}
  placeholder="Minimum 3 rows"
  style={{ width: 200 }}
/>

<TextareaAutosize
  aria-label="minimum height"
  minRows={3}
  placeholder="Minimum 3 rows"
  style={{ width: 200 }}
/>

按下 Enter 开始编辑

最大高度

使用 maxRows 属性来定义组件的最大高度

<TextareaAutosize
  maxRows={4}
  aria-label="maximum height"
  placeholder="Maximum 4 rows"
  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua."
  style={{ width: 200 }}
/>

<TextareaAutosize
  maxRows={4}
  aria-label="maximum height"
  placeholder="Maximum 4 rows"
  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua."
  style={{ width: 200 }}
/>

按下 Enter 开始编辑

API

请参阅下面的文档，以获得此处提及的组件的所有属性和类的完整参考。

<TextareaAutosize />