資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Material UI 中更改按鈕組外觀？
在本文中，我們將探討如何自定義 Material UI 中按鈕組的外觀，使其符合您的應用程式需求。Material UI，也稱為 MUI，是由 Google 開發的前端庫。它提供了一套易於使用的 React 元件，可用於 React 和 NextJS 等框架。使用 Material UI，您可以訪問一系列元件，例如按鈕、複選框、選擇器等等。一個名為 ButtonGroup 的特定元件對於分組按鈕特別有用。
按鈕組非常適合透過組織按鈕來增強使用者體驗。您可以建立自己的元件來分組按鈕，也可以使用 Material UI 提供的內建 ButtonGroup 元件。
自定義 ButtonGroup 外觀的步驟
步驟 1：建立一個新的 React 應用程式並安裝 MUI
要開始建立和自定義按鈕組，我們首先必須擁有一個安裝了 Material UI 的 React 應用程式。讓我們建立一個新的 React 應用程式並透過執行以下命令安裝 mui：
npx create-react-app customproject cd customproject 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：匯入 Button Group 元件
一旦我們定義了新的元件，就該匯入按鈕組元件了。以下是匯入按鈕組的語法：
import ButtonGroup from '@mui/material/ButtonGroup';
步驟 4：使用 ButtonGroup 元件
<ButtonGroup variant="contained"> <Button>button 1</Button> <Button>button 2</Button> … </ButtonGroup>
到目前為止，我們已經學習了更改按鈕組外觀的分步過程。現在讓我們看一些自定義不同按鈕組的示例，包括它們的變體、大小、顏色等。
屬性
variant − 此屬性用於更改按鈕組變體，它包含三個不同的變體，即文字、輪廓和填充。
size − 此屬性用於更改按鈕組的大小。它支援的小、中、大尺寸，預設值為中等。
orientation − 此屬性用於更改按鈕組的方向。它可以是垂直或水平的。預設為水平。
color − 此屬性用於更改按鈕組的外觀或顏色。它同時支援預設和自定義主題顏色。它包含的顏色包括 primary、success、info、error、warning、inherit、secondary，預設顏色設定為 primary。
示例
在這個示例中，我們展示瞭如何將按鈕組變體更改為填充。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="contained" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
export default App;
輸出
示例
下面的示例演示了將按鈕組變體更改為輪廓。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
輸出
示例
下面的示例演示了將按鈕組變體更改為文字。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="text" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
輸出
示例
下面的示例演示了更改按鈕組的大小。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="small" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="large" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
輸出
示例
下面的示例演示了更改按鈕組的顏色。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="small" variant="text" color="error" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" color="success" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="large" variant="contained" color="info" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
輸出
示例
下面的示例演示了更改按鈕組的方向。
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="medium" orientation="vertical" variant="contained" color="error" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" color="success" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
輸出
結論
在本文中，我們學習瞭如何自定義和更改按鈕組的外觀。我們查看了用於更改按鈕組外觀的屬性，除此之外，我們還看到了不同的示例，包括使用 variant、color、size 等屬性更改按鈕的樣式。
為了將不同的按鈕組織到一個組中，與使用 flex、grid 等其他方法相比，此元件是最佳選擇。藉助按鈕組元件，還可以實現設計和使用者體驗。
更新於：2023年10月30日
377 次瀏覽
廣告