汽贸做网站有用处吗,网站建设模块方案书,泰安百度做网站的,建设银行信用卡网站下载Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图… Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图标按钮1、带有图标的按钮 一、安装Material UI
首先我们创建React工程。然后安装样式和字体。下面使用yarn安装
//Material UI
yarn add mui/material emotion/react emotion/styled
//styled-components
yarn add mui/material mui/styled-engine-sc styled-components
//安装Roboto字体
yarn add fontsource/roboto
//安装MUI图标
yarn add fontsource/roboto//在public index.html引入google字体样式
link relpreconnect hrefhttps://fonts.googleapis.com /
link relpreconnect hrefhttps://fonts.gstatic.com crossorigin /
link relstylesheet hrefhttps://fonts.googleapis.com/css2?familyRoboto:wght300;400;500;700displayswap/
//在public index.html引入google MUI字体样式
link relstylesheet hrefhttps://fonts.googleapis.com/icon?familyMaterialIcons/
二、 组件
我们先学习MUI的组件
1、Button组件
1、基础按钮
最基本的button按钮定义
import {Button} from mui/material;
function App() {return (divButton这是一个按钮/Button/div);
}
export default App; 可以看出最基本的按钮没有边框字体默认是蓝色的其鼠标点击上去有背景颜色是淡蓝色。其他的就没有什么了。
2、variant属性
序号属性值含义1text文本按钮这个是按钮的默认属性。文本按钮 通常用于不太明显的动作包括那些位于对话框、卡片中的动作。 在卡片中文本按钮有助于保持卡片内容的重点。2contained包含按钮。包含按钮 是高度强调的以其使用的抬高和填充来区分。 它们包含对你的应用来说是主要的操作。3outlined轮廓按钮。轮廓按钮也是包含按钮的一种较低强调度的选择 或者更强调文本按钮的替代品。
代码演示
Button varianttext这是一个文本按钮/Button
Button variantcontained这是包含按钮/Button
Button variantoutlined这是轮廓按钮/Button3、禁用按钮
加上disabled属性可以禁用按钮。默认是true。false就不是禁用了。
Button varianttext disabled禁用文本按钮/Button4、可跳转的按钮
加尚href属性可以进行跳转
Button varianttext href#禁用文本按钮/Buttonimport {Button} from mui/material;
function App() {return (divButton varianttext这是一个文本按钮/ButtonButton varianttext disabled禁用文本按钮/ButtonButton varianttext href#禁用文本按钮/Button/div);
}
export default App;5、disableElevation属性
disableElevation是禁用阴影的意思。加上此属性那么点击按钮没有阴影。 默认的按钮点击之后都存在阴影左边的按钮是默认的按钮右边的加了disableElevation属性因此右边的点击没有阴影
6、按钮的点击事件onClick
import {Button} from mui/material;function App() {const showData () {alert(按钮被点击了);}return (divButton onClick{showData} variantcontained按钮/Button/div);
}export default App;上面的代码也可以简写
import {Button} from mui/material;
function App() {return (divButton onClick{(){alert(按钮被点击)}} variantcontained按钮/Button/div);
}
export default App;2、Button按钮的颜色和尺寸
1、Button按钮的颜色
按钮使用color属性即可设置值color“primary” 默认的按钮属性值有7个
序号属性值含义1color“inherit”按钮文字的颜色取决于父组件的颜色2color“primary”强调重要行为的按钮1color“secondary”次要行为的按钮1color“success”显示操作成功的按钮1color“error”显示操作错误的按钮1color“info”陈述按钮1color“warning”警告按钮 |
2、按钮自定义颜色
使用Theme自定义颜色 创建Theme.jsx文件编写自定义的样式
import {createTheme} from mui/material;
export const theme createTheme({palette: {primary: {main: #000000,},secondary: {main: #F5EBF7,light: #F5EBFF,contrastText: #47008F,},},
});在index中使用ThemeProvider引入theme
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;
import reportWebVitals from ./reportWebVitals;
import {ThemeProvider} from mui/material;
import {theme} from ./Themeconst root ReactDOM.createRoot(document.getElementById(root));
root.render(React.StrictModeThemeProvider theme{theme}App //ThemeProvider/React.StrictMode
);reportWebVitals();最后在按钮中应用
import {Button, Stack} from mui/material;function App() {return (div Stack spacing{3}Button variantcontained colorprimary主要的按钮/Button/Stack/div);
}
export default App;由于自定义的primary为黑色所以最终按钮呈现黑色
疑惑点Button好像颜色属性只能从那7个属性值去选择。虽然可以自定义7个属性值的颜色。但是无法使用main、light、dark更为详细的定义。Box就可以定义具体的色调
export const theme createTheme({palette: {primary: {main: #000000,light: #F5EBF7,contrastText: #80ff80,/*文本颜色*/},secondary: {main: #F5EBF7,light: #F5EBFF,contrastText: #47008F,},},
});也就是说Button组件默认就是main。不知道如何使用light。
3、Button按钮的尺寸
使用size属性申明
序号属性含义1size“small”小按钮2size“medium”中按钮3size“large”大按钮
import {Button, Stack} from mui/material;function App() {return (div Stack spacing{3}Button variantcontained sizesmall按钮1/ButtonButton variantcontained sizemedium按钮2/ButtonButton variantcontained sizelarge按钮3/Button/Stack/div);
}
export default App;3、图标按钮
使用图标可以直接在Material Icons中选择前提是安装icon库
yarn add mui/icons-material mui/material emotion/styled emotion/react
1、带有图标的按钮
序号属性含义1startIcon{图标组件/}在按钮文字前面的图标2endIcon{图标组件 /}在按钮文字之后的图标
import {Button, Stack} from mui/material;
import DeleteIcon from mui/icons-material/Delete;
import SendIcon from mui/icons-material/Send;function App() {return (div Stack spacing{3}Button variantoutlined startIcon{DeleteIcon /}Delete/ButtonButton variantcontained endIcon{SendIcon /}Send/Button/Stack/div);
}
export default App;上面的代码引入了两个图标组件DeleteIcon 、SendIcon 。图标可以自定搜索
