- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在 Angular 中创建一个菜单系统,它支持左右两侧的菜单和子菜单,并且在移动设备上看起来不错。我已经能够使用 ngx-bootstrap 获得最大的成功,我已经尝试了一些其他的库但收效甚微。
我的代码的问题是,在移动 View 中,它只能部分工作,初始菜单看起来不错,但单击菜单仍会创建弹出窗口。如果我去掉一些 container="body"参数,它在移动设备上可以正常工作,但在桌面设备上不行。
https://stackblitz.com/edit/angular-hmmqx1
菜单.组件.html
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler navbar-toggler-right nav-link" (click)="isCollapsed = !isCollapsed" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars">Menu</i>
</button>
<div class="navbar-collapse collapse" container="body" [collapse]="isCollapsed" id="navbarNavDropdown">
<ul class="navbar-nav col-md-12">
<li *ngFor="let menu of leftItems" class="nav-item">
<div *ngIf="!menu.items" container="body">
<a *ngIf="!menu.items" class="nav-link" href="#">
<i *ngIf="menu.icon" class="{{ menu.icon }}"></i>{{ menu.label }}
</a>
</div>
<div *ngIf="menu.items" class="navbar-collapse collapse" dropdown container="body" [collapse]="isCollapsed">
<a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#">
<i class="{{ menu.icon }}"></i>{{ menu.label }}
</a>
<ul *dropdownMenu class="dropdown-menu">
<ng-container *ngFor="let item of menu.items">
<li *ngIf="!item.items" role="menuitem">
<a class="dropdown-item">
<i *ngIf="item.icon" class="{{ item.icon }}"></i>{{item.label}}
</a>
</li>
<li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top right" container="body">
<a class="dropdown-item" (click)="false">{{ item.label }}<i class="fas fa-caret-right dropdown-submenu"></i></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<ng-container *ngFor="let submenu of item.items">
<li role="menuitem">
<a class="dropdown-item" href="#">
<i *ngIf="submenu.icon" class="{{ submenu.icon }}"></i>{{ submenu.label }}
</a>
</li>
<li *ngIf="submenu.divider" class="divider dropdown-divider"></li>
</ng-container>
</ul>
</li>
<li *ngIf="item.divider" class="divider dropdown-divider"></li>
</ng-container>
</ul>
</div>
</li>
<li class="nav-item ml-auto"></li>
<li *ngFor="let menu of rightItems" class="nav-item">
<div *ngIf="!menu.items" container="body">
<a *ngIf="!menu.items" class="nav-link" href="#">
<i *ngIf="menu.icon" class="{{ menu.icon }}"></i>{{ menu.label }}
</a>
</div>
<div *ngIf="menu.items" dropdown container="body" placement="bottom right">
<a class="nav-link dropdown-toggle" dropdownToggle (click)="false" href="#"><i class="{{ menu.icon }}"></i>{{ menu.label }}</a>
<ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
<ng-container *ngFor="let item of menu.items">
<li *ngIf="!item.items" role="menuitem">
<a class="dropdown-item">
<i *ngIf="item.icon" class="{{ item.icon }}"></i>{{item.label}}
</a>
</li>
<li *ngIf="item.items" role="menuitem" dropdown triggers="mouseover" placement="top left" container="body">
<a class="dropdown-item" (click)="false"><i class="fas fa-caret-left dropdown-submenu-left"></i>{{ item.label }}</a>
<ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
<ng-container *ngFor="let submenu of item.items">
<li role="menuitem">
<a class="dropdown-item" href="#">
<i *ngIf="submenu.icon" class="{{ submenu.icon }}"></i>{{ submenu.label }}
</a>
</li>
<li *ngIf="submenu.divider" class="divider dropdown-divider"></li>
</ng-container>
</ul>
</li>
<li *ngIf="item.divider" class="divider dropdown-divider"></li>
</ng-container>
</ul>
</div>
</li>
</ul>
</div>
菜单.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
})
/**
* Main Menu
*/
export class MenuComponent implements OnInit {
leftItems: any[];
rightItems: any[];
isCollapsed = true;
ngOnInit(): void {
this.leftItems = [
{
label: 'Single Item',
routerLink: '/single'
},
{
label: 'Left Menu',
icon: 'fas fa-puzzle-piece',
items: [
{label: 'Something', routerLink: '/something'
},
{label: 'Templates', routerLink: '/templates', divider: true},
{label: 'Proposals', routerLink: '/props'},
{label: 'Other Things', routerLink: '/other', divider: true},
{label: 'Submneu', items: this.getDynamicMenu() },
{label: 'New Stuff', routerLink: '/new', icon: 'fas fa-plus'},
]
},
];
this.rightItems = [
{
label: 'Help', icon: 'fas fa-life-ring',
items: [
{label: 'Help Docs', items: [{label: 'Submenu Test'}]}
]
}, {
label: 'User', icon: 'fas fa-user',
items: [
{label: 'Logout'}
]
},]
}
getDynamicMenu() {
const testNames = ['Test1', 'Test2', 'Test3'];
const dynamicSubmenu = [];
for(const menuName of testNames) {
dynamicSubmenu.push({label: 'Submenu - ' + menuName, routerLink: '/submenus/' + menuName.toLowerCase()});
}
return dynamicSubmenu
}
}
最佳答案
你必须改变菜单的放置方向,你没有改变移动 View 的放置方向,为什么它在右侧显示帮助,当移动放置=“底部”时试试这个,在大屏幕上这是很好的放置= “右下角”需要时间来弄清楚,对于屏幕尺寸,您可以查看此线程 Detect window size using Angular 4
此媒体查询在屏幕尺寸较小时发挥作用
@media (min-width: 576px)
{
}
关于angular - ngx-bootstrap 下拉菜单在移动 View 中嵌套子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55800043/
是否可以为 ngx-bootstrap 日期选择器全局配置日期格式? 该文档提到了 BsDatepickerConfig 类以及如何将其传递给每个单独的日期选择器,但我有点惊讶似乎不可能全局配置它(至
@swimlane/ngx-datatable 虚拟滚动仅适用于缓存行。缓存的行保留在数组中。就我而言,该行的数量可能超过 1000 万。如何不缓存那些行并使用虚拟滚动? 问题重现: 1) 没有缓存行
我需要一个堆叠条形图和折线条形图之间的组合图,你能帮我举个例子吗?我正在阅读此文档:Demo for combo charts 但是我无法理解这个例子。 最佳答案 对于在搜索包含组合图表的方法时偶然看
我正在为我的 angular6 项目使用 NGX-Bootstrap。我有反应形式并向它添加了日期选择器,同时从日期选择器返回值获得完整格式例如:“2018-11-07T05:12:35.000Z”。
您如何将 customColor 属性用作函数? 我希望构建一个散点图,并将所有负值的点标记为红色,将所有正值的点标记为绿色。我认为 customColor 功能可以让我这样做,但我只看到 custo
同时ngx-i18next是 i18next 的包装我特别想知道 ngx-translate 之间与翻译相关的差异是什么和i18next . 最佳答案 i18next 是非 Angular 专有的 -
我目前正在开发 Angular CLI 应用程序。几个小时前我完成了一些部分,关闭项目,现在我想再次运行项目以继续我的工作。但是我没有成功编译项目,而是在 ngx-bootstrap 模块上遇到错误。
我是 Angular 4 和 ngx-datatable 的新手,但我遇到了困难。现在,我有一个带有简单 rowDetail 的 ngx-datatable,就像显示的一样 here .问题是我需要
在我的元素中,我使用的是 bootstrap 4 和 ngx-bootstrap。现在我需要创建一个组件,其中包含 2 个可滚动的 div,通过选项卡切换。 我想在 stackblitz 中展示一个示
我不完全理解触发器对 https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom 到底做了什么的概念 例如,当我们这样做时:
我在使用 ngx-translate-messageformat-compiler 插件时遇到了问题(添加复数形式后 json 文件解析失败)。 ¿有其他选择吗? 最佳答案 我决定实现一个自定义管道:
我已安装 ngx-bootstrap使用命令 npm install ngx-bootstrap --save但是当我尝试构建解决方案时,它仍然说 ERROR in src/app/app.modul
我对 Angular 还很陌生。我运行这个来开始我的项目:git 克隆 https://github.com/angular/quickstart appName 我将其更新到 Angular 4,一
我尝试在使用 system.js 的 Angular 4 项目中使用 ngx-datatable 来加载模块,但它会抛出如下错误: Can't bind to 'rows' since it isn'
我执行了以下步骤 (1)新建angular-cli项目(angular-cli 1.5.0) (2) 添加依赖: npm i @ngx-translate/core @ngx-translate/ht
我想对 ng2-select 中的项目使用 ngx-translate。我能想到的唯一方法是在绑定(bind)之前使用翻译服务并在 ts 文件中改变项目的文本。 有没有办法使用管道或指令,因为我想让它
我有一个带有嵌套翻译的翻译文件: ... "LANG": { "Dutch": "Néerlandais", "English": "Anglais", "French": "
这是我第一次更新角度。版本是10.2.3,我需要更新到11。我正在遵循官方文档中的指南。。我在控制台“Package”@Nicky-lenaers/NGX-SCROLL-TO“对”@ANGLING/C
我在 Angular 6 中使用 ngx-toastr 进行 http 错误通知,就像在 httpInterceptor 中注入(inject) ToastrService export cl
我安装了 ngx-clipboard,如 documentation 中所述并将 js 也包含在 systemjs.config 中。但是我收到以下错误: Unhandled Promise reje
我是一名优秀的程序员,十分优秀!