[英]Text Area in material-ui
Could someone help me making a TextField personalization into a TextArea, using material-ui library?有人可以帮助我使用 material-ui 库将 TextField 个性化设置为 TextArea 吗? I am not finding any parameter that should personalize it into a TextArea: https://github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts我没有找到任何应该将其个性化为 TextArea 的参数: https : //github.com/callemall/material-ui/blob/v1-beta/src/TextField/TextField.d.ts
This is the TextArea: https://material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F 'Text area').这是文本区域: https : //material.io/guidelines/components/text-fields.html#text-fields-field-types (CMD/Ctrl + F“文本区域”)。
Text areas are taller than text fields and wrap overflow text onto a new line.文本区域比文本字段高,并将溢出文本换行到新行。 They scroll vertically when the cursor reaches the bottom of the field.当光标到达字段底部时,它们会垂直滚动。
To make TextField
work like a textarea
you can use multiline
prop.要使TextField
像textarea
一样工作,您可以使用multiline
prop。 You can read more about TextFied
and its props
here .您可以在此处阅读有关TextFied
及其props
更多信息。
Example示例
<TextField
placeholder="MultiLine with rows: 2 and rowsMax: 4"
multiline
rows={2}
rowsMax={4}
/>
You can set rowsMax={Infinity}
if you want to scale your multiline input box with your content (regardless of the content length).如果您想根据内容缩放多行输入框(无论内容长度如何),您可以设置rowsMax={Infinity}
。
You should use TextareaAutosize
API available in material UI.您应该使用材质 UI 中提供的TextareaAutosize
API。
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
// or
import { TextareaAutosize } from '@material-ui/core';**
The following example has all the attributes of TextareaAutosize: https://material-ui.com/components/textarea-autosize/以下示例具有 TextareaAutosize 的所有属性: https : //material-ui.com/components/textarea-autosize/
We can use outlined multiline <TextField>
for text area我们可以使用轮廓多行<TextField>
作为文本区域
and it could be implemented by creating a theme to apply globally anywhere inside <App/>
它可以通过创建一个主题来实现,以在<App/>
内的任何地方全局<App/>
import { createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiOutlinedInput: {
multiline: {
fontWeight: 'bold',
fontSize: '20px',
color: 'purple',
width: '50vw'
}
}
}
});
export default theme;
...
import { ThemeProvider } from '@material-ui/core/styles';
import Theme from './relevant-path-where-the-above-theme.js-file-is-saved/Theme';
...
...
render() {
return (
<ThemeProvider theme={Theme}>
<div className="App">
<Routes/>
</div>
</ThemeProvider>
);
}
...
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={10}
variant="outlined"
/>
...
Now the style for outlined multiline <TextField>
will be applied globally现在轮廓多行<TextField>
的样式将被全局应用
If you want something simple instead of the whole material-ui component, just use this code:如果你想要一些简单的东西而不是整个 material-ui 组件,只需使用以下代码:
textarea.style.height = textarea.scrollHeight+'px'
Where scrollHeight
is inner height of textarea and style.height
is outer (if outer < inner, scrollbar shows)其中scrollHeight
是 textarea 的内部高度, style.height
是外部的(如果外部 < 内部,滚动条显示)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.