react-admin启用material-ui抽屉 - 腾讯云开发者社区

文章/答案/技术大牛

发布

你不知道的33个令人惊艳的React开发库

material-ui image.png MUI 提供了一套全面的 UI 工具，可帮助您更快地发布新功能。...包括 100 多个可定制组件和 40 个挂钩，可满足您在任何情况下的需求 react-leaflet image.png 支持地图的React components for Leaflet maps react-admin...image.png React-admin 提供最佳的开发人员体验，让您专注于业务需求并构建令人愉悦的用户界面。

2.9K2 0

Material-UI 从零开始掌握React组件库的设计精髓

为什么选择Material-UI？在众多React UI库中，为什么我特别推荐Material-UI呢？...快速上手Material-UI让我们直接进入实战，看看如何在项目中使用Material-UI。...实用组件探索Material-UI提供了众多实用组件。...导航组件AppBar与Drawer - 实现常见的应用导航栏和抽屉菜单：```jsximport { useState } from 'react';import AppBar from '@mui/material...希望这篇文章能帮助你踏上Material-UI的学习之旅！你有什么使用Material-UI的经验或问题？欢迎在评论区分享！

5961 0

您找到你想要的搜索结果了吗？

是的

没有找到

如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

我试图在Webpack中启用热样式装入器，但是我找不到正确的配置。...这里是我的webpack.config.js：用于在Webpack中启用热式样装入器以同步css的配置 const webpack = require(‘webpack’); const path =...{ “name”: “test-material-ui”, “version”: “0.0.0-beta.1”, “description”: “Sample project that uses material-ui...webpack”: “^1.12.9”, “webpack-dev-server”: “^1.14.0” }, “dependencies”: { “flexboxgrid”: “^6.3.0”, “material-ui

1.2K2 0

React UI组件库教程

特点：全面的组件集合： Material-UI 包括许多组件，包括按钮、菜单、表单、表格等。...移动优先的方法： Material-UI 设计为移动优先，这意味着这些组件在任何设备上都会表现出色，从智能手机到桌面设备。...可定制： Material-UI 组件可以轻松定制，以匹配你的品牌指南或应用的设计。可访问性： Material-UI 组件考虑了可访问性，这意味着残障人士也可以使用它们。...主题化： Material-UI 支持主题，因此你可以轻松地更改应用的外观和感觉2....这使得从组件外部启用样式的定制性变得更加容易二、丰富且可定制的组件在实际项目开发中，一个优秀的 UI 组件库不仅需要提供丰富的组件类型，还必须允许开发者根据业务需求对组件进行灵活的定制。

1.1K0 0

年终盘点: 复盘20+基于React的开源管理后台&插件

衍生出动效设计的三原则： 4.React-Admin React-Admin是基于React16.x、Ant Design3.x的管理系统架构。...项目特点：适应任何后端(REST、GraphQL、SOAP等) 技术栈包括material-ui, redux, react-final-form, redux-saga, react-router,...MUI (Material-UI) React 组件。完全响应式，所有现代浏览器都支持。

4.7K1 0

独立开发者必备的29个开源React后台管理模板

其中一些流行的库是Material-UI、Redux、Redux-Saga、ReCharts、React Big Calendar等等。...React-admin 一个前端框架，用于使用 ES6、React 和 Material Design 构建在 REST/GraphQL API 之上的浏览器中运行的数据驱动应用程序。...演示地址：marmelab.com/react-admin 参考：https://dev.to/amelia19/28-best-react-js-admin-dashboard-templates-46b1

11.6K1 0

『React Navigation 3x系列教程』createDrawerNavigator开发指南

createDrawerNavigator抽屉效果，侧边滑出： ?...drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right’，默认是’left’； contentComponent: 用于呈现抽屉导航器内容的组件...接收抽屉导航器的 navigation 属性。默认为DrawerItems。...有关详细信息，请参阅下文； contentOptions: 配置抽屉导航器内容，见下文; useNativeAnimations: 是否启用Native动画，默认启用； drawerBackgroundColor...focused: boolean, tintColor: string}： focused: 表示是否是选中状态； tintColor: 表示选中的颜色； drawerLockMode：指定抽屉的锁定模式

9.4K1 0

Android分享：Android侧滑原来可以这么优雅

一行代码添加滑动抽屉抽屉显示在主view之上，类似于DrawerLayout SmartSwipe.wrap(view) .addConsumer(new DrawerConsumer())...//抽屉效果 //可以设置横向(左右两侧)的抽屉为同一个view //也可以为不同方向分别设置不同的view .setHorizontalDrawerView(menuLayout...半联动，视觉效果为：抽屉视图按照联动系数与主体之间存在相对移动效果 // 1:全联动，视觉效果为：抽屉跟随主体一起移动(pixel by pixel) .setRelativeMoveFactor...SmartSwipe.wrap(view) .addConsumer(new TranslucentSlidingConsumer()) .enableHorizontal() //启用左右两侧侧滑...DoorConsumer实现百叶窗侧滑删除 SmartSwipe.wrap(view) .addConsumer(new DoorConsumer()) .enableHorizontal() //启用左右两侧侧滑

2K2 0

DrawerLayout实现网易新闻抽屉效果

个人感觉网易的客户端比较前卫,有很多新鲜的东西,有时候模仿这些好的客户端能学到很多东西开始今天的主要课题,下面是网易客户端抽屉模式实现的效果其实有个Drawerlayout这个布局,你得问题就已经解决掉一大半了...drawerView);onDrawerStateChanged(int newState); onDrawerSlide(View drawerView, float slideOffset)抽屉改变时使用...onDrawerOpened(View drawerView);打开抽屉 onDrawerClosed(View drawerView)关闭抽屉 onDrawerStateChanged(int...newState);改变抽屉的状态 /** * Set a simple drawable used for the left or right shadow...toClose); } break; // default: do nothing } } 启用或禁用了所有的抽屉互动

1.8K5 0

react-navigation，刷新你的导航一、属性介绍二、案例

默认为true pressColor：material涟漪效果的颜色（安卓版本需要大于5.0） pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0） scrollEnabled：是否启用可滚动选项卡...默认为左侧位置 contentComponent - 用于呈现抽屉内容的组件，例如导航项。接收抽屉的导航。...2.3DreawerNavigator抽屉导航 DrawerNavigator是一个抽屉导航。设置方式其实跟设置Tab差不多。只是需要设定某些特殊的属性。...定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面，将它们定义到DrawerNavigator中。在抽屉导航中，将组件的属性也一起设置好。...我们可以在这个属性里面设置抽屉导航的样式。

23K9 0

深入理解 Java KeyStore：密钥库、storepass 与 key password 的安全机制

输入正确后，你可以进入房子，看到客厅、卧室、书房等房间（即各个 alias），但并不能直接打开保险柜或抽屉。...仅针对私钥条目（PrivateKeyEntry）功能：解密并导出具体的私钥（PrivateKey 对象）确保即使 KeyStore 被非法访问，私钥仍处于加密状态类比：就像你书房里一个带密码锁的抽屉...即使小偷进了你家（知道 storepass），若不知道抽屉密码（key password），也无法拿走里面的金条（私钥）。三、技术实现：如何从 KeyStore 中取出密钥对？..."), "vault123".toCharArray() // ← storepass ); // Step 2: 用 key password 解锁具体私钥（抽屉小锁...作为开发者，我们应当：理解两者的区别与协同作用；在生产环境中启用双密码策略；严格管理密码与密钥文件的生命周期；逐步向标准化、无状态的安全架构演进。

3721 0

Android Q 手势导航背后的故事

为了确保开发者和用户能够享受到一致的体验，所有出厂系统为 Android Q+ 的机型将默认启用这套全新的手势导航模式。...应用抽屉和其它侧滑操作经过多番权衡与谨慎考量，我们最终决定将侧滑设为返回操作，但是在此过程中，尤其是在降低手势对应用的影响方面，我们作出了许多艰难的取舍。...比如说，我们发现 3% 到 7% 的用户 (具体比例因应用而异) 通过侧滑手势打开应用导航抽屉，其余用户则选择点击汉堡形菜单按钮来弹出抽屉。...改变用户的导航习惯并不是我们的目标，因此，我们尝试了许多方法来帮助用户区分抽屉手势和返回手势，不过结果并不乐观，用户试着通过侧滑触发返回操作，但是仍旧拖曳出了抽屉界面，致使用户对返回操作的信任度下降。...除了应用抽屉以外，适应时间也是一大问题: 用户平均需要 1 到 3 天才能适应手势导航，特别是，用户有些难以应付像左滑或者右滑跑马灯控件时却触发返回这样的情况。

2.8K5 0

Android Q Beta 迎来第五版

另外，我们还为包含导航抽屉的应用引入了 peek 手势: 用户轻压屏幕边缘来 “抓住” 抽屉，然后向内滑动，便可拉出抽屉页面。...我们建议所有应用支持以下特性: 夜间模式: 为了确保用户在启用全局夜间模式后能够享受到一致的体验，请您在应用中添加夜间主题，或开启 “强制变暗” (Force Dark) 功能支持手势导航: 为用户提供边到边的操作体验...如果下列特性与您的应用相关，我们建议您添加相应支持: 互动性更高的消息通知: 如果您的通知中包含消息，请启用通知内的智能回复及建议操作，以吸引用户并让他们可以立即采取行动。...更丰富的录音体验: 如需支持字幕生成或游戏录制，请启用音频回放获取功能——这能让您的应用惠及更多用户，并更好地支持无障碍体验。

1.4K2 0

深入浅出 NavigationUI | MAD Skills

在本文中，我们将为大家讲解另外一个用例，即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面，所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢？通过点击监听器手动触发导航动作吗？不需要！无需任何监听器。...要启用它，需要在 onOptionsItemSelected() 函数中，为被选择的菜单项调用 onNavDestinationSelected() 函数，并传入 navController。...抽屉式导航栏虽然看上去不错，但是如果您设备的屏幕尺寸较大，那么底部标签栏恐怕无法提供最佳的用户体验。...Donut Tracker 应用并不需要底部标签栏或者抽屉式导航栏，但是添加了新的功能和目的页面后，NavigationUI 可以很大程度上帮助我们处理应用中的导航功能。

4.3K3 0

Android P DP3发布：SDKAPI确定、彩色指纹录入等

根据Android Police的整理，DP3的一些直观变化包括亮度指数级调整、锁屏显示天气和日历最近事件、彩色的指纹录入动画、改良的手势操作（呼出多任务和应用抽屉更方便）、通知回复按钮换新等。...对于普通用户来说，Android P DP3存在一些影响使用的基本问题，包括UI滑动粘滞、蓝牙播放BUG、NFC功能无法启用等。

5764 0

前端开发者的 Kotlin 之旅：Compose Multiplatform 实战Material 3组件库

Material 3 是 Google 最新的设计语言，对于习惯了 Bootstrap、Ant Design 或 Material-UI 的前端开发者来说，理解 Material 3 的设计理念和组件体系既有相似性...selected = selectedNavItem == index, onClick = { selectedNavItem = index } ) }}// 导航抽屉

5221 0

Island:为设备开辟一座密岛

另外，一些需要申请Root权限的应用，如R.E.管理器等，如果需要在岛内正常申请Root权限，需要使用SuperSU作为授权管理应用，并且在岛外的SuperSU中开启"启用多用户授权"特性，除此之外还需要在岛内也安装...值得注意的是，如果你的桌面支持应用抽屉，那么当一个应用被放入岛中后，会另外在应用抽屉中直接生成一个指向岛内应用的右下方带有"橙色公文包"图标，如果你的桌面没有应用抽屉，将会直接在桌面上生成这个图标，点击带有

3.9K2 0

跨平台混编框架MUI仿豆瓣电影APP

Material Design 是 Google 推出的设计语言，而 MUI（原名 Material-UI）作为 React 生态中最成熟的组件库之一，不仅提供了丰富的 UI 元素，还高度遵循设计规范。...后续通过以下措施显著提升流畅度：使用 React.memo 和 useCallback 减少不必要的重渲染；对长列表采用虚拟滚动（FlatList / SectionList）；图片资源按分辨率分发，并启用

2471 0

如何从零入门React？实战做个FM应用吧

petalFM Password: petalFM 技术栈框架：react 状态管理：redux 打包：Webpack，Babel 语言：ES2015, Less 库: React Router V4 Material-UI...开始的学习从小程序文档开始，APP界面借鉴了其他的小程序，界面成型后发现没有数据来源，于是通过nodejs写了爬虫录入初始数据，启用定时抓取保持更新，并封装了接口服务，甚至做了一个简单的后台页面录入数据

1.5K1 0

SSO统一身份认证——利用原版页面修改一个简洁的登录页面（十八）

####### # 页面配置 # # 是否启用侧边抽屉菜单 cas.drawer-menu.enabled=false # 顶部显示名称 cas.theme.name=SSO # 顶部logo cas.logo.file...= # 是否启用通知 cas.notifications-menu.enabled=false 3、去除登录页面中那个小盾牌图标注释掉页面loginform.html文件中31行 <!

7842 0

点击加载更多

你不知道的33个令人惊艳的React开发库

Material-UI 从零开始掌握React组件库的设计精髓

如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

React UI组件库教程

年终盘点: 复盘20+基于React的开源管理后台&插件

独立开发者必备的29个开源React后台管理模板

『React Navigation 3x系列教程』createDrawerNavigator开发指南

Android分享：Android侧滑原来可以这么优雅

DrawerLayout实现网易新闻抽屉效果

react-navigation，刷新你的导航一、属性介绍二、案例

深入理解 Java KeyStore：密钥库、storepass 与 key password 的安全机制

Android Q 手势导航背后的故事

Android Q Beta 迎来第五版

深入浅出 NavigationUI | MAD Skills

Android P DP3发布：SDKAPI确定、彩色指纹录入等

前端开发者的 Kotlin 之旅：Compose Multiplatform 实战Material 3组件库

Island:为设备开辟一座密岛

跨平台混编框架MUI仿豆瓣电影APP

如何从零入门React？实战做个FM应用吧

SSO统一身份认证——利用原版页面修改一个简洁的登录页面（十八）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐