首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在哪里可以找到在Material UI v1的文档站点中使用的抽屉和应用程序栏的简单示例?

在Material UI v1的文档站点中,可以找到使用抽屉和应用程序栏的简单示例。抽屉(Drawer)是一个用于在应用程序中显示导航菜单或其他内容的组件,应用程序栏(AppBar)是一个用于显示应用程序标题和操作按钮的组件。

在Material UI v1的文档站点中,可以通过以下步骤找到这个示例:

  1. 打开Material UI v1的官方网站:https://mui.com/
  2. 在网站的顶部导航栏中,点击"Components"(组件)菜单。
  3. 在下拉菜单中,选择"Drawer"(抽屉)。
  4. 在抽屉组件的文档页面中,可以找到关于抽屉的详细说明、API文档和示例代码。
  5. 在文档页面中,向下滚动,可以找到一个名为"Simple examples"(简单示例)的部分。
  6. 在这个部分中,可以找到使用抽屉和应用程序栏的简单示例代码和效果预览。

请注意,由于要求不能提及特定的云计算品牌商,因此无法提供腾讯云相关产品和产品介绍链接地址。但是,你可以根据找到的示例代码和文档,结合腾讯云的相关产品和服务,进行开发和实现类似的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 全栈式——页面框架

对于没有相关基础的人,正式学习AppUI之前,建议先了解Material Design相关知识 关于Material Design设计风格资料 MaterialApp MaterialApp代表使用...theme ThemeData 应用程序主题,各种定制颜色都可以设置,用于程序主题切换 darkTheme ThemeData 深色模式下主题 themeMode ThemeMode 用于设定主题模式...debug横幅 debugShowMaterialGrid bool debug模式下是否显示Material网格 // 构建UI前,设置一些属性 MaterialApp( builder...flexibleSpace显示AppBar下方,高度AppBar高度一样,可以实现一些特殊效果 [cf22fa2aav.png] 文档地址 示例 BottomAppBar BottomAppBar...是一个不规则底部工具,它比BottomNavigationBar 灵活,可以放置文字图标等等控件。

2.9K30

AngularDart Material Design 应用布局 顶

自述 应用布局 应用程序布局是一个样式,指令组件系统,当它们一起使用时,可以提供材质外观感知应用程序层叠关系。 它根据材料规格提供应用抽屉导航样式。...要在Angular组件中使用这些样式,只需将其添加为Component注解styleUrls值即可。 建议在任何特定于组件样式之前添加样式,以便您可以根据需要轻松覆盖样式值。...应用具有以下类,可以一起使用来创建标题: class 描述 material-header 头部标题容器元素。...shadow 材质标题上修饰符可以将阴影应用于标题。 dense-header 使主要使用鼠标键盘界面的应用更加密集。 material-header-row 标题中一行。.... --> 应用抽屉交互 应用抽屉协同工作,为应用程序提供全面的应用布局。应用可以存在于material-content之内或之外。

4K30

Flutter | 容器组件

UI 变化,而不是重新 build 流程,这样会节省 layout 开销,所以性能会比较好,例如 Flow 组件,内部就是使用矩阵变换来更新 UI ,除此之外,Flutter 动画组件也大量使用了...Material 风格导航,通过他可以设置标题,导航菜单,导航底部tab等 AppBar({ Key key, this.leading, //导航最左侧Widget,常见为抽屉菜单按钮或返回按钮...打开抽屉方法 ScaffoldState ,通过 Scaffold.of() 可以获取腹肌最近 Scaffold 组件 State 对象 ToolBar 下面, AppBar 通过 Bottom...: 另外,Material 组件库也提供了一个 PageView 组件,它 TabBarView 功能类似,下面将上面的例子重新整理一下,使用 pageView ,让 下面的 导航也动起来 class...来实现底部导航,代码也非常简单 但是如果要实现一些特殊效果要怎么做呢,示例: bottomNavigationBar: BottomAppBar( color: Colors.white

5.5K10

Flutter开发-容器类组件

Padding(填充) Padding可以给其子节点添加填充(留白),边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它定义: Padding({ ......是一个Material风格导航,通过它可以设置导航标题、导航菜单、导航底部Tab标题等。...Drawer组件作为根节点,它实现了Material风格菜单面板,MediaQuery.removePadding可以移除Drawer默认一些留白(比如Drawer默认顶部会留手机状态等高留白...抽屉菜单页由顶部底部组成,顶部由用户头像昵称组成,底部是一个菜单列表,用ListView实现 FloatingActionButton FloatingActionButton是Material设计规范一种特殊...Button,通常悬浮在页面的某一个位置作为某种常用动作快捷入口 SafeArea 使用 SafeArea 可以让 child widget 顶部底部腾出足够空间方便处理 iPhoneX 这类手机

3.5K20

AutoJs6 – v6.2.0 – 安卓 JavaScript 自动化工具 (Auto.js 二次开发)

#7 修复 高版本安卓系统可能出现部分页面与通知区域重叠问题 修复 安卓 10 及以上系统无法正常运行有关设置画笔颜色示例代码问题 修复 示例代码 “ 音乐管理器 ” 更正文件名为 “ 文件管理器...修复 文档中部分章节标题超出屏幕宽度时无法自动换行造成内容丢失问题 修复 文档示例代码区域无法正常左右滑动问题 修复 文档页面下拉刷新时表现异常且无法撤销刷新操作问题 (试修) 修复...Root 权限修改主页抽屉权限开关失败时未继续弹出 ADB 工具对话框问题 修复 Root 权限显示指针位置初次使用时提示无权限问题 修复 图标选择页面的图标元素排版异常 修复 文本编辑器启动时可能因夜间模式设置导致闪屏问题...方法 Alpha 通道为 0 时其通道信息结果丢失问题 优化 重定向 Auto.js 4.x 版本公有类以实现尽可能向下兼容 (程度有限) 优化 合并全部项目模块避免可能循环引用等问题...> 全局对象 > 覆写保护) 优化 importClass importPackage 支持字符串参数及不定长参数 优化 ui.run 支持出现异常时打印栈追踪信息 优化 ui.R 及 auto.R

4.3K20

iOS 与 Android APP 设计差异

标签一般位于标题下方,使得内容能够很好地被管理,通过标签,用户可以对应用视图,数据集功能进行切换。...左侧就是抽屉导航;右侧是标签 Material Design还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部菜单项很容易点击操作。...但是安卓规范其实不建议同时使用底部导航标签,因为它可能会在导航时引起混乱。 底部导航(Material Design) Apple的人机交互规范,没有类似抽屉菜单标准导航控件。...建立用户第一印象对产品来说很重要。APP开发设计过程,我们可以通过做好微交互动画来为用户创建一个有吸引力体验。 让我们明确下两个平台交互动画规则建议,并查看官方给出一些标准示例。...例如,当一个UI元素展开以填充整个屏幕时,展开后新界面是点开元素子级,返回可以回到父级。

3.3K10

【软件开发规范七】《Android UI设计规范》

Material Design 中文版文档 2.1 核心思想 Material Design 核心思想,就是把物理世界体验带进屏幕。...编辑 **卡片集**是**卡片**一个平面布局 ​编辑 即使同一个列表,卡片内容布局方式也可以不一样。 ​编辑 卡片统一带有2dp圆角。...示例呈现分隔线是一种弱规则,弱到不会去打扰到用户对内容关注。 ​编辑 列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。 ​...编辑 单选按钮(Radio button) ​编辑 复选框(Checkbox) ​编辑 开关(Switch) Tabs ​编辑 一个 app ,tabs 使不同视图功能间探索切换以及浏览不同类别的数据集合起来变得简单...手机端侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置帮助反馈可以固定在底部。抽屉收起时,会保留之前滚动位置。 ​

5K20

欢迎体验 | Wear OS 版 Compose 开发者预览版

Compose 能 简化并加速 UI 开发,Wear OS 版 Compose 也是如此,借助内置 Material You 支持,您可以用更少代码构建更精美的应用。...例如,UI、运行时间、编译器动画依赖项都将保持不变。 不过,您需要使用合适 Wear OS Material、导航及基础开发库,这与您之前移动应用中所使用开发库是不一样。...开发者可以继续使用其他与 Material 相关开发库,如 Material 涟漪通过 Wear Compose Material 开发库进行扩展 Material 图标。...尽管从技术上说,可以 Wear OS 上使用移动依赖项,但我们还是建议您使用专用于 Wear 版本以获取最佳体验。 注意: 我们将在未来版本添加更多 Wear 可组合项。...下面是一个示例 (代码)。 Scaffold Scaffold 提供了布局结构,以帮助您像移动设备一样,用常见模式排列屏幕,但并非应用、悬浮操作按钮 (FAB) 或抽屉式导航等模式。

1.6K10

Flutter 可折叠边

Flutter使开发人员可以轻松使用导航抽屉,而无需其他人就无需编写大部分代码。 本博客,我们将探讨Flutter **可折叠侧边。...**我们将实现一个可折叠侧边演示程序,并在flutter应用程序使用foldable_sidebar包创建一个可折叠侧边导航抽屉。...利用Material Design移动应用程序有两个必不可少导航选择。这些导航是“选项卡抽屉”。抽屉是选项卡一种可选选择,因为有时移动应用程序没有足够空间来帮助选项卡。 抽屉是不可见侧屏。...它是一个向左滑动菜单,大多数情况下,它包含应用程序重要连接,并且显示时拥有一半屏幕。 该演示视频展示了如何在Flutter创建可折叠侧边。...它显示了flutter应用程序使用foldable_sidebar包可折叠侧边将如何工作。它显示了当用户点击浮动操作按钮时,抽屉将以折叠方式显示/隐藏。它会显示设备上。

6.3K50

从零开始Android:常见UI设计模式

Google Play音乐应用程序可以看到这种模式示例,该应用程序为用户提供了一张专辑网格,可以选择该专辑网格来显示该专辑可用歌曲。 环聊是列表详细信息模式另一个示例。...区别在于列表项可以水平滚动而不是垂直滚动。 Google Play商店应用程序可以看到这种模式示例,该应用程序显示了可浏览多种类别应用程序轮播。...至少,该工具包含该部分或应用程序标题,但是工具设计模式还有助于将操作按钮直接放置工具或溢出菜单,以允许用户应用程序该部分执行任务。...Google Keep应用程序可以找到一个示例,该应用程序使您可以更改便笺颜色,向该便笺添加其他人以及溢出菜单存在许多其他操作。...您还可以继续使用列表详细信息模式,但是列表项将需要更大并且可以固定到位,以便用户可以轻松访问它们。 有关为Android Wear设计更多信息,请参见官方文档

2.7K20

flutter 起步

flutter简介Flutter是谷歌移动UI框架,可以运行在ios与android系统上,可以以完成app开发,使用情况页面大多数涉及到flutter 开发app 都是混合开发,占比并不多。...基本上都是原生+Flutter混合开发模式,不是使用纯Flutter开发起步基于dartdart 不用单独安装,flutter 会自带环境,且dart 语言较简单可以flutter使用中学习安装环境...继承也有Java不一样地方:Flutter子类可以访问父类所有变量方法,因为Flutter没有公有、私有的区别上下文对象是整个APP Widget树结构Widget话柄,每个Wideget...(WidgetsApp不支持)debug模式下是否显示材质网格,传入bool类型18. showPerformanceOverlay当为true时应用程序顶部覆盖一层GPUUI曲线图,可即时查看当前流畅度情况...flexibleSpace → Widget - 一个显示 AppBar 下方控件,高度 AppBar 高度一样,可以实现一些特殊效果,该属性通常在 SliverAppBar 中使用

4.4K20

Flutter 构建完整应用手册-设计基础知识 顶

使用主题共享颜色字体样式 为了整个应用中共享颜色字体样式,我们可以利用主题。定义主题有两种方式:应用程序范围或使用Theme小部件来定义应用程序特定部分颜色字体样式。...事实上,应用程序范围主题只是由MaterialApp应用程序根部创建主题小部件! 我们定义一个主题后,我们可以自己部件中使用它。...显示SnackBars 某些情况下,当发生某些操作时可以方便地向用户简单通知。 例如,当用户列表删除消息时,我们可能想通知他们消息已被删除。 我们甚至可能想给他们一个撤消行为选择!...,我们需要告诉Flutter在哪里找到它。...添加一个抽屉到屏幕上 采用Material Design应用,导航有两个主要选项:选项卡抽屉。 当没有足够空间来支持标签时,抽屉提供了一个方便选择。

7.1K10

Flutter基础(二)

'), body: Text('你好,这是一个简单页面'), ), ); } } 在编写应用程序时,通常会创建新widget...MaterialApp 引入了 Material Design,还是相当漂亮,开发者几乎不需要做额外布局、样式 编码就能达到产品级视觉效果, 当然可以根据需求进行微调。...drawer:左边侧边控件 endDrawer:右边侧滑 backgroundColor: 内容背景颜色,默认使用是 ThemeData.scaffoldBackgroundColor 值 4...:Stack与RowClomn类似,只不过适用于子Wight没那么规则化布局,可以允许其子widget简单堆叠在一起 5、添加本地资源 根目录下新建文件夹,命名为images,将lake.png...文件夹下所有文件,可以简化为 flutter: assets: - images/ 代码访问,比如: new Image.asset( 'images/lake.jpg',

97730

15 个优秀 Vue 后台管理模板

我觉得,该默认配色方案确实具有美感,可为我们应用程序提供一定程度专业水准修饰感。 同时它也有暗模式亮模式。此可切换功能确实增加了额外自定义层,可以使应用程序脱颖而出。 ?...我真正喜欢 Vue Light Bootstrap 一个原因是,我们可以各种颜色,背景图像其他样式之间自定义边。 此功能允许开发人员根据自己特定项目需求来定制。...代码已经添加了许多Vue库,例如vue-routerVuex。 尽管它可能不是“现成”,但它确实为开发人员仪表板布局,设计结构上提供了额外灵活性。...它建立Element UI基础之上,Github上有63K颗星,非常受欢迎。 对于免费工具,Vue Element Admin包含大量组件,页面功能。...拥有200多个可以使用SASS样式进行修改组件,使用此模板可以轻松进行开发。 主要特点: 200 +元素 响应式 Bootstrap 仪表板 17个自定义插件 优秀文档 14.

12.6K21

6详解AppBar小部件

AppBar 应用是各种应用程序中最常用组件之一。它可用于容纳搜索字段、以及页面之间导航按钮,或者只是页面标题。...由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...Flutter AppBar 是根据Material Design指南构建应用程序组件。它通常位于屏幕顶部,并且能够在其布局包含其他小部件。...示例包括返回上一页导航箭头或打开抽屉菜单图标。 当上一条路线可用时,导航箭头会自动出现。...您可以使用它来显示图标、图像、形状或使用布局小部件(例如row任意组合column。

16.3K10
领券