material-ui_设置Material-UI骨架加载器的最短显示时间

最新推荐文章于 2024-05-17 09:52:16 发布
最新推荐文章于 2024-05-17 09:52:16 发布
阅读量231 收藏
点赞数
文章标签： python java linux vue ViewUI
原文链接：https://medium.com/the-clever-dev/set-a-minimum-display-time-for-material-ui-skeleton-loader-22f66720bcc5
版权
material-uiLet’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API call, whichever is greater. 让我们将Material-UI骨架加载器配置为显示1秒或API调用的加载时间，以较大者为准。 Typically use...
摘要由CSDN通过智能技术生成

material-ui

Let’s configure a Material-UI Skeleton Loader to display for 1 second OR the loading time of an API call, whichever is greater.

让我们将Material-UI骨架加载程序配置为显示1秒或API调用的加载时间，以较大者为准。

Typically users don’t need a loading icon if load time is less than 1 second, but if you are uncertain how long an API may take to respond, you may want to avoid flashing a component on the screen before showing a loading indicator.

通常，如果加载时间少于1秒 ，则用户不需要加载图标，但是如果您不确定API会花费多长时间，则可能需要避免在显示加载指示器之前在屏幕上闪烁组件。

Alternatively, you could show nothing at all for one second before choosing to show a loading indicator. Or you could show the indicator immediately, which is what I will

最低0.47元/天 解锁文章
weixin_26750481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
material-ui-pickers:日期和时间选择器，使用:red_heart:为@ material-uicore构建
05-03
材质用户界面选择器 可访问，可自定义，令人愉悦的日期和时间选择器 不再支持该项目 有关更多详细信息，请参见 安装 请注意，此软件包需要@material-ui/core v4 。 它不适用于旧的v3。 如果要从v2更新，请阅读 // via npm npm i @material-ui/pickers // via yarn yarn add @material-ui/pickers 入门 这是有关如何开始使用@material-ui/pickers 。 文献资料 查看文档网站 最近更新了吗？ 更改日志在这里可用 贡献 有关如何捐款的信息，请参见CONTRIBUTING文件。 执照 该项目是根据MIT许可条款获得许可的
material-kit：基于Google的Material Design的Bootstrap 4，React，Vue.js，React Native和Sketch的免费和开源UI套件
01-29
Material Kit是一个免费的Bootstrap 4 UI套件，其灵感来自Google的材料设计，具有新颖的设计。 您要求它，所以我们建造了它。 很高兴以易于使用和精美的组件集向您介绍材料概念。 连同Bootstrap元素的重新样式化，您...
Material UI 4.10 Skeleton 骨架
ejinxian的专栏
05-24 331
Material-UI官方学习资料 它是React组件，实现了谷歌Material Design设计规范。世界上最流行的React界面框架。 Material UI 4.10.0 发布了。Material UI 是一组实现 Google Material Design 规范的 React 组件，它是一个前端 JS 框架，主要用在 Web 领域 Material Skeleton 骨架屏 查看文档以了解更多。 添加标签辅助功能文档部分。可以使用selectionFollowsFocus...
推荐开源项目：MaterialUI - 现代化Unity界面设计的利器！
最新发布
gitblog_00082的博客
05-17 299
推荐开源项目：MaterialUI - 现代化Unity界面设计的利器！ 项目地址:https://gitcode.com/InvexGames/MaterialUI 1、项目介绍 MaterialUI 是一个基于Google官方Material Design指南的Unity用户界面（UI）套件。这个项目旨在为Unity开发者提供一套符合现代设计美学的组件和工具，帮助他们轻松创建出美观且用户体验良...
Material UI 自定义 (TypeScript)
Baby_Bus666的博客
05-31 1283
Material UI 中的某些组件内部还有其他嵌套组件。例如，一个组件内部Dialog有一个组件。Paper为了自定义嵌套组件的属性，它公开了一个名为的属性，PaperProps您可以使用它来执行此操作。您必须检查才能了解每个组件的所有可用属性。
react使用Material UI实现类似淘宝tab居中切换效果
徐同保的专栏
09-02 710
react使用Material UI实现类似淘宝tab居中切换效果
Material UI 的安装与使用
zheng_jia_jun的博客
07-30 3512
学习完这个框架的使用后，我写了个基于MUI+React的移动端考试页面，如果需要可以clone下来查看下如何使用MUI,如果可以的话希望给个start谢谢!请注意，安装依赖于react的17.0.0及以上版本，和react-dom>=17.0.0及以上版本。材料UI设计精美，并具有一套自定义选项，可以在我们的组件之上轻松实现自己的自定义设计系统。是一个开源的React组件库，实现了Google的MaterialDesign。安装成功后就可以在组件用引用了，查看示例。......
angular-material-gulp:一个简单的骨架应用程序
06-13
"angular-material-gulp:一个简单的骨架应用程序" 这个标题指出这是一个基于AngularJS、Material Design和Gulp.js的项目模板。AngularJS是Google维护的一个强大的前端JavaScript框架，用于构建交互式和动态的Web应用...
Material-Design-Skeleton:为前棒棒糖设备带来材料设计经验的骨架应用程序
07-19
【Material Design Skeleton】是专为Android Lollipop之前的设备设计的一款应用程序，它致力于为这些较旧的设备提供...同时，对于希望深入理解Android UI开发和Material Design的开发者来说，这是一个宝贵的实践案例。
gulp-angular-material-skeleton-test01
06-30
gulp-angular-material-skeleton-test01 用于移动带有 gulp 和 bower 的有角材料的骨架。 特征 我正在使用角材料 JavaScript 和 CSS 与 gulp 放在一起 我正在使用浏览器 “gulp-angular-template 缓存”也将文件...
carto-react-template:用于React的CARTO。 在CARTO平台和React上开发位置智能（LI）应用的最佳方法
04-28
@ carto / cra-template（骨架模板） @ carto / cra-template-sample-app（示例应用模板） 入门使用Create React App的基本先决条件是预先安装软件包管理器（ 或 ）。 对于为项目做出贡献的开发人员而言， yarn是...
material-ui-confirm:简单的确认对话框基于@ material-uicore构建，易于使用，这要归功于React Hooks
05-17
Material-UI确认 确认用户选择是一件好事，这也应该很容易做到。 该软件包提供了基于简单确认对话框，并且由于React Hooks的使用而易于使用。 安装 npm install --save material-ui-confirm 演示版 用法 将您的应用包装在ConfirmProvider组件内。 注意：如果使用的是Material UI ThemeProvider ，请确保ConfirmProvider是它的子级。 import React from 'react' ; import { ConfirmProvider } from 'material-ui-confirm' ; const App = ( ) => { return ( < ConfirmProvider> { /* ... */ } < / ConfirmProv
react-daterange-picker:使用@ material-ui的React日期范围选择器。 现场演示
05-06
React日期范围选择器 使用material-ui组件的React日期范围选择器。 现场演示： : 用法 npm install @matharumanpreet00/react-daterange-picker --save # or with yarn yarn add @matharumanpreet00/react-daterange-picker 基本范例 import React from "react" ; import { DateRangePicker , DateRange } from "@matharumanpreet00/react-daterange-picker" ; type Props = { } type State = { open : boolean , dateRange : DateRange } class App ex
基于vue2开发的materialui库移动pc都可使用用于快速搭建优美的网站
08-10
基于 vue2 开发的 material ui 库，移动、pc 都可使用，用于快速搭建优美的网站
前端项目-material-datetime-picker.zip
09-03
前端项目-material-datetime-picker,香草JS材料设计日期/时间选择器组件
material-ui-designer:Material UI 的用户界面设计器
08-04
用户界面设计器表单 Material UI Material UI Designer 是一种工具，设计人员和开发人员可以使用它来使用 Material UI 组件快速组合用户界面。 设计可以随时预览，一旦完成，设计页面的代码可以作为准备运行的React项目导出。 设置 克隆存储库。 git clone https://github.com/rajithaw/material-ui-designer.git 将 data-service.js 中的 MongoDB url 更改为指向您的 MongoDB 数据库。 运行 npm 命令。 npm install npm build npm start 现场演示 现场演示可以在找到 快速开始 创建页面 Material UI Designer 页面是在项目下创建的。 要创建页面，首先通过单击主菜单中的项目列表菜单项打开项目对话框。 创
Material-UI样式修改的几种方法
热门推荐
weixin_44989721的博客
04-29 1万+
material-UI样式根据项目需求，定制化修改，尝试了几种方法之后，根据应用场景总结以下方法。 一、单个组件，定制化强 定义className，根据每个类，定制化组件样式 行内style，个人不建议使用，因为行内样式权重高、复用性差、后期维护成本高 根据Component API中css部分的api进行较为复杂点样式修改 // 样式 const styles = { root: {...
React中使用Material UI的相关注意事项
roamingcode的博客
08-16 6422
material ui是一个支持PC端、移动端的UI框架,使用的过程中也踩了很多坑,下面针对如何使用以及注意事项简要总结一下(当前使用版本为最新版1.0) 1. 使用字体图标 在index.html下添加如下内容,即可使用字体图标 &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Mate...
Material-UI使用
多看多听多总结
11-18 1428
1、安装 npm install @material-ui/core@next @emotion/react @emotion/styled
Material-UI select设置树结构
06-01
要在Material-UI的Select组件中使用树结构，你可以使用Recursive Tree组件。以下是一个示例代码： ```jsx import React from 'react'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import TreeView from '@material-ui/lab/TreeView'; import TreeItem from '@material-ui/lab/TreeItem'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import FormControl from '@material-ui/core/FormControl'; import InputLabel from '@material-ui/core/InputLabel'; import Select from '@material-ui/core/Select'; const data = { id: 'root', name: 'Parent Node', children: [ { id: '1', name: 'Child Node 1', children: [ { id: '2', name: 'Subchild Node 1', }, { id: '3', name: 'Subchild Node 2', }, ], }, { id: '4', name: 'Child Node 2', children: [ { id: '5', name: 'Subchild Node 3', }, { id: '6', name: 'Subchild Node 4', }, ], }, ], }; const useStyles = makeStyles({ root: { height: 240, flexGrow: 1, maxWidth: 400, }, }); function renderTreeItems(items) { return ( <> {items.map((item) => ( <TreeItem key={item.id} nodeId={item.id} label={item.name}> {Array.isArray(item.children) ? renderTreeItems(item.children) : null} </TreeItem> ))} </> ); } function RecursiveTreeView(props) { const classes = useStyles(); const { onChange, value } = props; const handleChange = (event) => { onChange(event.target.value); }; return ( <FormControl className={classes.formControl}> <InputLabel htmlFor="tree-select">Select</InputLabel> <Select native value={value} onChange={handleChange} inputProps={{ name: 'tree-select', id: 'tree-select', }} > <option value="" /> {renderTreeItems([data])} </Select> </FormControl> ); } RecursiveTreeView.propTypes = { onChange: PropTypes.func.isRequired, value: PropTypes.string.isRequired, }; export default function SelectWithTree() { const [value, setValue] = React.useState(''); const handleChange = (newValue) => { setValue(newValue); }; return ( <RecursiveTreeView onChange={handleChange} value={value} /> ); } ``` 在这个示例中，我们首先定义了一个树形数据结构，然后使用`renderTreeItems()`函数递归渲染树形结构。最后，在`RecursiveTreeView`组件中，我们使用`FormControl`和`Select`组件来显示树形结构，并在选择时触发`onChange`事件。你可以根据自己的需要来修改这个示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值