資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中分割按鈕組？
Material UI，也稱為 MUI，是由 Google 開發的前端庫。它提供了一系列可在各種框架（如 React 和 NextJS）中使用的 React 元件。Material UI 庫包含一個名為“buttongroup”的元件，它允許將兩個或多個按鈕組合在一起。如果我們希望將這些按鈕分開，我們該如何實現呢？利用 Button Group 元件可以很好地建立按鈕。使用下拉選單更改按鈕的操作，或者您可以將其用於立即啟動相關操作。
在 React 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：匯入 Button Group 元件
一旦我們定義了新的元件，就該匯入按鈕組元件了。以下是匯入按鈕組的語法：
import ButtonGroup from '@mui/material/ButtonGroup'; import Divider from '@mui/material/Divider;
步驟 4：分割 ButtonGroup 元件
<ButtonGroup variant="contained"> <Button>button 1</Button> <Button>button 2</Button> <Divider orientation="vertical" flexItem /> <Button>button 3</Button> <Button>button 4</Button> … </ButtonGroup>
到目前為止，我們已經學習了使用常用且最簡單的方法分割按鈕組的分步過程。現在讓我們看看使用不同方法分割按鈕組的一些示例。
ButtonGroup API
<ButtonGroup> - 按鈕組 API 或元件用於對相關的按鈕進行分組，並提供如下所述的所有 props。
Props
children - 此 prop 確定元件的內容。
classes - 此 prop 用於提供可用於覆蓋樣式的自定義類。
color - 此 prop 用於更改顏色。
disabled - 此 prop 用於停用元件。
disableRipple - 此 prop 用於停用波紋效果。
fullwidth - 此 prop 用於定義按鈕組的完整寬度。
orientation - 此 prop 用於更改按鈕組的方向。
size - 此 prop 用於更改按鈕組的大小。
sx - 此 prop 用於新增自定義樣式，並覆蓋系統 CSS 樣式。
variant - 此 prop 用於更改按鈕組的變體，如 contained、outlined 和 text。
方法 1：新增 <Divider>
示例
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import { Divider } from "@mui/material";
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="medium" variant="contained">
<Button>Button 1</Button>
<Divider orientation="vertical" />
<Button>Button 2</Button>
<Divider orientation="vertical" />
<Button>Button 3</Button>
</ButtonGroup>
</div>
);
}
輸出
方法 2：新增下拉選單
另一種方法是在分割按鈕組中使用下拉選單。下拉選單可以更改按鈕操作或用於立即觸發相關操作。在這種方法中，我們將使用
示例
以下示例演示了按鈕組的分割。
import React from "react";
import { Button, ButtonGroup } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Grow from "@mui/material/Grow";
import Popper from "@mui/material/Popper";
import MenuItem from "@mui/material/MenuItem";
import MenuList from "@mui/material/MenuList";
import { useRef } from "react";
import { useState } from "react";
export default function App() {
const listItems = [
"Java",
"Python",
"C++"
];
const arRef = useRef(null);
const [popperOpen, setPopperOpen] = useState(false);
const [selId, setSelId] = useState(1);
const handleItemPress = (e, index) => {
setSelId(index);
setPopperOpen(false);
};
const handleClose = (e) => {
if (arRef.current && arRef.current.contains(e.target)) {
return;
}
setPopperOpen(false);
};
const handleOpen = () => {
setPopperOpen((prevOpen) => !prevOpen);
};
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<ButtonGroup
variant="contained"
color="info"
ref={arRef}>
<Button>{listItems[selId]}</Button>
<Button
size="medium"
onClick={handleOpen}>
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper
transition
open={popperOpen}
anchorEl={arRef.current}>
{({ TransitionProps }) => (
<Grow
{...TransitionProps}
>
<div style={{backgroundColor: 'lightblue', colro: 'white', padding: 2}}>
<ClickAwayListener onClickAway={handleClose}>
<MenuList id="split-button-menu">
{listItems.map((item, i) => (
<MenuItem
key={item}
onClick={(e) => handleItemPress(e, i)}>
{item}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</div>
</Grow>
)}
</Popper>
</div>
);
}
輸出
示例
以下示例演示了滑鼠懸停時按鈕組的分割。
import React from "react";
import { Button, ButtonGroup } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Grow from "@mui/material/Grow";
import Popper from "@mui/material/Popper";
import MenuItem from "@mui/material/MenuItem";
import MenuList from "@mui/material/MenuList";
import { useRef } from "react";
import { useState } from "react";
export default function App() {
const listItems = ["Java", "Python", "C++"];
const arRef = useRef(null);
const popperTimerRef = useRef(null);
const [hoverPopper, setHoverPopper] = useState(false);
const [selId, setSelId] = useState(1);
const handleItemPress = (e, index) => {
setSelId(index);
setHoverPopper(false);
};
const handleClose = (e) => {
if (arRef.current && arRef.current.contains(e.target)) {
return;
}
setHoverPopper(false);
};
const handleHoverOpen = () => {
setHoverPopper(true);
};
const handleHoverEnter = () => {
popperTimerRef.current = setTimeout(() => {
setHoverPopper(true);
}, 100);
};
const handleHoverClose = () => {
clearTimeout(popperTimerRef.current);
setHoverPopper(false);
};
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10,
}}>
<ButtonGroup variant="contained" color="info" ref={arRef}>
<Button>{listItems[selId]}</Button>
<Button
size="medium"
onClick={handleHoverOpen}
onMouseEnter={handleHoverEnter}
onMouseLeave={handleHoverClose}>
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper transition open={hoverPopper} anchorEl={arRef.current}>
{({ TransitionProps }) => (
<Grow {...TransitionProps}>
<div
style={{
backgroundColor: "lightblue",
color: "blue",
}}>
<ClickAwayListener onClickAway={handleClose}>
<MenuList id="split-button-menu">
{listItems.map((item, i) => (
<MenuItem key={item} onClick={(e) => handleItemPress(e, i)}>
{item}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</div>
</Grow>
)}
</Popper>
</div>
);
}
輸出
結論
為了建立視覺上獨特且有組織的使用者介面，我們已經研究瞭如何在 Material UI 中分割按鈕組。為了獲得所需的分割按鈕組效果，使用分隔符或自定義樣式非常簡單。在基於 React 的專案中，Material UI 的靈活性以及大量元件使我們能夠建立具有吸引力和功能性的 UI 元素。為了增強您的使用者體驗，此知識將使您能夠自信地設計和實現分割按鈕組。
更新於：2023年10月30日
478 次檢視
廣告