資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 Material UI 中更改切換按鈕的方向、顏色和大小？
為了提供良好的使用者體驗，新增到網站的不同元件的顏色和大小起著重要的作用。React MUI 允許您使用文件中提供的一些 props 來輕鬆更改切換按鈕的方向、顏色和大小。在本文中，我們將學習如何在 Material UI 中更改切換按鈕的方向、顏色和大小。
但在深入瞭解更改這些屬性的步驟之前，讓我們首先了解切換按鈕到底是什麼。
什麼是切換按鈕？
切換按鈕不僅在 MUI 中，而且在 Bootstrap 等各種其他 CSS 框架中都是非常流行的元件，它們提供了一種在兩個或多個選項之間進行選擇的方法。在 MUI 中，這些按鈕統稱為切換按鈕組。一組連線的切換按鈕應透過共享容器來突出顯示。
ToggleButton API
ToggleButton API 用於將切換按鈕整合到 React MUI 中。它帶有以下 props：
value − 這非常重要，因為它在按鈕及其選中狀態之間建立了連線。
children − 我們可以使用“children” prop 在切換按鈕中新增任何所需的內容。
classes − classes prop 用於覆蓋元件的樣式。
color − color prop 用於新增不同的切換按鈕顏色。
disabled − 透過設定此 prop，我們可以停用切換按鈕的功能。
disableFocusRipple − disableFocusRipple prop 用於停用鍵盤焦點漣漪效果。
fullWidth − fullWidth prop 用於向切換按鈕新增全寬。
onChange − 它允許您定義一個回撥函式，該函式在觸發時會更改按鈕狀態。
onClick − 使用 onClick prop 指定在單擊按鈕時執行的回撥函式。
selected − selected prop 用於呈現活動的切換狀態。
size − size prop 用於更改切換按鈕的大小。
sx − 要為此元件新增自定義樣式，請使用“sx” prop。
更改功能所需的步驟
以下是更改 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：更改功能
要更改切換按鈕的方向、大小和顏色，我們將使用一些 props，例如 orientation、size 和 color 以及它們各自的值。以下是相同的語法：
<ToggleButtonGroup orientation="vertical">
<ToggleButton color="success" >
<IconName />
</ToggleButton>
<ToggleButton size="medium" color="success" >
<IconName />
</ToggleButton>
</ToggleButtonGroup>
示例
在此示例中，我們只更改了切換按鈕的顏色。為了更改顏色，我們使用了 'color' prop，它允許更改顏色，包括 success、primary、secondary、info、standard、warning 和 error。要更改切換按鈕的顏色，我們必須在
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
import Send from "@mui/icons-material/Send";
const App = () => {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup aria-label="file creation" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們更改了切換按鈕的顏色和大小。為了更改大小，我們使用了 'size' prop，它允許更改大小，包括 small、medium 和 large。要更改切換按鈕的大小，我們必須在
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
const App = () => {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
}}>
<ToggleButtonGroup aria-label="file creation" color="primary">
<ToggleButton color="info" size="small" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" size="medium" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" size="large" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們更改了切換按鈕的方向。為了更改方向，我們使用了 'orientation' prop，它允許我們更改方向為垂直或水平方向。我們僅在 ToggleButtonGroup 元件中使用此 prop，因為這裡有多個分組的切換按鈕，這使得一次更改方向更容易。
//App.js file
import React from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import CreateNewFolder from "@mui/icons-material/CreateNewFolder";
import Save from "@mui/icons-material/Save";
import CloudUpload from "@mui/icons-material/CloudUpload";
import Send from "@mui/icons-material/Send";
function App() {
return (
<div
style={{
padding: 40,
display: "flex",
flexDirection: "column",
gap: 20,
width: 50
}}>
<ToggleButtonGroup orientation="vertical" aria-label="file-vertical" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup orientation="horizontal" aria-label="horizontal" color="primary">
<ToggleButton color="info" value="create-new" aria-label="create">
<CreateNewFolder color="info" />
</ToggleButton>
<ToggleButton color="primary" value="save" aria-label="save">
<Save color="primary" />
</ToggleButton>
<ToggleButton color="success" value="cloud-upload" aria-label="cloud-upload">
<CloudUpload color="success" />
</ToggleButton>
<ToggleButton color="warning" value="send" aria-label="send">
<Send color="warning" />
</ToggleButton>
</ToggleButtonGroup>
</div>
);
};
輸出
結論
在本文中，我們學習瞭如何在 React MUI 中更改切換按鈕的方向、顏色和大小。本文展示了更改給定功能的完整步驟以及語法。我們還看到了不同的示例，展示瞭如何在切換按鈕中更改顏色、大小和方向。
743 次瀏覽
