資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中建立複雜的按鈕？
在 Web 應用程式中，按鈕對於啟用使用者參與至關重要。有時我們需要使用其應用程式或網站為使用者提供自定義互動。除了 Material UI 提供的具有標準功能的簡單按鈕外，您還可以建立具有尖端功能、獨特樣式和互動行為的複雜按鈕。為了在按鈕中提供自定義互動，我們可以使用 Material UI 中提供的非常酷的 API，即 ButtonBase 元件 API。
在本文中，我們將學習如何在 Material UI 中建立複雜的按鈕。在深入研究本文之前，我們需要建立一個 React 專案並將 Material UI 安裝到其中。因此，讓我們開始並瞭解建立複雜按鈕的完整過程。
建立複雜按鈕的步驟
以下是使用 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 資料夾中有一個主要的 App.js 檔案。開啟它，並新增以下程式碼：
import React from "react";
export default function App() {
return (
…
)
}
步驟 3：匯入 ButtonBase 元件
一旦我們定義了新的元件，就該匯入 ButtonBase 元件了。ButtonBase 元件非常重要，因為 Material UI 中的所有按鈕元件都是基於此元件構建的。以下是匯入按鈕組的語法：
import ButtonBase from "@mui/material/ButtonBase";
步驟 4：使用 ButtonBase 元件
現在，以下是我們如何在使用 Material UI 的 React 中使用 ButtonBase 元件的方法。在此程式碼中，樣式尚未應用。稍後，我們將探討一些使用自定義樣式建立複雜自定義按鈕的示例。
<ButtonBase> … </ButtonBase>
API
<ButtonBase> - ButtonBase API 用於開發自定義按鈕，因為它為我們提供了建立新的修改後的按鈕的構建塊。該元件包含大量的樣式重置以及構建按鈕的邏輯。
屬性
action - 此屬性僅與 focusVisible action 一起用於強制性操作。
centerRipple - 當為 true 時，此屬性用於居中漣漪效果。
children - 此屬性確定元件的內容。
classes - 此屬性用於提供自定義類，可用於覆蓋樣式。
component - 此屬性用於建立一個新元件作為根節點。
disabled - 此屬性用於停用元件。
disabledRipple - 此屬性用於停用漣漪效果。
focusRipple - 當為 true 時，此屬性用於在基本按鈕中聚焦鍵盤漣漪效果。
LinkComponent - 當給出 href 屬性時，此屬性用於呈現連結。
onFocusVisible - 此屬性是一個回撥函式，用於在使用鍵盤聚焦元件時觸發回撥。
sx - 此屬性用於新增自定義樣式，並覆蓋系統 CSS 樣式。
touchRippleRef - 此屬性充當 ref，用於指向 TouchRipple 元素。
示例
在此示例中，我們藉助 ButtonBase 元件 API 建立了一個自定義的複雜按鈕。這是一個非常基本的示例，其中按鈕有一些自定義樣式，例如背景顏色、顏色、填充等，這些樣式是使用 sx 屬性定義的。單擊按鈕時，使用者將轉到 href 屬性中定義的 URL。
import React from "react";
import ButtonBase from "@mui/material/ButtonBase";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<ButtonBase
href="https://tutorialspoint.tw"
aria-label="complex button"
sx={{
backgroundColor: "green",
color: "white",
paddingX: 20,
paddingY: 5,
borderRadius: 4,
fontSize: 40,
"&:hover": {
backgroundColor: "#189E02",
},
}}>
Access
</ButtonBase>
</div>
);
}
輸出
示例
在此示例中，我們藉助 ButtonBase 元件 API 建立了一個自定義的複雜按鈕。建立了三個按鈕，其中相同的背景影像和標籤在資料中定義為陣列。然後，我們首先使用 ButtonBase 元件定義了自定義按鈕元件，並帶有一些寬度、高度和懸停樣式。為了獲得良好的使用者體驗，還添加了背景不透明度以及一些自定義樣式。定義所有樣式後，我們接下來使用 map() 函式新增多個按鈕，其中 <CustomButton> 已用作前面定義的所有其他元件（如 ImageSrc、OpacityDrop 等）的根。
import React from "react";
import { styled } from "@mui/material/styles";
import ButtonBase from "@mui/material/ButtonBase";
const data = [
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg",
img_label: "HTML&CSS basics",
},
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png",
img_label: "Python for Beginners",
},
{
img_url:
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3187/course_3187_image.jpg",
img_label: "Blockchain",
},
];
const CustomButton = styled(ButtonBase)({
position: "relative",
height: 300,
width: 500,
"&:hover, &.Mui-focusVisible": {
zIndex: 1,
"& .MuiImageBackdrop-root": {
opacity: 0.2,
},
"& .MuiImageMarked-root": {
opacity: 0,
},
},
});
const ImageSrc = styled("span")({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: "cover",
backgroundPosition: "center 40%",
});
const OpacityDrop = styled("span")({
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: "black",
opacity: 0.4,
});
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
{data.map((image) => ( //mapping custom button to have multiple buttons
<CustomButton
key={image.img_label}
style={{
width: image.width,
}}
>
{/* adding url of the images, backdrop , and text with custom styles */}
<ImageSrc style={{ backgroundImage: `url(${image.img_url})` }} />
<OpacityDrop className="root" />
<img
alt="images"
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
display: "flex",
alignItems: "center",
justifyContent: "center"
}}
/>
<h1
style={{
position: "relative",
p: 4,
pt: 2,
color: "white",
}}>
{image.img_label}
</h1>
</CustomButton>
))}
</div>
);
}
輸出
在此示例中，當用戶單擊按鈕時，會啟用背景，使用者可以使用按鈕獲得良好的體驗。
結論
在本文中，我們瞭解瞭如何使用 React 在 Material UI 中建立複雜的按鈕。透過為應用程式新增高階功能、我們自己的自定義樣式和互動式使用者體驗，我們可以藉助 Material UI 建立複雜的按鈕。透過組合不同的元素和樣式，我們可以建立符合您的設計規範的互動式、豐富的按鈕。我們看到了建立具有複雜功能和特性的自定義按鈕的完整步驟。除此之外，我們還看到了一些示例，這些示例演示瞭如何使用 ButtonBase API 元件來建立自定義按鈕。
234 次瀏覽
