資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 Material UI 中更改浮動操作按鈕的大小和顏色？
浮動操作按鈕 (FAB) 在每個應用程式中都充當突出的號召性用語按鈕，執行特定操作，例如建立新專案或觸發重要功能。Material UI 是一個流行的 React UI 框架，它提供了一種靈活且可自定義的方式來輕鬆實現 FAB。
在本文中，我們將學習如何使用 React 在 Material UI 中更改浮動操作按鈕的大小和顏色。
什麼是浮動操作按鈕？
在繼續之前，讓我們瞭解什麼是浮動操作按鈕或 FAB。這些按鈕包含在應用程式的使用者介面中，以表示開發人員優先考慮的操作。僅當 FAB 確實是呈現螢幕主要操作的最佳方式時，才應使用 FAB。
通常，建議每個螢幕只有一個 FAB 用於常用操作。FAB 有兩種型別：圓形和擴充套件型。值得注意的是，浮動操作按鈕與按鈕略有不同。
語法
要更改浮動操作按鈕的大小和顏色，我們使用兩個屬性：size 和 color。語法如下：
<Fab color="error" size="small"> + </Fab>
更改 FAB 顏色和大小的步驟
下面，我們概述了使用 React 在 Material UI 中更改浮動操作按鈕的顏色和大小的分步過程。
步驟 1：建立一個新的 React 應用程式並安裝 MUI
首先，讓我們從建立一個 React 應用程式和安裝 Material UI 開始。請按照以下步驟操作：
開啟您的終端並執行以下命令：
npx create react app projectname
專案建立後，透過執行以下命令導航到專案目錄：
cd projectname
透過執行以下命令安裝 Material UI 及其依賴項：
npm install @mui/material @emotion/react @emotion/styled
步驟 2：將所需元件匯入 React
現在，建立新的 React 應用程式後，在 src 資料夾中有一個 main App.js 檔案。開啟它並匯入所需的元件。
import React from "react";
import { Fab } from '@mui/material
export default function App() {
return (
)
}
現在我們已經完成了建立和匯入所需元件的所有步驟。讓我們探索一些示例，這些示例說明了使用不同方法更改浮動操作按鈕的大小和顏色的方法。
浮動操作按鈕 API
<Fab> - 此 API 用於使用 Material UI 向專案新增浮動操作按鈕。
屬性
children - 此屬性定義 FAB 的內容。
classes - 此屬性用於覆蓋或向元素新增樣式。
color - 此屬性用於向浮動操作按鈕新增顏色。它包括 primary、secondary、success、info、error、warning 等。
component - 此屬性定義 FAB 的元件。
disableFocusRipple - 如果此屬性設定為 true，則鍵盤焦點將不會出現漣漪效果。
disabled - 此屬性用於停用 FAB。
disableRipple - 此屬性用於停用 FAB 的漣漪效果。
href - 這定義了單擊 FAB 時將跳轉到的 URL。
size - 此屬性用於更改 FAB 的大小。
sx - 此屬性用於向 Material UI 元件新增自定義樣式。
variant - 此屬性用於選擇要使用的 FAB，例如圓形、字串或字串。
示例
在此示例中，我們建立了一些具有不同大小的基本浮動操作按鈕，包括小、中和大（這是預設大小，在 size 屬性中不必使用）。
import { AddCircleOutline } from "@mui/icons-material";
import { Fab } from "@mui/material";
import * as React from "react";
const App = () => {
return (
<div>
<div style={{
display: "flex",
flexDirection: "row",
gap: 10,
justifyContent: "center",
alignItems: "center",
}}>
<Fab size="small" aria-label="add">
<AddCircleOutline />
</Fab>
<Fab size="medium" aria-label="add">
<AddCircleOutline />
</Fab>
<Fab aria-label="add">
<AddCircleOutline />
</Fab>
</div>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了具有不同大小的“擴充套件”變體浮動操作按鈕，包括小、中和大（這是預設大小，在 size 屬性中不必使用）。
import { AddCircleOutline } from "@mui/icons-material";
import { Fab } from "@mui/material";
import * as React from "react";
const App = () => {
return (
<div>
<h2 style={{ color: "green" }}>How to change size and colors of Floating Action Button in Material UI
using React</h2>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 10,
justifyContent: "center",
alignItems: "center",
}}>
<Fab size="small" aria-label="add" variant="extended">
<AddCircleOutline sx={{pr: 1}} />
Add
</Fab>
<Fab size="medium" aria-label="add" variant="extended">
<AddCircleOutline sx={{pr: 1}} />
Add
</Fab>
<Fab aria-label="add" variant="extended" >
<AddCircleOutline sx={{pr: 1}} />
Add
</Fab>
</div>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們設計了一個名為“variant”的浮動操作按鈕版本。它有多種尺寸和顏色，包括小、中和大（儘管預設大小不必使用）。可用的顏色包括 info、error 和 success。
import { AddCircleOutline, Send } from "@mui/icons-material";
import { Fab } from "@mui/material";
import * as React from "react";
const App = () => {
return (
<div>
<h2 style={{ color: "green" }}>
How to change size and colors of Floating Action Button in Material UI
using React
</h2>
<div
style={{
display: "flex",
gap: 10,
justifyContent: "center",
alignItems: "center",
}}>
<Fab size="small" color="info" aria-label="add" variant="circular">
<Send />
</Fab>
<Fab size="medium" color="error" aria-label="add" variant="circular">
<Send />
</Fab>
<Fab aria-label="add" color="success" variant="circular" >
<Send />
</Fab>
</div>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了各種浮動操作按鈕，其顏色包括 info、error、default、primary、secondary、warning 和 success。
import { AddCircleOutline, Send } from "@mui/icons-material";
import { Fab } from "@mui/material";
import * as React from "react";
const App = () => {
return (
<div>
<h2 style={{ color: "green" }}>
How to change size and colors of Floating Action Button in Material UI using React
</h2>
<div
style={{
display: "flex",
gap: 10,
justifyContent: "center",
alignItems: "center",
}}>
<Fab color="default" aria-label="add" variant="extended">
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="error" aria-label="add" variant="extended">
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="info" aria-label="add" variant="extended" >
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="inherit" aria-label="add" variant="extended">
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="primary" aria-label="add" variant="extended">
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="secondary" aria-label="add" variant="extended" >
<Send sx={{pr: 1}} />
Send message
</Fab>
<Fab color="warning" aria-label="add" variant="extended" >
<Send sx={{pr: 1}} />
Send message
</Fab>
</div>
</div>
);
};
export default App;
輸出
結論
在當今的使用者介面設計中，浮動操作按鈕是可以在應用程式中與動畫一起使用的元素。本文提供了一個指南和示例，說明如何更改這些按鈕的顏色和大小。Material UI 提供了自定義選項，以確保浮動操作按鈕與應用程式的外觀和感覺相匹配。透過根據專案需求修改 Material UI 浮動操作按鈕的大小和顏色，您可以為使用者提供簡單而美觀的使用者體驗。
瀏覽量：312
