开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

MDL:如何使用导航抽屉切换部分？

MDL（Material Design Lite）是一种基于谷歌Material Design设计原则的前端框架，它提供了一套易于使用和定制的UI组件，帮助开发者构建现代化的Web应用程序。

在MDL中，导航抽屉（Navigation Drawer）是一种常见的UI组件，用于在移动设备上实现侧边栏导航菜单。下面是使用导航抽屉切换部分的步骤：

导入MDL框架：在HTML文件中引入MDL框架的CSS和JavaScript文件，可以通过CDN链接或本地文件引入。
创建导航抽屉：在HTML文件中添加一个元素作为导航抽屉的容器，通常使用<div>元素，并为其添加一个唯一的ID。
定义导航抽屉内容：在导航抽屉容器内部，添加导航菜单的内容，可以使用无序列表（<ul>）和列表项（<li>）来创建菜单项。
设置触发器：在页面的其他部分，添加一个触发器元素，通常是一个图标按钮，用于打开或关闭导航抽屉。为触发器元素添加一个唯一的ID，并将其与导航抽屉容器的ID关联。
编写JavaScript代码：使用MDL提供的JavaScript API，编写代码来初始化导航抽屉和触发器的交互。通过监听触发器的点击事件，可以在点击时打开或关闭导航抽屉。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">导航菜单</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">菜单项1</a>
        <a class="mdl-navigation__link" href="#">菜单项2</a>
        <a class="mdl-navigation__link" href="#">菜单项3</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <button id="menu-toggle" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">menu</i>
      </button>
    </main>
  </div>

  <script>
    document.getElementById('menu-toggle').addEventListener('click', function() {
      var drawer = document.querySelector('.mdl-layout__drawer');
      drawer.classList.toggle('is-visible');
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了MDL提供的CSS样式和JavaScript库。通过点击按钮触发器，可以打开或关闭导航抽屉。

MDL提供了丰富的UI组件和样式，可以根据实际需求进行定制和扩展。更多关于MDL的信息和使用方法，可以参考腾讯云的MDL产品介绍页面：MDL产品介绍。

相关搜索:从抽屉导航切换底部标签从空白活动切换到导航抽屉活动使用导航抽屉时向上导航不起作用如何使导航抽屉打开活动？如何使用react导航更改抽屉位置如何使用Vuetify的组件“导航抽屉”重现此导航？如何使用安卓导航组件+ BottomNavigationView+ NavigationView (导航抽屉)如何使用抽屉导航器动态更改屏幕如何同时使用抽屉导航器和标签导航器？如何在react native中使用抽屉导航器？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用顶部切换导航TabBar

目前移动开发tab切换是一个很通用的功能，Flutter 通过Material 库提供了很方便的API来使用tab切换。效果图 ?...TabController的创建有两种形式，一种是使用系统的DefaultTabController,这种方式很简单，只要在Scaffold上面再套一层DefaultTabController就可以了。...TabController.实现SingleTickerProviderStateMixin 创建TabBar TabBar哪里都可以创建，但是在AppBar里面有一个bottom参数可以接收TabBar，会放在导航栏的下面...length: 3, child: new Scaffold( appBar: new AppBar( title: new Text('顶部tab切换...BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('顶部tab切换

6.2K2 0

Android开发(37) 使用DrawerLayout实现抽屉式导航菜单

概述最近流行左侧抽屉式的导航条菜单，知乎，360，QQ都使用了这样的导航菜单，我们也了解下： Android Design 的流行趋势：Navigation Drawer 导航抽屉参考这篇文章：http...MainActivity需要为DrawerLayout 注册一个回调事件接口ActionBarDrawerToggle ，这个事件的实现者监听器会获得抽屉弹出（onDrawerOpened）和关闭（...ColorDrawable(getResources().getColor( android.R.color.transparent))); // 注册导航菜单抽屉...R.string.drawer_close /* "close drawer" description for accessibility */ ) { // 当导航菜单抽屉...// onPrepareOptionsMenu() } // 当导航菜单抽屉

3.5K0 0

Rn使用material-top-tabs导航滑动切换

安装之前请确保安装了这些依赖主要使用的插件依赖 npm install @react-navigation/material-top-tabs react-native-tab-view@^2.16.0...详情请看官方文档使用方法 import React from 'react'; import { View, Text } from "react-native" import { createMaterialTopTabNavigator...backgroundColor: "#2C3167" } }}> ); }

1.6K2 0

如何使用小程序导航

今天，我们来介绍介绍小程序比较重要的导航组件，使用导航组件，可以在小程序内外部进行转跳，方便用户使用。...体验小程序导航组件小程序导航是由navigator组件实现的，我们可以使用该组件实现小程序内外的转跳。首先先来看看小程序的官方文档。...小程序外转跳你也可以使用组件转跳到其他小程序，很简单，使用下面的代码即可事项。...总结这篇教程中，我们介绍了小程序导航组件的使用，你学会了嘛？赶快多写几个页面进行尝试吧！后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。...腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！

4.4K6 1

React Native 导航：深入研究导航库

您有一些称为导航器的东西 - 将它们视为您应用程序导航的架构师。它们定义了用户如何从一个屏幕移动到另一个屏幕。...React Native Navigation的酷炫功能堆栈导航器：这个导航器像专业人士一样处理导航历史。它使用基于堆栈的方法，允许用户在屏幕之间轻松地来回切换。...标签导航器：曾经使用过将不同部分整齐地组织到选项卡中的应用程序吗？这就是标签导航器的魔力所在。它使得在应用程序部分之间轻松切换就像轻触选项卡一样简单而有效。...抽屉导航器：为了增加一丝优雅感，React Navigation引入了抽屉导航器。这就像在侧边有一个秘密滑动抽屉，提供额外的导航选项。时尚，对吧？..." component={ProfileScreen} />抽屉导航器这就是其魔力所在：用户可以使用流畅的滑动抽屉轻松访问“主页”和“详细信息”屏幕。

1360 0

再谈路由与导航，详谈Flutter是如何实现页面切换的

对于拥有多个页面的应用程序而言，如何从一个页面平滑地过渡到另一个页面，我们需要有一个统一的机制来管理页面之间的跳转，通常被称为路由管理或导航管理。...，就可以立即导航到这个页面。...下面的代码演示了如何注册错误路由处理。和基本路由的使用方法类似，我们只需要返回一个固定的页面即可。...下面的代码演示了如何传递并获取参数：使用页面名称 second_page 打开页面时，传递了一个字符串参数，随后在 SecondPage 中，我们取出了这个参数，并将它展示在了文本中。...可以看到，关于路由导航，Flutter综合了Android、iOS和React的特点，简洁而不失强大。而在中大型应用中，我们通常会使用命名路由来管理页面间的切换。

2.7K2 0

如何使用python切换hosts文件

做开发或测试时常需要切换hosts ，如果hosts比较多，那么频繁的打开hosts文件对地址加注释（#），再把去掉注释是个繁琐的事情。...https://github.com/oldj/SwitchHosts 　　但笔者还是自己尝试用python写个小程序来实现切换。以需求为驱动来解决日常的问题是件非常有意思的事。...这里只是通过修改#的方式来切换hosts ，那么你也可以将hosts定义一个数组，直接写入到HOST文件。通过写入不同的数组来达到切换不同hosts的目的。...inside_test() outside_test() 　　上面的方式会更加简单，把定义的host数组写到HOST文件中，注意：每写一个数组元素需要加一个回车换行—write(“\n”) 　　如果想继续增加切换...host的便捷性，可以使用wxPython写一个host的配置界面出来，那么也就是我们的SwitchHosts 工具了。

1.8K1 0

Mastercam如何使用分页，快速切换视角

使用分页可快速切换视角及图形，在多面加工时方便切换。分页开启位置在识图→开/关，如下图。开启后下方便会出现分页，如下图。...→屏幕视角: 依照先前储存视角做切换。 →图形:放在不同层别，切换分页时会依先前设定做开关。 →平面: 依照先前储存平面做切换。

1.2K2 0

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

（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面（3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕 ?...默认为左侧位置 contentComponent - 用于呈现抽屉内容的组件，例如导航项。接收抽屉的导航。...labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象二、案例 2.1StackNavigation案例集成第三方库使用npm安装react-navigation...使用该属性可以跳转到下一个界面。下面是HomeScreen中的代码。ChatScreen是第二个导航界面。...我们可以在这个属性里面设置抽屉导航的样式。

19.6K9 0

Android Q 手势导航背后的故事

我们从最基本的研究开始，了解用户如何持握手机，典型的触控范围有多大，以及用户最常用的设备部分。在此基础上，我们建立了许多原型，并对其进行了全面的测试，测试项目包括合意性、使用速度、人体工程学等等。...历尽几轮研究之后——用户学习新系统的速度有多快，需要多久的适应时间，使用感受如何——才得以敲定终版设计。返回键一直是 Android 导航独具魅力的设计点。...改变用户的导航习惯并不是我们的目标，因此，我们尝试了许多方法来帮助用户区分抽屉手势和返回手势，不过结果并不乐观，用户试着通过侧滑触发返回操作，但是仍旧拖曳出了抽屉界面，致使用户对返回操作的信任度下降。...而且一旦适应后，大多数用户反而不想切换回三键导航 (尽管设备依旧提供这个选项)。进一步的研究表明，在适应新的系统导航之前，用户会经历一个明显的调整阶段 (以便熟悉各种不同的导航操作)。...在 Android Q 模式下，返回手势在最初 3 天的使用频率较低，但过了这段时间之后，用户每天进行返回操作的次数将与三键导航及 Android P 导航中的次数持平。开发者该如何应对？

2.1K5 0

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

差不多翻译完iOS组建后，回来翻译MD～ Navigation drawer（抽屉式导航／汉堡导航） Material Design链接：Navigation drawer Navigation drawer...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。范围小于62.5％ ?...如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域 ?...---- Scrim（遮罩，仅用于modal 和 bottom） Modal navigation drawers 使用遮罩来阻止用户与 app 其余部分的交互。...Dismissible standard drawers 可用于内容优先（如照片库）的布局或用户不太可能经常切换目的地的 app，且应该使用可见的 navigation menu icon 来打开和关闭抽屉

3.8K4 0

导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。...06 抽屉式导航描述：抽屉式也是谷歌提出来的一种导航模式，由于虚拟按键的存在，所以在安卓上使用底部Tab会造成双底栏，视觉观感不佳；一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，或者不那么需要频繁切换内容的应用...缺点：用户不易发现，使用次功能需要二次点击，给用户在切换功能带来了操作成本；可见性太差，用户还没能把汉堡菜单按钮和侧边栏联系起来，所以，侧边栏的渗透率很低；不直观、不适用于主导航、如遇频繁操作的功能...07 下拉式/菜单导航描述：与抽屉式导航的目的相同，都是为了突出内容。...优点：菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置；缺点：位于屏幕上方，相对隐蔽且不能结合手势操作，不适合于频繁的切换功能使用；考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容

3.4K4 0

Bootstrap 面包屑导航（Breadcrumbs）如何操作使用

很简单操作，我来演示面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。...Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。...breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } 下面的实例演示了面包屑导航

1.6K3 0

Android开发之DrawerLayout实现抽屉效果

使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉没有打开时显示的布局（如FrameLayout），后面紧跟的子元素是抽屉内容，即抽屉布局（如ListView）。...抽屉菜单的宽度应该不超过320dp，这样用户可以在菜单打开的时候看到部分内容界面。...--可以在程序中根据抽屉菜单切换Fragment--> <FrameLayout android:id="@+id/fragment_layout" android...但是如果用的include加载的布局，会出现这个情况，那么如何解决？...drawerLayout.setScrimColor(Color.TRANSPARENT); 4、如何填充抽屉的划出后与屏幕边缘之间的内容（即上面的灰色部分）？

6K6 0

导航组件概览 | MAD Skills

您可以使用设计工具来创建导航目的地 (destination) 并定义导航路径，以及在您应用的导航图中切换目的地的相关操作 (action)。...我发现，观察 UI 中的各个部分在包含层级中的相互关系对于理解它们如何一起工作十分有帮助。为了查看这个部分，让我们来使用 Navigation Drawer Activity 模板创建另一个新工程。...大部分的导航相关的图像更新发生在 NavHostFragment 内部，但是系统中仍然存在其他需要更新且不在容器内的部件，比如我们上面看到的抽屉式导航栏，以及类似 tab bar 的元素 (该组件可以被用来展示当前目的地信息...总结这篇文章只是关于导航组件的一个快速概览，目的是为了让您体验如何创建一个可以使用导航功能的应用，以及看一下这种应用的大致结构。...在未来的文章和视频中，针对如何同特定导航 API 进行交互，我会介绍更多的技术细节，比如导航到对话框目的地、使用 SafeArgs 以及处理深层链接。

1.6K3 0

App之底部导航栏的设计

今天来总结下app的底部导航栏的设计。我为什么写这个系列的文章。因为我正在做一款app，我在团队中主抓产品设计、UX/UI设计、部分前端开发，少量运营。...先来看看app常用的导航模式有哪些：列表式、网格式、标签导航、抽屉式导航等。...这里把抽屉式的汉堡包按钮，变成了“更多",我们可以把一些不常用的功能全部收纳到这里。 3、然后其中居中的一个按钮可以展开更多的选项，把底部导航栏变成网格式或者列表式的导航模式。...“我的”模式是最常见的，满足了用户在各个功能之间的频繁切换。各个功能项是同等重要的。 “更多”模式是突出其他几项功能，把次要功能全部收入更多里。...“中间功能项突出”模式，主次分明，把最频繁使用的功能置于中间，也有的中间功能键起到收纳作用，点击是开启更多选项。

4.8K11 0

Anroid Wear OS 手表应用开发 - UI

当存在多个页面时，通过左右滑动它来切换页面。...} 复制代码这里面的 controller.peekDrawer() 是让导航栏在顶部露出一小部分，提示用户这里是有东西可以下滑的，也可以调用 controller.closeDrawer() 完全隐藏导航栏...操作抽屉栏当需要对当前页面进行一些操作的时候，但页面里又没有空间再放按钮了怎么办？既然可以从顶部下拉出导航栏，要不在底部上拉出一个操作栏？...自定义抽屉栏导航栏 WearableNavigationDrawerView 和操作栏 WearableActionDrawerView 用起来很简单，但是它们的样式是固定的，一个只能显示图标加标题...它包裹了抽屉栏的主视图 drawer_content 和关闭时露出部分的视图 peek_view。

2.5K3 0

模态对话框-B 类产品设计细节：对话框 vs 抽屉

抽屉的模态 vs 非模态项目管理工具 Jira 的帮助文档入口在页面右侧，点开后从右侧划入非模态抽屉展示内容，这样便于用户进行对照查看和操作：搜索功能入口在页面左侧中的导航中，点开后从左侧划入模态抽屉进行交互...模态抽屉 vs 非模态对话框上一案例来自之前的 Jira，当前版本的 Jira 对导航和交互模式进行了调整，例如通知模块由模态抽屉改为了非模态对话框，出现的位置均遵循就近原则，体验上非模态对话框更加轻量...原来由左侧划入的模态抽屉，点击左侧导航后从左侧划入：当前版本使用非模态对话框模态对话框，点击顶部导航后在 icon 下方出现： 4....非模态抽屉的优点是，用户可以同时查看下面的父级页面中其他任务的标题，并快速点击切换到其他需求；而模态对话框的优点是用户可以完全沉浸在当前的任务中，同时顶部也增加了「上一条」、「下一条」按钮，支持上下条快速切换...模态抽屉 vs 气泡卡片文档工具中，产品功能和交互都很简洁轻量，没有出现对话框组件，在文档中插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉，而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片

1.7K2 0

TAB导航与侧边抽屉导航的巅峰对决

但从另外一个角度来说，没有那一排tab导航，让设计看上去干净多了，把导航放进侧边抽屉里，让主内容区域有了更大的空间余地。侧边抽屉导航这种设计模式兴起于18个月前。...抽屉导航和tab导航对用户使用频率的影响周使用频率在下降（对比明显），日使用频率在下降，用户在应用中花费的时间在下降。侧边栏导航在第一轮测试中看起来像个灾难。...感谢A/B test，让我们在一段时间的验证后快速的将所有用户切换到了tab导航的方案。如果关于使用侧边栏还是tab的争论也出现在你们团队中，我想我们的研究经验值得与你们分享。...在我的安卓设备上显示的是下图左一的方案（通过二级tab切换不同页面），在我同事的手机上显示的是右一的方案，通过（侧导航切换不同页面）。...facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应，我很期待facebook对这一测试的最终结果。 ?

2.7K7 0

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

path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到； navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight...drawerWidth: 设置侧边菜单的宽度； drawerPosition: 设置侧边菜单的位置，支持’left’、 ‘right’，默认是’left’； contentComponent: 用于呈现抽屉导航器内容的组件...接收抽屉导航器的 navigation 属性。默认为DrawerItems。...有关详细信息，请参阅下文； contentOptions: 配置抽屉导航器内容，见下文; useNativeAnimations: 是否启用Native动画，默认启用； drawerBackgroundColor...();；其他API 【案例1】使用DrawerNavigator做界面导航、配置navigationOptions、自定义侧边栏 ?

7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭