标签: sidenav

带有词缀的Sidenav - 链接不会换行到下一行

如果我有以下内容,链接文本将包装到下一行:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

Run Code Online (Sandbox Code Playgroud)

但是,如果我添加词缀,文本将保持在同一行并重叠到主内容列上:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix">
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

Run Code Online (Sandbox Code Playgroud)

有没有办法用css解决这个问题？另外,我可以在不编辑当前CSS的情况下完成.

这是一个演示溢出的小提琴:https: //jsfiddle.net/75nLbwyb/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Example of navbar overflow</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> …

Run Code Online (Sandbox Code Playgroud)

css web twitter-bootstrap sidenav

Rob*_*boy

2017 08-14

7
推荐指数

2
解决办法

534
查看次数

Angular mat-sidenav属性是Handset $ | 异步解释

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'push' : 'push'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

Run Code Online (Sandbox Code Playgroud)

我不明白代码中写的是什么,(isHandset$ | async)请解释一下

angular-material sidenav angular6 mat-sidenav

Get*_*hma

lucky-day

7
推荐指数

1
解决办法

2495
查看次数

强制带有工具栏的 Angular Material 侧导航容器填充高度

我无法让 Angular Material 侧导航容器填充屏幕的高度。侧导航以及侧导航内容的高度正好适合其内容。我想让它的高度填满屏幕。

导航组件的 HTML：

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="isHandset$ | async">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
    <span>Title</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      (click)="closeDrawerIfHandset(drawer)">
      <mat-nav-list>
        <a mat-list-item routerLink="/">Home</a>
        <a mat-list-item routerLink="/link1">Link1</a>
      </mat-nav-list>
  </mat-sidenav> 
  <mat-sidenav-content>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Run Code Online (Sandbox Code Playgroud)

父（根）组件的 HTML：

<main-nav>
    <router-outlet></router-outlet>
</main-nav>

Run Code Online (Sandbox Code Playgroud)

我真的没有应用CSS：

.sidenav {
  width: 200px;
}

Run Code Online (Sandbox Code Playgroud)

它看起来是这样的：

我已经尝试将 mat-sidenav-container 设置为全屏，但这隐藏了 mat-工具栏。当我将容器设置为具有“顶部：”以便再次显示工具栏时，滚动不足以显示整个页面内容。

Stackblitz …

angular-material angular sidenav mat-sidenav

luh*_*uhu

2019 08-29

6
推荐指数

1
解决办法

4177
查看次数

如何使用物化css的sideNav与反应？

我正在用React开发一个应用程序,我想使用sidenav组件http://materializecss.com/side-nav.html

问题是我收到了这个错误:

Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav is not a function
    at HTMLDocument.<anonymous> (Sidebar.js:8)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

Run Code Online (Sandbox Code Playgroud)

我对导入组件,库的方式很困惑.它们有很多,并且有很多方法可以配置它.

我所做的是:

使用创建应用程序

CREATE-反应应用内
通过npm安装实现

npm install materialize-css @ next
创建反应应用程序

这是我正在使用的代码:

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/babel" src="js/materialize.min.js"></script>
  </body>
</html> …

Run Code Online (Sandbox Code Playgroud)

materialize reactjs sidenav

sir*_*ndy

lucky-day

4
推荐指数

1
解决办法

5442
查看次数

Angular 6的angular-material-multilevel菜单？

我试图实现多层次的sidenav，发现这符合我的要求：

角材料多级菜单

演示 -注意手风琴类型

不幸的是，这是为AngularJS（1.0？）创建的，在Angular 6中似乎不起作用。

我的问题是：

Angular 6是否还有其他任何多层sidenav组件？注意在Google上找到任何类似的作品。
是否可以将此Angular 1.0菜单“升级”到Angular 6？怎么样？
是否有任何简单的说明或课程来构建您自己的多层次侧面导航？有很多关于一级的说明，但是我发现没有多层的说明。

sidenav angular6

sib*_*ert

lucky-day

4
推荐指数

1
解决办法

2万
查看次数

我的侧导航不会推送内容，而是克服了内容

我试图让 Side Material Sidenav 在我打开栏时推送内容，显然在它关闭时推送内容；被推回原位的元素。目前它所做的是开放内容

看图片

这是我的 app-header.component.html

<!--- Toolbar starts here-->
<div class="container-toolbar">
    <mat-toolbar color="primary" class="fixed-header">
        <img src="" />
        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span class="spacer"></span>
        <button type="button" mat-icon-button href="">
            <mat-icon matTooltip="Salir">exit_to_app</mat-icon>
        </button>
    </mat-toolbar>
</div>

<!--- Sidenav starts here -->
<mat-sidenav-container style="height:100%;width:100%;">
    <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'side' : 'push'"
        [opened]="(isHandset$ | async)" style="box-shadow: 0 5px 5px #999;z-index: 1;">
        <mat-nav-list>
            <mat-list-item>
                <a routerLink="/dashboard">Home</a>
                <mat-icon …

Run Code Online (Sandbox Code Playgroud)

angular-material angular sidenav angular-material-5

S. *_*. A

2018 12-13

4
推荐指数

1
解决办法

6765
查看次数