資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 Material UI 的複選框中新增標籤？
複選框是使用者介面中的一個關鍵元件，使使用者可以輕鬆選擇選項或表達偏好。有時，使用者會看到多個選項可供選擇，如果沒有合適的標籤，他們可能會感到困惑。為了解決這個問題，可以使用廣受歡迎的 React 元件庫 Material UI 將複選框輕鬆優雅地新增到應用程式中。儘管 Material UI 中的複選框預設情況下沒有標籤，但這有時會導致使用者混淆。
在本文中，我們將學習如何在 Material UI 中建立載入按鈕。在深入研究本文之前，我們需要建立一個 React 專案並將 Material UI 安裝到其中。因此，讓我們開始並檢視建立載入按鈕的完整過程。
什麼是 Material UI 中的複選框？
使用者可以切換一個稱為複選框或選擇框的小型互動式框來指示是或否的決定。它也可以在 Material UI 中找到，作為一個預構建的元件，無需任何額外的 javascript 或功能即可使用，儘管它經常出現在 HTML 輸入表單中。
複選框標籤 API
<Checkbox> - 此 API 用於使用 Material UI 向專案新增複選框元件功能
<FormGroup> - 此 API 提供緊湊的行佈局，有助於包裝不同的表單控制元件，包括複選框。
<FormControlLabel> - 此 API 用於向元件（如單選按鈕、複選框和開關元件）新增額外的標籤。
新增複選框標籤的步驟
以下是使用 React 在 Material UI 中向複選框新增標籤的完整步驟：
步驟 1：建立一個新的 React 應用程式並安裝 MUI
首先，我們必須擁有一個安裝了 Material UI 的 React 應用程式。讓我們透過執行以下命令來建立一個新的 React 應用程式並安裝 Mui：
npx create-react-app myproject cd myproject npm install @mui/material @emotion/react @emotion/styled
步驟 2：定義一個 React 元件
現在，當建立新的 React 應用程式時，在 src 資料夾中有一個 main App.js 檔案。開啟它，並新增以下程式碼：
import React from "react";
export default function App() {
return (
…
)
}
步驟 3：匯入所需的元件
一旦我們定義了新的元件，就該匯入向複選框新增標籤所需的不同的元件了。
import { FormGroup, FormControlLabel', Checkbox } from '@mui/material
上面已經討論了 Material UI 中所有這些元件的詳細說明。
步驟 4：向複選框新增標籤
要在使用 Material UI 的 React 中將標籤新增到複選框中，我們遵循以下步驟。首先，我們使用 FormGroup 元件來分組複選框。然後，我們使用 FormControlLabel 來顯示標籤以及每個複選框。例如，我們將探討標記複選框的方法。
<FormGroup>
<FormControlLabel control={<Checkbox />} label="Add your labels here…" />
…
</FormGroup>
示例
在這個例子中，我們建立了標籤，而沒有使用 FormGroup 或 FormControlLabel API。在 span 標籤內，我們使用 label 標籤來顯示覆選框標籤和複選框，它將其呈現為一行 flex，作為原始複選框標籤。
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'green'}}>Custom label 1</label>
<Checkbox color="success" />
</span>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'red'}}>Custom label 2</label>
<Checkbox color="error" />
</span>
<span style={{display: "flex", justifyContent: 'center', alignItems: 'center'}}>
<label style={{fontSize: 20, color: 'blue'}}>Custom label 3</label>
<Checkbox color="info" />
</span>
</div>
);
}
輸出
示例
在這個例子中，我們使用 FormGroup 或 FormControlLabel API 建立了標籤。為了新增標籤，我們使用了 FormControlLabel 元件，它首先呈現控制元件 - 複選框，除此之外，它還呈現複選框的標籤。
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} label="Allow comments" />
<FormControlLabel control={<Checkbox />} label="Don't allow comments" />
<FormControlLabel required control={<Checkbox />} label="Like the video" />
<FormControlLabel required control={<Checkbox />} label="Subscribe" />
</FormGroup>
</div>
);
}
輸出
示例
在這個例子中，我們使用了 FormGroup 或 FormControlLabel API 來生成標籤。標籤是使用 FormControlLabel 元件新增的，該元件不僅顯示覆選框，還包括它們的標籤。此外，我們還使用了 labelPlacement 屬性來修改標籤位置，允許它們放置在頂部、底部、開頭或結尾。
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox defaultChecked color="success" />}
label="Allow comments"
labelPlacement="start"
/>
<FormControlLabel
control={<Checkbox color="error" />}
label="Don't allow comments"
labelPlacement="top"
/>
<FormControlLabel
required
control={<Checkbox color="success" />}
label="Subscribe"
labelPlacement="end"
/>
<FormControlLabel
required
control={<Checkbox color="info" />}
label="Like the video"
labelPlacement="bottom"
/>
</FormGroup>
</div>
);
}
輸出
示例
在這個例子中，我們使用了 FormGroup 或 FormControlLabel API 來生成標籤。為了包含標籤，我們使用 FormControlLabel 元件。此元件呈現複選框及其相應的標籤。在我們的例子中，我們使用 sx 屬性自定義了標籤的外觀，該屬性應用樣式，從 MuiFormControlLabel label 類到控制因素，例如顏色、fontWeight、fontSize 等。
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import React from "react";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<FormGroup>
<FormControlLabel
control={<Checkbox defaultChecked color="success" />}
label="Allow comments"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'green',
fontSize: '20px',
fontWeight: 'bold'
},
}}
/>
<FormControlLabel
control={<Checkbox color="error" />}
label="Don't allow comments"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'red',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
<FormControlLabel
required
control={<Checkbox color="success" />}
label="Subscribe"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'green',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
<FormControlLabel
required
control={<Checkbox color="info" />}
label="Like the video"
labelPlacement="end"
sx={{
'& .MuiFormControlLabel-label': {
color: 'skyblue',
fontWeight: 'bold',
fontSize: '20px',
},
}}
/>
</FormGroup>
</div>
);
}
輸出
結論
在本文中，我們瞭解瞭如何在 Material UI 中向複選框新增標籤。我們學習了完整的逐步過程，還了解了使用 Material UI 在 React 中新增或自定義標籤的不同方法。為了使您的複選框和標籤與應用程式的設計或 UI 匹配並通常增強使用者體驗，請記住自定義是必不可少的，為此，我們也看到了在示例中 sx 屬性的使用。
467 次瀏覽
