資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Material UI 中新增帶有圖示和標籤的按鈕？
如果您正在開發一個 React 網頁應用，則很可能需要使用圖示。圖示代表概念、想法、檔案、程式、應用程式、業務等等。為了定義功能的身份，您可以使用圖示。當您不想寫出程式或應用程式的名稱時，合適的圖示可以代表它，以便於識別。
在構建應用程式時，Material UI 提供了可在我們的應用程式中使用的圖示。圖示也可以新增到 Material UI 中的按鈕中。現在，我們將學習如何使用不同的方法在 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 資料夾中有一個 main App.js 檔案。開啟它，並新增以下程式碼：
import React from "react";
export default function App() {
return (
…
)
}
步驟 3：匯入 Button 或 IconButton 元件
定義新元件後，是時候匯入 button 或 IconButton 元件了。以下是匯入按鈕組的語法：
import Button from "@mui/material/Button";
或者
import IconButton from "@mui/material/IconButton";
步驟 4：拆分 ButtonGroup 元件
<Button aria-label="contained" variant="contained" startIcon={<IconName />}>
Label
</Button>
或者
<IconButton aria-label="small" size="small"> <TextIncrease fontSize="small" /> </IconButton>
API
<IconButton> − IconButton API 用於在 Material UI 中使用帶有標籤的圖示按鈕。它具有不同的 props 用於修改圖示的顏色、大小等。
<Button> − Button API 用於在 Material UI 中新增按鈕。它具有不同的 props 用於修改圖示的顏色、大小、變體等。
屬性 (Props)
startIcon − 此屬性用於在子元素之前新增起始元素，例如在文字標籤之前放置圖示。
color − 此屬性用於為圖示新增不同的顏色，包括 primary、secondary、success、warning、error、info 等。
size − 此屬性用於新增不同大小的圖示，例如 small 和 large。
area-label − 此屬性用於為缺少可見文字的元素提供描述性標籤。
fontSize − 此屬性用於更改字型大小。
variant − 此屬性用於檢查元件的預定義樣式，從而可以輕鬆自定義其外觀和行為。
方法 1：帶有標籤的圖示按鈕
在 Material UI 中新增帶有圖示和標籤的按鈕的第一種方法是使用 IconButton 元件。工具欄和應用欄中經常包含圖示按鈕。圖示也適合於允許選擇或取消選擇單個選擇的切換按鈕，例如向專案新增或刪除星標。
語法
以下是 Material UI 中新增帶有標籤的圖示按鈕的語法。
<IconButton aria-label="add" color="info"> <PlusIcon /> </IconButton>
示例
以下示例演示了不同大小的圖示按鈕。可以使用不同的大小來更改圖示按鈕元件，包括 small、medium 和 large。
import React from "react";
import IconButton from '@mui/material/IconButton';
import { TextIncrease } from "@mui/icons-material";
export default function App() {
return (
<>
<h1>Icon Button</h1>
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<IconButton aria-label="small" size="small">
<TextIncrease fontSize="small" />
</IconButton>
<IconButton aria-label="small" size="small">
<TextIncrease fontSize="small" />
</IconButton>
<IconButton aria-label="default">
<TextIncrease fontSize="medium" />
</IconButton>
<IconButton aria-label="default">
<TextIncrease fontSize="medium" />
</IconButton>
<IconButton aria-label="large" size="large">
<TextIncrease fontSize="large" />
</IconButton>
<IconButton aria-label="large" size="large">
<TextIncrease fontSize="large" />
</IconButton>
</div>
</>
);
}
輸出
示例
以下示例演示了不同顏色的圖示按鈕。我們還可以透過向按鈕新增不同的顏色來自定義我們的圖示按鈕元件，這將修改圖示和文字顏色。
import React from "react";
import IconButton from '@mui/material/IconButton';
import { TextIncrease } from "@mui/icons-material";
export default function App() {
return (
<>
<h1>Icon Button</h1>
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<IconButton aria-label="small" size="small" color="error">
<TextIncrease fontSize="small" />
</IconButton>
<IconButton aria-label="small" size="small" color="info">
<TextIncrease fontSize="small" />
</IconButton>
<IconButton aria-label="default" color="inherit">
<TextIncrease fontSize="medium" />
</IconButton>
<IconButton aria-label="default" color="primary">
<TextIncrease fontSize="medium" />
</IconButton>
<IconButton aria-label="large" size="large" color="secondary">
<TextIncrease fontSize="large" />
</IconButton>
<IconButton aria-label="large" size="large" color="warning">
<TextIncrease fontSize="large" />
</IconButton>
</div>
</>
);
}
輸出
方法 2：帶有圖示和標籤的按鈕
在 Material UI 中新增帶有圖示和標籤的按鈕的另一種方法是使用帶有 startIcon 屬性的 Button 元件。startIcon 是一個節點型別的屬性，用於在子元素之前放置元素，例如在文字之前放置圖示，如下所示。
語法
以下是 Material UI 中新增帶有圖示和標籤的按鈕的語法。
<Button variant="outlined" startIcon={<PlusIcon />}>
Add
</Button>
示例
以下示例演示了不同大小的帶有圖示和標籤的按鈕。
import React from "react";
import Button from "@mui/material/Button";
import PersonAddAlt1Icon from "@mui/icons-material/PersonAddAlt1";
export default function App() {
return (
<>
<h1>Icon Button</h1>
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon fontSize="small" />}
size="small">
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon />}
size="small" >
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon />}>
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon />}>
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon fontSize="large" />}
size="large">
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon fontSize="large" />}
size="large">
Add user
</Button>
</div>
</>
);
}
輸出
示例
以下示例演示了不同顏色和變體的帶有圖示和標籤的按鈕。
import React from "react";
import Button from "@mui/material/Button";
import PersonAddAlt1Icon from "@mui/icons-material/PersonAddAlt1";
export default function App() {
return (
<>
<h1>Icon Button</h1>
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
}} >
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon fontSize="small" />}
color="error"
size="small">
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon />}
color="info"
size="small">
Add user
</Button>
<Button
aria-label="contained"
variant="contained"
startIcon={<PersonAddAlt1Icon />}
color="inherit">
Add user
</Button>
<Button
aria-label="outline"
variant="outlined"
startIcon={<PersonAddAlt1Icon />}
color="warning">
Add user
</Button>
<Button
aria-label="outline"
variant="outlined"
startIcon={<PersonAddAlt1Icon fontSize="large" />}
color="primary"
size="large">
Add user
</Button>
<Button
aria-label="outline"
variant="outlined"
startIcon={<PersonAddAlt1Icon fontSize="large" />}
size="large"
color="secondary">
Add user
</Button>
</div>
</>
);
}
輸出
2K+ 瀏覽量
