更改文本区域的大小 [英] Change size of textarea

问题描述

我目前有这样的textarea:

<textarea matInput rows="5" cols="40" placeholder="text"></textarea>

但是，它总是相同的大小.

However, it is always the same size.

关于如何更改textarea大小的任何想法?

Any idea on how to change the size of the textarea?

推荐答案

取决于您的意思:

但是，它总是相同的大小.

However, it is always the same size.

有两个选项.

当前，只有rows影响材料textarea的高度，cols不会改变其宽度.

Currently, only rows affects the Material textarea height, cols doesn't change its width.

因此，为了增加宽度，我们必须在包含textarea的mat-form-field上使用CSS width属性:

Therefore for increasing width, we have to use the CSS width property on a mat-form-field containing our textarea:

<mat-form-field style="width: 300px;">
    <textarea matInput rows="5" cols="40" placeholder="text"></textarea>
</mat-form-field>

选项2(动态尺寸适合textarea的内容):

在材料6中，添加了CdkTextareaAutosize指令.

OPTION 2 (DYNAMIC size to fit textarea content):

In Material 6, CdkTextareaAutosize directive was added.

来自官方文档:

cdkTextareaAutosize指令可以应用于任何<textarea> 使它自动调整大小以适合其内容.最小和 可以通过设置要扩展的最大行数 cdkAutosizeMinRows和cdkAutosizeMaxRows属性.

The cdkTextareaAutosize directive can be applied to any <textarea> to make it automatically resize to fit its content. The minimum and maximum number of rows to expand to can be set via the cdkAutosizeMinRows and cdkAutosizeMaxRows properties respectively.

这是那里的一个简化示例:

And here's a simplified example from there:

<mat-form-field>
    <mat-label>Autosize textarea</mat-label>
    <textarea
        matInput
        cdkTextareaAutosize
        cdkAutosizeMinRows="1"
        cdkAutosizeMaxRows="5">
    </textarea>
</mat-form-field>

注意:
其他答案中提到的matTextareaAutosize已被弃用，并将在下一个主要版本中将其删除. 官方文档已使用cdkTextareaAutosize代替.

NOTE:
matTextareaAutosize mentioned in other answers is deprecated and will be removed in the next major release. The official docs already use cdkTextareaAutosize instead.

这篇关于更改文本区域的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！