資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
