Я использую Material-UI для проекта и просматриваю их API.
Однако я не понимаю свойство notched в компоненте OutlineInput.
<FormControl variant='outlined'>
<OutlinedInput notched = {false} />
</FormControl>
Переключение свойства notched с false на true визуально ничего не меняет.
Кроме того, поскольку я не носитель английского языка, я совершенно не понимаю, что он должен делать.
🤔 А знаете ли вы, что...
HTML поддерживает механизмы для встраивания JavaScript-кода для создания интерактивных элементов.
Свойство notched имеет видимый эффект только в сочетании со свойством labelWidth. Когда notched имеет значение true, он оставляет пробел в контуре, где размещается метка, когда свойство shrink метки равно true. Как правило, нет необходимости явно использовать свойства notched, labelWidth или shrink. Если вы используете TextField (вместо более низкого уровня OutlinedInput), все эти детали обрабатываются автоматически.
Вот пример, демонстрирующий это:
import React from "react";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import TextField from "@material-ui/core/TextField";
export default function App() {
return (
<div>
<OutlinedInput notched = {false} labelWidth = {100} />
<br />
<br />
<OutlinedInput notched = {true} labelWidth = {100} />
<br />
<br />
<TextField variant = "outlined" label = "The Label" value = "The Value" />
<br />
<br />
<TextField
variant = "outlined"
InputProps = {{ notched: false }}
label = "The Label"
value = "The Value"
/>
</div>
);
}
Ответ Райана очень хорош. Однако в текущей версии документации v5 это немного отличается. Опора labelWidth больше не поддерживается. На данный момент процесс надреза включает два этапа.
Рабочий процесс, требующий реквизита notched, немного надуманный, так как это означает, что в верхней части поля ввода будет отметка или пробел, независимо от ситуации. Тем не менее, если это ваше требование, вам нужно указать как notched = {true}(или просто notched), так и label = "Whatever your label text is". Компонент предоставит выемку, которая соответствует ширине текста, который вы указали в реквизите label.
<OutlinedInput notched = {true} id = "test" label = "HI" />
Если вы явно не укажете надрез, поведение будет таким, что надрез будет виден, когда ввод будет сфокусирован. Он не будет сохраняться, когда вы щелкнете мышью, независимо от того, есть ли текстовое содержимое в поле ввода.
Более распространенный рабочий процесс включает в себя фактическое предоставление метки для компонента ввода. Это то, что вы должны делать, создавая свои собственные компоненты из компонентов MUI. Здесь вам не нужно указывать опору с надрезом, так как поведение по умолчанию сделает свое дело. Однако вам нужно указать отдельный компонент InputLabel и обернуть оба в FormControl, чтобы выемка была занята требуемой меткой.
<FormControl>
<InputLabel>Label Text</InputLabel>
<OutlinedInput label = "Label Text" />
</FormControl>
Метка будет работать с кодом выше. Однако рекомендуется предоставить атрибуты for и id, чтобы помочь с программами чтения с экрана.
<FormControl>
<InputLabel htmlFor = "test" id = "testlabel">
Label Text
</InputLabel>
<OutlinedInput id = "test" label = "Label Text" />
</FormControl>