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应用程序，特别是那些需要在有限的屏幕空间中展示大量导航链接或菜单项的应用程序。
相关·内容
我正在尝试在angular 6中使用angular-material实现垂直可滑动/可伸展的侧边导航栏，但我坚持使用鼠标来实现导航栏的伸展。代码如下所示。 html代码如下所示。我也可以转移到Bootstrap，但最后。
浏览 19提问于2019-05-08得票数 1
1回答
在上面的fullcalendar演示中，来自单独DIV (侧边栏)的外部事件是可拖放到日历的，当勾选了"remove after drop“框时，拖放到日历后的事件将从列表中删除。当一个事件被移除时，我想给可拖动事件侧边栏中剩下的其他DIVs添加一个缓解或类似的效果，这样观众就会知道有什么东西从列表中被移除了。有没有一种jquery方法可以向上滑动已删除项下面的剩余项(D
浏览 2提问于2012-06-04得票数 0
回答已采纳
我目前在一个网站的H1Z1Atlas.com上工作，我有一个问题，当侧栏内容超过页面时，侧栏没有可滚动导致内容不显示。我在页面上也使用了twitter的bootstrap导航栏，有没有什么简单的修复方法来获得一个动态滚动条？
这里有一个图片的链接。有更多的层行，但是当屏幕尺寸变小时，它们就会消失，而不是显示侧边栏。由于angular.js的缘故
浏览 3提问于2015-02-07得票数 0
3回答
这描述了问题：https://www.codeply.com/p/YFfrDC5Bz2 我希望在剩余的视区高度上拉伸侧边栏，以便页脚始终可见，而bootstrap 4导航栏可以是任何高度。换句话说，我根本不想让侧边栏滚动，因为只有内容是可滚动的。
浏览 45提问于2020-11-07得票数 0
如何创建一个div，它既像一个相对定位的div (因为它不允许后面有元素)，又像一个绝对定位的div (因为它可以自由定位)？如果需要，我愿意使用javascript和jQuery。
浏览 2提问于2012-04-14得票数 0
回答已采纳
在我的angular应用程序中，body有一个ng-swipe right和left来切换侧边栏。问题是当我的页面中有一个可滚动的水平DIV时。它不能滚动，因为身体被划了一下。sidebar = false"></body>
有没有办法防止<e
浏览 4提问于2014-08-11得票数 6
1回答
每项活动的侧边栏
、、
对于我正在设计的应用程序，我们必须处理用户的“特殊”需求。其中之一是创建一个导航侧边栏，它必须出现在几乎所有的活动中。这个导航栏必须始终包含三个链接到三个活动的按钮: HOME，INFO，CONFIGURATION。
这三个活动中的每一个都可以加载其他可以(或不能)包含此导航栏的活动。这些按钮中的每一个都必须重置当前的活动堆栈状态，将用户选择<e
浏览 3提问于2013-04-22得票数 0
回答已采纳
我在使用angular和angular-material框架的组件设计上遇到了一些问题。在选择列表的上方，我添加了一个包含一项的常规mat-list。对于“全选”实用程序，我使用了相关的、可单击的ma
浏览 6提问于2018-01-01得票数 2
回答已采纳
1回答
我正在寻找一个响应性的，可拖动(水平大小可调)侧栏的模板。可选的基于bootstrap (我使用的是bootstrap 4.6，但其他版本也可以)，可以使用jQuery。我试着为可拖动的div使用一些代码，但它们不起作用，因为上面的模板中使用了负边距，还有一些是用来搜索侧边栏(以及大多数其他响应式侧边栏模板)(
浏览 0提问于2021-04-12得票数 0
2回答
在新的Gutenberg编辑器体验中，我正在开发一些自定义块，我很难理解如何使用一些内置组件，主要是可拖放的组件。我想要实现的是一个项目列表(假设在一个ul中有很多D1)，我希望它们可以通过拖放功能进行排序。这是我的代码：import { registerBlockType } from '@wordpress/blocks';{
// Re
浏览 0提问于2018-12-14得票数 3
HTC sense手机上的footprints和clock应用程序使用底部按钮栏上的滑块控件(例如：)。有谁能就我如何实现这一点给出一些建议吗？我知道如何创建标签和按钮栏，但我对<em
浏览 0提问于2010-10-13得票数 1
1回答
我开始了一个小的symfony项目，其中我在app.css上加载bootstrap。在app.css上我还有另一个include "navigation.scss“，在上面我使用了bootstrap混合和它包含在基本布局模板中。问题是，如果我在webpack.config.js中创建另一个入口点，将css文件添加到扩展布局的第二个模板中，bootstrap将起作用，但我无法从bootstrap访问混合函数，唯一的解决方案是在css文件中也导入boots
浏览 0提问于2020-06-04得票数 0
1回答
我希望做的是基于Angular-UI--ROUTING和Angular-Material库实现一个可滑动的导航。我想要完成的是能够在标签上滑动，如果用户想要更改到另一个。因此，如果用户在显示"Tab #2“的地方滑动，他们就可以在不点击TAB3的情况下移动到TAB3。下面是我到目前为止创建的选项卡式导航的示例图片：
浏览 2提问于2015-06-25得票数 2
1回答
我已经创建了一个隐藏的侧边栏导航菜单，当它变得可见时-将站点包装(页面的主要内容)移到右边以公开菜单：
.nav-trigger:checked + label, .nav-trigger:checked如果您触摸站点包装的左侧边缘并将其拖动到左侧，它将按该方向滚动页面--就好像它正在将站点包装拖回其后面的导航元素。我之所以难以解决这个问题，部分原因是因为我不完全确定要搜索什么，它似乎不是传统意义上的卷轴，更多的是在
浏览 0提问于2015-08-06得票数 0
回答已采纳
1回答
我在一个常规的主页上工作，有一个水平导航栏(twitter bootstrap风格)。
问题:根据您进入网站时的输入，页面将在导航栏中显示多个按钮。它可能会显示4个按钮或20个按钮，具体取决于输入。当有太多按钮时(简单的如果按钮> x)，我想要应用一个水平滑块，当用户单击上一个/下一个按钮时，它将动画/滑动一个按钮。Hoverscroll还可以，但我需要一些基于点击的东西，而不是鼠标悬停。BxSlider在每
浏览 0提问于2012-10-23得票数 0
回答已采纳
4回答
我试图使用Bootstrap制作一个侧边栏，但我希望它能够一直延伸到底部。代码： </footer>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7
浏览 3提问于2017-01-24得票数 7
回答已采纳
因此，我在我的项目中使用SWRevealViewController作为侧边栏菜单，但是我希望当用户从视图的左边边缘触摸时，侧菜单会打开。我希望这样做，因为我有另一个swipeGestureRecognizer，用于左、右swipe.For，添加左、右滑动，我使用以下代码：我使用这段代码打开边菜单，在屏幕的任何部分进行摇摄。[self.view addGestureRecognizer: sel
浏览 7提问于2015-08-05得票数 2
回答已采纳
1回答
日安，这个插件为Ionic应用程序中的可滑动选项卡提供了一个很好的功能。在文档中，它展示了如何隐藏工具栏(我已经成功地做到了这一点)。现在，我希望能够将工具栏替换为ion-slides类型的特性，比如pager，以向用户展示他们可以向左或向右滑动以访问其他页面，或者更确切地说，是选项卡。以下是我的当前代码：import { Component } from '@<
浏览 0提问于2018-02-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
