각도 UI 부트 스트랩이있는 반응 형 드롭 다운 탐색 모음 (올바른 각도 방식으로 수행됨)
angular-ui-boostrap의 모듈 "ui.bootstrap.dropdownToggle"을 사용하여 드롭 다운 navbar가있는 JSFiddle을 만들었습니다. 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>
내가 이해하는 한 이것이 그러한 드롭 다운 메뉴를 구현하는 적절한 각도의 방법입니다. angularjs 측면에서 "잘못된"방법은 bootstrap.js를 포함하고 "data-toggle ="dropdown "을 사용하는 것입니다 ... 내가 바로 여기 있습니까?
이제 다음 Fiddle에서 수행 한 것처럼 내 navbar에 반응 형 동작을 추가하고 싶습니다. http://jsfiddle.net/ghtC9/6/
그러나 위의 솔루션에 대해 마음에 들지 않는 것이 있습니다. 그 사람은 bootstrap.js를 포함했습니다!
그렇다면 기존 navbar에 반응 형 동작을 추가하는 올바른 각도 유형은 무엇입니까?
분명히 "nav-collapse collapse navbar-responsive-collapse"와 같은 부트 스트랩 반응 형 navbar 클래스를 사용해야합니다. 하지만 어떻게하는지 모르겠어요 ...
도와 주셔서 정말 감사합니다!
미리 감사드립니다! 남자 이름
"collapse"지시문을 사용하여 수행 할 수 있습니다. http://jsfiddle.net/iscrow/Es4L3/(HTML 에서 두 개의 "Note"를 확인하십시오).
<!-- 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">
즉, 축소 된 상태를 변수에 저장하고 해당 변수의 값을 변경하여 축소 된 상태를 변경해야합니다.
릴리스 0.14는 uib-구성 요소에 접두사를 추가했습니다 .
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
변경 : collapse에 uib-collapse.
2015-06 업데이트
antoinepairet의 의견 / 예를 기반으로 :
uib-collapse속성을 사용하면 애니메이션이 제공됩니다. 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>
고대 ..
질문이 BS2를 중심으로 구성되어 있음을 알지만 ui.bootstrap issue 394의 제안을 기반으로 ng-class 솔루션을 사용하여 Bootstrap 3에 대한 솔루션을 제안 할 것이라고 생각했습니다 .
공식 부트 스트랩 예제 의 유일한 변형은 ng-아래의 주석에 표시된 속성 이 추가 된 것입니다 .
<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">
...
다음은 업데이트 된 작업 예제입니다. http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)
이것은 간단한 사용 사례에서 저에게 효과가있는 것 같지만 예제에서 두 번째 드롭 다운이 잘린 것을 확인할 수 있습니다. 행운을 빕니다!
Not sure if anyone is having the same responsive issue, but it was just a simple css solution for me.
same example
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
with
@media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
My solotion for responsive/dropdown navbar with angular-ui bootstrap (when update to angular 1.5 and, 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
}
'Programing' 카테고리의 다른 글
| CSS를 사용하여 목록의 세 번째 항목마다 스타일을 지정 하시겠습니까? (0) | 2020.10.16 |
|---|---|
| 색인 / 열거에 대한 액세스 권한으로 Python 목록 이해가 가능합니까? (0) | 2020.10.16 |
| .NET의 java.lang.IllegalStateException? (0) | 2020.10.15 |
| hg 스트립 대 hg 백 아웃 및 hg 되돌리기 (0) | 2020.10.15 |
| Postman 애드온은 firefox에서와 같습니다. (0) | 2020.10.15 |