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

Angular 6中带Angular-material/Bootstrap的可滑动/可拖动侧边导航栏

Angular 6是一种流行的前端开发框架,它提供了丰富的功能和工具,使开发人员能够构建现代化的Web应用程序。Angular-material和Bootstrap是两个常用的UI组件库,它们提供了丰富的可重用组件,可以帮助开发人员快速构建漂亮的用户界面。

可滑动/可拖动侧边导航栏是一种常见的UI设计模式,它允许用户通过滑动或拖动操作来展开或收起导航栏,以便在有限的屏幕空间中更好地利用空间。

在Angular 6中,我们可以使用Angular-material或Bootstrap来实现可滑动/可拖动的侧边导航栏。这两个UI组件库都提供了相应的组件和指令,可以轻松地实现这个功能。

对于Angular-material,我们可以使用MatSidenav组件来创建可滑动/可拖动的侧边导航栏。MatSidenav组件提供了一些属性和方法,可以控制导航栏的状态和行为。我们可以通过设置opened属性来控制导航栏的展开和收起,通过设置mode属性来指定导航栏的模式(滑动或覆盖)。具体的使用方法和示例可以参考腾讯云的Angular-material文档:Angular-material

对于Bootstrap,我们可以使用Collapse组件和Draggable插件来实现可滑动/可拖动的侧边导航栏。Collapse组件可以用来控制导航栏的展开和收起,Draggable插件可以用来实现导航栏的拖动功能。具体的使用方法和示例可以参考腾讯云的Bootstrap文档:Bootstrap

总结起来,无论是使用Angular-material还是Bootstrap,我们都可以轻松地实现Angular 6中带有可滑动/可拖动侧边导航栏的功能。这种导航栏可以提供更好的用户体验和界面交互,适用于各种Web应用程序,特别是那些需要在有限的屏幕空间中展示大量导航链接或菜单项的应用程序。

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

相关·内容

教你实现一个悬浮可拖动并在滑动页面时会自动收缩的vue侧边组件按钮

一、前言 实现一个悬浮可拖动且可自定义的一个侧边按钮,在实际的业务开发中可以根据业务需要进行调整 效果图 最终实现的效果,在移动端收缩时可以加点延时判断增加一下最终的流畅性 二、创建组件 创建一个div...动态赋值高度、宽度等属性,内部包裹元素我这里用的是一张图片,实际可以根据需要展示不同的内容。...touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。...当组件开始滑动时判断上次滑动距离是否等于监听到的Old值,等于则说明开始滑动,这时我们可以将组件距离侧边的距离减去组件自身的一半宽度+组件默认距离侧边的距离,这样就可以实现在滑动组件时组件收缩到页面内侧的一个效果...结束滑动时判断滑动距离是否等于页面水平滚动的像素数,等于则代表了停止滑动,这时判断一下当前组件在页面左侧还是右侧并调整相关的距离参数,这样就实现了停止拖动按钮时按钮自动回缩至侧边的效果。

5.2K40

iOS好用的第三方侧边栏控件——MMDrawerController

,如下: //只创建带左侧边栏的视图控制器 -(id)initWithCenterViewController:(UIViewController *)centerViewController leftDrawerViewController...:(UIViewController *)leftDrawerViewController; //只创建带右侧边栏的视图控制器 -(id)initWithCenterViewController:(UIViewController...MMOpenDrawerGestureMode) { //没有手势 此模式为默认模式 MMOpenDrawerGestureModeNone = 0, //在导航栏上拖动时可以打开侧边栏...MMCloseDrawerGestureModeNone = 0, //在导航栏上拖动时可以关闭侧边栏 MMCloseDrawerGestureModePanningNavigationBar...点击导航栏时可以关闭侧边栏 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边栏

2.9K20
  • iOS开发常用之网络

    文字及图片可扩展输入栏,汽泡效果等聊天核心特性,分页及自动布局完善。 DLSlideView - DLSlideView对常见的顶部Tab页点击,滑动分页做了封装。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...HYBImageCliped - 可给任意继承UIView的控件添加任意多个圆角,可根据颜色生成图片且可带任意圆角,给UIButton设置不同状态下的图片且可带任意圆角,给UIImageView设置任意图片...PKRevealController - PKRevealController是一个可以滑动的侧边栏菜单(可向左,向右或者同时向两侧),只需手指轻轻一点(或者按一下按钮,但是这样滑动时不够炫酷),这类控制的其他库...MMDrawerController - 最多人用的一个有关侧边“抽屉”导航框架,里面还有很多你意想不到的交互效果,侧滑。

    23.7K10

    React 侧边栏组件 Sidebar

    一、引言在现代Web应用中,侧边栏(Sidebar)是一个非常常见的用户界面元素。它通常用于提供导航菜单、工具选项或其他辅助信息,帮助用户更方便地浏览和操作应用。...,并通过transform属性实现了滑动动画效果。...为了解决这个问题,我们可以采用媒体查询或者使用专门的响应式框架(如Bootstrap)来调整侧边栏的布局和行为。...(三)可访问性问题侧边栏不仅要有良好的视觉效果,还必须具备良好的可访问性。这意味着要确保所有用户,包括那些依赖辅助技术(如屏幕阅读器)的用户,都能够顺利使用侧边栏。...isOpen)}> Toggle Sidebar(四)路由集成错误当侧边栏包含导航链接时,通常会与React Router等路由库结合使用。

    20010

    Ng-Matero v15 正式发布

    侧边栏导航的焦点管理 侧边栏导航的聚焦功能是在 14.3.0 中添加的,可能很多人没有注意到这个不显眼的功能(使用 TAB 键即可快速的切换焦点,按 space 或者 enter 键可以展开收起二级菜单...但是我并没有借助 CDK 来实现侧边栏导航的聚焦,只是使用了原生的 HTML 标签,具体方法不在此赘述,感兴趣的小伙伴可以留言咨询。...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮的选择可以参考 Angular Material 在 Button 文档中的说明: Angular Material 使用原生的 ...基于 MDC 的 Angular Material 组件 我觉得 v15 最大的变化不是 Angular,而是 Angular Material。...Ng-Matero 早就有一套和 Flex-Layout 断点相同的 grid class,只要将指令替换成 CSS class 就可以,使用方式和 Bootstrap 是一样的。

    5.5K40

    史上最全的前端资源大汇总

    Angular JS ---- Angular.js 的一些学习资源 angularjs中文社区 Angularjs源码学习 Angularjs源码学习 angular对bootstrap的封装 angularjs...开发指南 angularjs 英文资料 angular bootstrap angular jq mobile angular ui 整合jQuery Mobile+AngularJS经验谈 有jQuery...移动端图轮 ---- 滑屏效果 全屏fullpage 单个图片切换 单个全屏切换 百度的切换库 单个全屏切换 滑屏效果 旋转拖动设置 类似于swipe切换 支持多种形式的触摸滑动 滑屏效果 大话主席...直接调用原生分享的工具 JiaThis 分享到微信代码 聊聊移动端跨平台开发的各种技术 前端自动化测试 多种轮换图片 滑动侧边栏 46....前端导航网站 ---- 界面清爽的前端导航 前端导航 前端网址导航 前端名录 前端导航 前端开发资源 前端开发仓库 - 众多效果的收集地 前端资源导航 F2E 前端导航 72.

    13.5K61

    使用 Angular Transfer State 的一个具体例子

    使用 Angular Transfer State 的一个具体例子 Using TransferState API in an Angular v5 Universal App 让我们用一个具体的例子来说明这篇文章...我们有一个天气应用程序,在其侧边栏中显示城市列表。 当您单击城市名称时,该应用程序会显示该城市的当前天气。...因为我们希望我们的应用程序是可抓取和可索引的,所以我们使它通用:城市页面在服务器上呈现,存储为 HTML 文件并由 HTTP 服务器提供服务。...这些页面将包含浏览器应用程序,因此用户可以在加载第一页后使用 Angular 的强大功能继续在应用程序中导航。 您可以按照以下步骤尝试这个简单的示例。...@NgModule({ imports: [ AppModule, ServerModule, ServerTransferStateModule ], bootstrap

    68300

    最新iOS设计规范三|3大界面要素:栏(Bars)

    在iOS 13及更高版本中,默认情况下,大标题导航栏不包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航栏的边框。...在iOS 13及更高版本中,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间的联系感。...三、侧边栏(Sidbars) 侧边栏在iPhone上使用较少,更多的用在iPad。它提供了应用程序的导航,在侧边栏中选择一项可以使人们导航到特定的内容。例如,“邮件”中的边栏显示所有邮箱的列表。...补充工具栏是拉平信息层次结构并同时提供对多个对等信息类别或模式的访问的一种好方法。使用侧边栏可快速导航到应用程序的关键部分或文件夹和播放列表之类的顶级内容集合。 尽可能让用户自定义边栏的内容。...允许用户隐藏侧边栏以为其内容创造更多空间,并使用内置的边缘滑动手势再次显示侧边栏。避免在默认情况下隐藏边栏。 侧边栏中的标题要保持简洁明了。省略不必要和多余的词。

    9.9K10

    超好看的30款网站侧边栏设计

    第一部分:为什么需要网站侧边栏? 侧边栏其实就是一种比较经典的网站导航设计,它的形式通常为竖向的一列,展示在网站的右侧或者左侧,具体的位置当然是取决于整体的设计。...但一般来讲,由于视觉习惯和用户行为,侧边栏位于左侧更容易第一时间吸引用户注意力,因而也能很高效地给用户提供导航;而右侧的侧边栏则常被看做是二级导航,因而可以丰富网站的结构层次。...Intechnic Intechnic具有纯文本排列的侧边栏,还有关闭选项。 ? 22. Wiggs photo Wiggs photo的侧边栏集Logo和导航于一体。 ? 23....这里有一个之前做过的网站模板,其中包含了侧边栏元素: ? 点击获取源文件,导入mockplus可自定义设计。...此外,使用一些现成的导航模板也是一个不错的方法,推荐这30个优秀Bootstrap导航模板,用户访问又快又准。 设计+协作,摹客就够了!

    12.7K10

    手势魅力-设置一个触摸菜单

    (touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...-- 左侧带单栏开始 --> 的中间,并且拖动的速度大于定义的速度(也就是若手指拖动侧边栏超过该菜单栏本身宽度的一半位置的话,或者拖动的速度大于刚开始定义的速度,则该侧边栏就关闭或者打开的,若不是,则恢复初始前一个位置的...DOM中的实际位置,这时,需要考虑手指是水平滑动还是垂直,甚至有时候还得考虑手倾斜的滑动,还要区分是一根手指滑动,还是多根手指滑动,侧边菜单栏动画的实现,以及要注意阻止默认事件,重叠计算等等一些细节 看似简单的效果...(设置限制),也就是侧边栏菜单滑动的位置 重叠计算(透明度变化,也就是用小数来计算,百分比值) 动画结束(菜单栏打开和关闭状态,菜单栏的位置) 以下是本文陌生词汇(仅供参考) 1.

    1.9K40

    Flutter实现电影院选座效果!

    Column(不能用ListView,同样会造成滑动冲突) 交互分析&实现 放大缩小拖动效果: 对于放大缩小拖动的效果,Flutter现在有自带的组件InteractiveViewer 通过这个组件可完美实现放大缩小效果...这个交互效果的真正难点是这个跟随滑动效果。 由于左边的导航条是固定在最左侧的,而座位表可以全屏拖动,所以这座位表和导航条不能放在一个缩放组件里, 不然座位表放大的时候,直接将导航条放大出屏幕了。...结果: 失败,InteractiveViewer的滑动是通过Matrix4实现的,和ListView的滑动冲突。 同步滚动实现了,但是放大缩小的拖动无法执行。...这里必须特别注意:座位表和导航条组件的单个item的高度必须完全相同,包括margin,padding,不然还是会出现错位现象 至此,最大的难点同步缩放和滑动就解决了。...屏幕宽-异形屏左右padding-横屏时右侧悬浮框width(竖屏时悬浮框如不在右侧,则为0)- 导航条宽度(这个导航栏宽度也需要根据放大缩小倍数动态计算)-其他自己加的布局宽。

    1.6K30

    Flutter实现电影院选座效果!

    Column(不能用ListView,同样会造成滑动冲突) 交互分析&实现 放大缩小拖动效果: 对于放大缩小拖动的效果,Flutter现在有自带的组件InteractiveViewer 通过这个组件可完美实现放大缩小效果...这个交互效果的真正难点是这个跟随滑动效果。 由于左边的导航条是固定在最左侧的,而座位表可以全屏拖动,所以这座位表和导航条不能放在一个缩放组件里, 不然座位表放大的时候,直接将导航条放大出屏幕了。...结果: 失败,InteractiveViewer的滑动是通过Matrix4实现的,和ListView的滑动冲突。 同步滚动实现了,但是放大缩小的拖动无法执行。...这里必须特别注意:座位表和导航条组件的单个item的高度必须完全相同,包括margin,padding,不然还是会出现错位现象 至此,最大的难点同步缩放和滑动就解决了。...屏幕宽-异形屏左右padding-横屏时右侧悬浮框width(竖屏时悬浮框如不在右侧,则为0)- 导航条宽度(这个导航栏宽度也需要根据放大缩小倍数动态计算)-其他自己加的布局宽。

    1.6K10

    Material Design — 底部导航(Bottom Navigation)

    点击底部导航的图标可以:1、直接将你带到相关页面;2、刷新当前页面。 底部导航主要用于移动端,为了在pc端实现类似效果,可以使用侧边导航。...更大的显示器,如pc端,可以通过使用侧边导航实现类似的效果。例如,紧凑的“rail”处理处理方式默认展示导航图标。 ? 左:移动端    右:pc端 什么时候用?...超过6个不要在底部导航用可滚动的内容形式 ?...底部导航栏不应用于: ·专注于单一任务的观点,如电子邮件“撰写”页面。 ·包含用户首选项或设置的页面 在Android上,后退按钮不在底部导航栏视图之间导航。...滚动 底部导航栏滚动时可以动态地出现和消失: ·向下滚动隐藏底部导航栏 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

    4.1K90
    领券