資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中處理切換按鈕的多選？
在本文中，我們將處理 Material UI 中切換按鈕的多選。為了確保使用者體驗流暢且易於理解，在切換按鈕組中處理多個切換按鈕的選擇需要仔細實現。
什麼是切換按鈕？
切換按鈕不僅在 MUI 中，而且在 Bootstrap 等各種其他 CSS 框架中都是非常流行的元件，它提供了一種在兩個或多個選項之間進行選擇的方法。在 MUI 中，這些按鈕統稱為 ToggleButtonGroup。一組連線的切換按鈕應該透過共享一個容器來突出顯示。當賦予其自己的 value 屬性時，ToggleButtonGroup 會調節構成其子元素的按鈕的選擇狀態。
ToggleButton API
ToggleButton API 用於將切換按鈕整合到 React MUI 中。它帶有以下屬性 -
value - 它是必不可少的，因為它建立了按鈕與其選擇狀態之間的聯絡。
children - 我們可以使用“children”屬性在切換按鈕中新增任何所需的內容。
classes - classes 屬性用於覆蓋元件的樣式。
color - color 屬性用於新增不同的切換按鈕顏色。
disabled - 透過設定此屬性，我們可以停用切換按鈕功能。
disableFocusRipple - disabledFocusRipple 屬性用於停用鍵盤焦點波紋效果。
fullWidth - fullWidth 屬性用於為切換按鈕新增全寬。
onChange - 它允許您定義一個回撥函式，該函式在觸發時會更改按鈕狀態。
onClick - 使用 onClick 屬性指定在單擊按鈕時執行的回撥函式。
selected - selected 屬性用於呈現活動的切換狀態。
size - size 屬性用於更改切換按鈕的大小。
sx - 要為此元件新增自定義樣式，請使用“sx”屬性。
多選所需步驟
以下是處理 Material UI 中切換按鈕的多選步驟 -
步驟 1：建立 React 應用程式
在 MUI 中處理切換按鈕的多選的第一步是建立一個 React 應用程式。要建立一個新的 React 應用程式，請在您的終端中執行以下命令 -
npx create react app togglebuttonsproject
專案建立完成後，透過執行以下命令導航到其目錄 -
cd togglebuttonsproject
步驟 2：將 MUI 新增到 React
建立 React 應用程式後，是時候將 Material UI 安裝到 React 應用程式中了。要安裝 MUI，請執行以下命令 -
npm install @mui/material @emotion/react @emotion/styled
步驟 3：建立處理程式
為了管理選擇，在 React MUI 中，我們將首先使用 hook 設定狀態。然後，我們將建立一個函式來處理選擇並跟蹤切換按鈕的狀態。以下是如何執行此操作的示例 -
const [multiple, setMultiple] = useState(() => ['icon1', 'icon2']);
const handleMultiple = (e, newMultiple) => {
setMultiple(newMultiple);
};
步驟 4：渲染函式
建立函式後，我們現在將在我們的 ToggleButtonGroup 元件中使用它。
<ToggleButtonGroup value={multiple} onChange={handleMultiple} >
<ToggleButton value="bold" aria-label="github">
<GitHub />
</ToggleButton>
…
//Add more toggle buttons here
…
</ToggleButtonGroup>
示例
在此示例中，我們建立了一個基本的切換按鈕，它處理 MUI 中的多選。在這裡，使用者可以同時選擇或選中多個切換按鈕。當按鈕被選中時，按鈕的背景顏色會被突出顯示，反之亦然。
import { useState } from "react";
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { Facebook, GitHub, Instagram, Mail } from "@mui/icons-material";
// App.js main function
export default function App() {
const [multiple, setMultiple] = useState(() => ['github', 'facebook']);
const handleMultiple = (e, newMultiple) => {
setMultiple(newMultiple);
};
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup
value={multiple}
onChange={handleMultiple}
aria-label="social media icons"
>
<ToggleButton value="bold" aria-label="github">
<GitHub />
</ToggleButton>
<ToggleButton value="italic" aria-label="facebook">
<Facebook />
</ToggleButton>
<ToggleButton value="underlined" aria-label="instagram">
<Instagram />
</ToggleButton>
<ToggleButton value="color" aria-label="mail" disabled>
<Mail />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
輸出
示例
在此示例中，我們建立了一個垂直對齊的切換按鈕，它處理 MUI 中的多選。在這裡，使用者可以同時在垂直多個切換按鈕之間進行選擇。當按鈕被選中時，按鈕的背景顏色會被突出顯示，反之亦然。
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { useState } from "react";
import { Facebook, GitHub, Instagram, Mail } from "@mui/icons-material";
export default function App() {
const [multiple, setMultiple] = useState(() => ['github', 'facebook']);
const handleMultiple = (e, newMultiple) => {
setMultiple(newMultiple);
};
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup
value={multiple}
onChange={handleMultiple}
sx={{ width: 100}}
aria-label="social media icons vertical"
orientation="vertical"
>
<ToggleButton value="bold" aria-label="github">
<GitHub />
</ToggleButton>
<ToggleButton value="italic" aria-label="facebook">
<Facebook />
</ToggleButton>
<ToggleButton value="underlined" aria-label="instagram">
<Instagram />
</ToggleButton>
<ToggleButton value="color" aria-label="mail" disabled>
<Mail />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
輸出
示例
在此示例中，我們建立了不同尺寸的切換按鈕組，例如小、中和大，並且可以在 MUI 中處理多選。在這裡，使用者可以選擇同時選中不同尺寸的多個切換按鈕。當按鈕被選中時，按鈕的背景顏色會被突出顯示，反之亦然。
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { Facebook, GitHub, Instagram, Mail } from "@mui/icons-material";
import { useState } from "react";
const App = () => {
const [multiple, setMultiple] = useState(() => ['github', 'facebook']);
const handleMultiple = (e, newMultiple) => {
setMultiple(newMultiple);
};
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup
value={multiple}
onChange={handleMultiple}s
aria-label="social media icons vertical"
>
<ToggleButton value="bold" aria-label="github" size="small">
<GitHub />
</ToggleButton>
<ToggleButton value="italic" aria-label="facebook" size="medium">
<Facebook />
</ToggleButton>
<ToggleButton value="underlined" aria-label="instagram" size="large">
<Instagram />
</ToggleButton>
<ToggleButton value="color" aria-label="mail" disabled>
<Mail />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了自定義切換按鈕，它處理 MUI 中的多選。在這裡，切換按鈕的背景顏色和邊框半徑已使用 ToggleButton 的 MuiToggleButtonGroup-grouped 屬性進行了更改，該屬性允許自定義切換按鈕。
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { styled } from "@mui/material/styles";
import { Facebook, GitHub, Instagram, Mail } from "@mui/icons-material";
import { useState } from "react";
const MyCustomToggleComponentContainer = styled(ToggleButtonGroup)(({ theme }) => ({
'& .MuiToggleButtonGroup-grouped': {
margin: theme.spacing(0.5),
border: 0,
'&.Mui-disabled': {
border: 0,
},
color: 'white',
'&:not(:first-of-type)': {
borderRadius: theme.shape.borderRadius,
},
'&:first-of-type': {
borderRadius: theme.shape.borderRadius,
},
},
}));
const App = () => {
const [multiple, setMultiple] = useState(() => ['github', 'facebook']);
const handleMultiple = (e, newMultiple) => {
setMultiple(newMultiple);
};
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<MyCustomToggleComponentContainer
value={multiple}
onChange={handleMultiple}s
aria-label="social media icons vertical"
sx={{backgroundColor: 'lightgreen', padding: 5}}
>
<ToggleButton value="bold" aria-label="github" size="medium">
<GitHub />
</ToggleButton>
<ToggleButton value="italic" aria-label="facebook" size="medium">
<Facebook />
</ToggleButton>
<ToggleButton value="underlined" aria-label="instagram" size="medium">
<Instagram />
</ToggleButton>
<ToggleButton value="color" aria-label="mail" size="medium" >
<Mail />
</ToggleButton>
</MyCustomToggleComponentContainer>
</div>
);
};
export default App;
輸出
結論
本文討論瞭如何使用 React 在 Material UI 中處理切換按鈕的多選。我們展示了處理選擇的完整步驟，以及此，還討論了不同方法的不同示例。
637 次瀏覽
