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 />