Material UI – React (2022) 版的完整教程

Material UI – React (2022) 版的完整教程

这是关于 Material UI 的最期待的课程。该课程涵盖了 Material UI 的所有组件

课程英文名:Material UI - The Complete Guide With React (2022) Editio

此视频教程共5.5小时,中英双语字幕,画质清晰无水印,源码附件全

下载地址

课程编号:273 百度网盘地址:https://pan.baidu.com/s/11fq7xpyK2GWhU4P3M1FryQ?pwd=5f0c

课程内容

你会学到什么

  • 通过小例子学习 Material UI

  • 了解所有 Material UI 组件

  • 了解如何构建响应式网站

  • 在您的应用程序中实现现代 UI UX

  • 完成本课程后,您将能够在您的项目中实现 Material UI

课程内容

14 个部分- 57 个讲座- 5 小时 40 米总长度展开所有部分

介绍2 节课- 5 分钟

设置环境3 节课- 5 分钟

一个一个地研究 Material UI 组件3 节课- 21 分钟

表单处理5 节课- 21 分钟

标题导航栏组件4节课- 23 分钟

高级组件14 节课- 1 小时 30 分钟

数据网格1节课- 13 分钟

主题和样式2 节课- 15 分钟

图标2 节课- 7 分钟

网格系统1节课- 17 分钟

还有 4 个部分

要求

  • 无需 Material UI 或任何 CSS 框架经验

  • 需要基本的 ReactJS 知识

描述

欢迎来到描述。你来这里是正确的选择。

通过使用 Material UI 学习 UI UX 设计原则,成为前端 ReactJS 开发人员。完成本课程后,您将能够:

  • 建立电子商务项目

  • 构建响应式项目

  • 构建动态项目

  • 现代 UI UX 网站

这是最期待的 Material UI 课程,您将首先学习 Material UI。然后做项目。并为前端开发人员做好准备。

在本课程中,我们涵盖了有关 Material UI 的所有内容。

Material UI:MUI 提供了一套全面的 UI 工具来帮助您更快地发布新功能。从我们的全加载组件库 Material UI 开始,或者将您自己的设计系统带入我们的生产就绪组件。

您将了解:

Material UI 中的组件

对工作流程的深入理解

使用 ReactJS 处理组件的状态

成为前端 ReactJS 开发人员,您可以使用 React 做任何事情

成为 Material UI 的大师

使用 Material UI 开发项目

  • 响应式导航栏

  • 响应式导航栏 (GRID)

  • 登入登出申请

以及更多...

本课程专为希望深入了解 Material UI 中所有组件的初学者和工作专业人士而设计。您可以参加该课程并在 10 小时内成为前端 ReactJS Material UI 开发人员。

那么让我们开始这段旅程吧。我会在课程中见到你。

本课程适用于:

  • 想要使用 Material UI 来节省设计时间并专注于逻辑的 React 开发人员。

  • 想要构建现代 UI UX 站点的 React 开发人员

     

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Material UI 的 ButtonGroup 组件是一个用于组合多个按钮的组件。它可以使多个按钮在视觉上形成一组,从而使用户更容易识别它们之间的相关性。以下是 ButtonGroup 组件的完整中文文档: # ButtonGroup 用于呈现一组按钮。 ## 引入 ```jsx import ButtonGroup from '@mui/material/ButtonGroup'; import Button from '@mui/material/Button'; ``` 或 ```jsx import { ButtonGroup, Button } from '@mui/material'; ``` ## 示例 ```jsx <ButtonGroup variant="contained" aria-label="outlined primary button group"> <Button>One</Button> <Button>Two</Button> <Button>Three</Button> </ButtonGroup> ``` ## API ### ButtonGroup Props | 名称 | 类型 | 默认值 | 描述 | | ------------ | ------------------------------ | ------ | -------------------------------------------------------------------------------------------------------------- | | children | node | | 要呈现的按钮 | | color | 'default' \| 'inherit' \| 'primary' \| 'secondary' | 'primary' | 按钮的颜色 | | disableElevation | bool | false | 是否禁用按钮海拔高度 | | disableFocusRipple | bool | false | 是否禁用按钮的聚焦涟漪效果 | | disabled | bool | false | 是否禁用按钮 | | fullWidth | bool | false | 是否使按钮组的宽度为 100% | | size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮的大小 | | sx | SxProps<Theme> | | 应用于根元素的样式 | | variant | 'text' \| 'contained' \| 'outlined' | 'outlined' | 按钮的类型 | 继承自 [ButtonBaseProps](/api/button-base/#props) | 名称 | 类型 | 默认值 | 描述 | | ------------ | ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------- | | centerRipple | bool | false | 是否在按钮中心显示涟漪效果 | | component | elementType \| string | 'button' | 组件或 HTML 标签名称,该组件应用于根元素。如果未提供,则将使用默认的 button 元素。 | | disabled | bool | false | 是否禁用按钮 | | disableRipple | bool | false | 是否禁用按钮的涟漪效果 | | focusRipple | bool | true | 是否在聚焦按钮时显示涟漪效果 | | onFocusVisible | func | | 调用聚焦可见时的回调函数。参数:event: object。 | | tabIndex | oneOfType([number, string]) | | 根元素的 tabIndex 属性 | ## 注意事项 请注意,ButtonGroup 组件仅用于组合 Button 组件。如果您需要呈现其他类型的内容,请考虑使用其他组件,如 Grid 或 Flexbox。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值