Reaktionsschnelle Dropdown-Navigationsleiste mit Angular-UI-Bootstrap (auf die richtige Art und Weise)

76

Ich habe eine JSFiddle mit einer Dropdown-Navigationsleiste mit dem Modul "ui.bootstrap.dropdownToggle" von angle-ui-boostrap erstellt: http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

Soweit ich weiß, ist dies die richtige, eckige Art, ein solches Dropdown-Menü zu implementieren. Der "falsche" Weg in Bezug auf Angularjs wäre, bootstrap.js einzuschließen und "data-toggle =" dropdown "zu verwenden ... Bin ich hier richtig?

Jetzt möchte ich meiner Navigationsleiste ein reaktionsfähiges Verhalten hinzufügen, wie in der folgenden Geige beschrieben: http://jsfiddle.net/ghtC9/6/

ABER es gibt etwas, das ich an der obigen Lösung nicht mag. Der Typ hat bootstrap.js eingeschlossen!

Was wäre also die richtige Art und Weise, um meiner vorhandenen Navigationsleiste ein reaktionsfähiges Verhalten hinzuzufügen?

Ich muss natürlich Bootstraps-responsive Navbar-Klassen wie "Nav-Collapse Collapse Navbar-Responsive-Collapse" verwenden. Aber ich weiß nicht wie ...

Ich würde mich sehr über Ihre Hilfe freuen!

Danke im Voraus! Michael

angularjs  angular-ui  angular-ui-bootstrap 
— Michael Hunziker
quelle

Antworten:

57

Sie können dies mit der Direktive "Zusammenbruch" tun: http://jsfiddle.net/iscrow/Es4L3/ (überprüfen Sie die beiden "Hinweis" im HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

Das heißt, Sie müssen den reduzierten Status in einer Variablen speichern und den reduzierten Status auch ändern, indem Sie den Wert dieser Variablen (einfach) ändern.

Release 0.14 fügte uib-Komponenten ein Präfix hinzu :

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Ändern: collapsezu uib-collapse.

— xhh
quelle
3
Dies scheint die Frage nicht direkt zu beantworten - er spricht über eine Dropdown-Schaltfläche in der Navigationsleiste und Sie sprechen über das Reduzieren der gesamten Navigationsleiste. Vermisse ich etwas
— PW Kad
Danke Mann, ich habe viel Zeit damit verbracht herauszufinden, warum ein einfaches zusammenklappbares Menü nicht funktioniert
— Ignacio Vazquez
Persönlich denke ich nicht, dass Uib-Collapse der falsche Weg für eine Navigationsleiste ist. Ich würde lieber uib-dropdown verwenden.
— Jae.phoenix
123

Update 2015-06

Basierend auf dem Kommentar / Beispiel von Antoinepairet :

Die Verwendung des uib-collapseAttributs bietet Animationen: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview 

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

Antike ..

Ich sehe, dass sich die Frage um BS2 dreht, aber ich dachte, ich würde eine Lösung für Bootstrap 3 mit einer ng-class-Lösung finden, die auf Vorschlägen in ui.bootstrap, Ausgabe 394, basiert :

Die einzige Abweichung vom offiziellen Bootstrap-Beispiel ist das Hinzufügen von ng-Attributen, die in den Kommentaren unten angegeben sind:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

Hier ist ein aktualisiertes Arbeitsbeispiel: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (Hutspitze Lars)

Dies scheint in einfachen Anwendungsfällen für mich zu funktionieren, aber Sie werden im Beispiel feststellen, dass die zweite Dropdown-Liste abgeschnitten ist ... viel Glück!

— ptim
quelle
18
Anstelle der ng-Klasse sollten Sie 'Zusammenbruch = "navCollapsed"' verwenden. weil Ihre Version keine Animation macht
— bernhardh
6
Eine weitere Verbesserung: Fügen Sie ng-click = "navCollapsed = true" zum letzten Teil Ihres Snippets hinzu, sodass das Dropdown-Menü nach Auswahl eines Elements ausgeblendet wird.
— Lars Behnke
1
@streetlogics Es sollte "navCollapsed" sein, du hast dort ein "d" verpasst
— PSWai
6
Ich habe nicht bearbeiten in der Zeit, aber ich änderte <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">an <div collapse="navCollapsed">und der Übergang gearbeitet!
— Kanten
1
Ich muss hier etwas vermissen, aber führt diese Lösung nicht dazu, dass die Desktop-Version des Menüs reduziert und nicht angezeigt wird, da der Navigationsschalter ausgeblendet ist? Auch bei den Aktualisierungen aus den Kommentaren ist dies immer noch der Fall.
8

Ich bin mir nicht sicher, ob jemand das gleiche Problem hat, aber es war nur eine einfache CSS-Lösung für mich.

gleiches Beispiel

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

mit

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}
— Dylan
quelle
3
Sie sollten dem .collapse-Selektor die Navi-ID voranstellen, damit nicht jeder Zusammenbruch auf der Seite
— verschraubt wird
1

Meine Lösung für Responsive / Dropdown-Navigationsleiste mit Angular-UI-Bootstrap (beim Update auf Angular 1.5 und UI-Bootrap 1.2.1)
index.html 

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}
— nguyên
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.