数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Material UI 中修改自动完成的不同尺寸？
流行的 React UI 框架 Material UI 提供了一系列具有现代简约设计的组件。其一项功能是自动完成，可在用户使用输入字段时提供有益的建议。由于其适应性，此组件易于定制，包括更改其大小以更好地适应应用程序的特定设计需求。
在本文中，我们将重点了解如何调整 Material UI 的自动完成组件的大小。但是，除了尺寸调整之外，此自适应组件还提供了各种自定义选项。您可以更改组件的外观、行为和样式以满足应用程序的要求。例如，可以自定义自动完成的颜色、形状和布局以匹配所需的美感。在本文中，我们只关注自动完成组件的调整大小方面。
更改尺寸的步骤
以下是使用 React 更改 Material UI 自动完成组件中尺寸所需的步骤：
步骤 1. 导入 Material UI 及其模块
要在 Material UI 中使用值，关键步骤是导入必要的组件和模块。在本例中，我们需要导入 TextField 组件来呈现输入，并从 MUI 导入 Autocomplete 组件来使用其功能。
import TextField from "@mui/material/TextField"; // This imports the text field component used to display user input. import Autocomplete from "@mui/material/Autocomplete"; // Here we are importing the functionality, from MUI.
步骤 2. 使用 Autocomplete 组件
将组件导入我们的 React 项目后，我们可以继续在我们的 React 应用程序中定义该组件。
<Autocomplete
multiple
options={data}
renderInput={(params) => (
<TextField
{...params}
label="add your label"
placeholder="add your placeholder"
/>
)}
/>
步骤 3. 添加 size 属性
为了更改自动完成组件中的尺寸，必须使用“size”属性。正如我们从上面的 size 属性中看到的那样，组件可以更改为两种尺寸。下面的语法演示了 size 属性的使用：
<Autocomplete
multiple
options={data}
size="small | medium"
renderInput={(params) => (
<TextField
{...params}
label="add your label"
placeholder="add your placeholder"
/>
)}
/>
Size 属性
“size”属性在 Material UI 自动完成组件的自定义过程中起着关键作用。size 属性中有两个不同的选项可以修改输入的自动完成大小，让我们详细了解这两个选项：
small - 在此选项中，自动完成组件的大小与普通尺寸相比提供了一个较小的输入框。它主要用于向应用程序添加响应能力。
<Autocomplete size="small"… />
medium - size 属性的 medium 选项在 Material UI 中默认使用，并且常用在使用 Material UI 构建的每个应用程序中。
<Autocomplete size="medium"… />
需要注意的是，medium 尺寸是自动完成组件的默认设置，并且由于其全面性而被广泛应用于各种应用程序中。
示例
在这个例子中，我们使用了 size 属性和 small 选项来修改自动完成组件。给定的组件只能选择较小尺寸中的一个值。
import React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
const [value, setValue] = React.useState("");
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
sx={{ width: "30%" }}
options={data}
size="small"
getOptionLabel={(options) => options.label}
renderInput={(params) => (
<TextField
{...params}
label="Select language"
placeholder="Programming languages"
/>
)}
/>
</div>
);
}
输出
示例
在这个例子中，我们使用了 size 属性和 small 选项来修改自动完成组件。给定的组件使用“multiple”属性在较小尺寸中选择多个值。
import React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
const data = [
{ label: "Java language" },
{ label: "Python language" },
{ label: "C++ language" },
{ label: "C language" },
{ label: "Go language" },
{ label: "JavaScript language" },
{ label: "SQL" },
{ label: "MySQL" },
{ label: "HTML" },
{ label: "CSS" },
{ label: "Nextjs " },
{ label: "ReactJS " },
{ label: "VueJS " },
{ label: "Angular " },
{ label: "Angular JS " },
{ label: "PHP language" },
{ label: "R language" },
{ label: "Objective C language" },
{ label: "Cobol language" },
{ label: "Perl language" },
{ label: "Pascal language" },
{ label: "LISP language" },
{ label: "Fortran language" },
{ label: "Swift language" },
{ label: "Ruby language" },
{ label: "Algol language" },
{ label: "Scala language" },
{ label: "Rust language" },
{ label: "TypeScript language" },
{ label: "Dart language" },
{ label: "Matlab language" },
{ label: "Ada language" },
{ label: ".NET language" },
{ label: "Bash language" },
];
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}>
<Autocomplete
sx={{ width: "30%" }}
multiple
options={data}
size="small"
getOptionLabel={(options) => options.label}
renderInput={(params) => (
<TextField
{...params}
label="Select language"
placeholder="Programming languages"
/>
)}
/>
</div>
);
}
输出
结论
本文向我们展示了如何更改 Material UI 自动完成组件的各种尺寸。我们首先构建了一个简单的自动完成组件，然后使用 TextField 组件的“size”属性更改其大小。您可以在官方文档中进一步探索这些选项。Material UI 为自动完成组件提供了广泛的自定义选项。
1K+ 次浏览
