Angular 2 - Bootstrap 3 - 导航栏水平滚动
Angular 2 - Bootstrap 3 - navbar horizontal scroll
我有一个要求,我的辅助导航栏是根据来自服务器的数据动态生成的。我需要一个类似于此的控件 -->
我需要在左侧和右侧有箭头标记,以允许用户滚动项目。我在这里找到了一些使用 JQuery 的示例代码。
http://www.bootply.com/l2ChB4vYmC
但是我需要使用 Angular 2 和 Bootstrap 3 来实现这一点。是否有类似的东西可用?
不需要像 Angular 2 那样的东西。您也可以在 Angular 2 中使用它。这是 plunkr 显示的内容。
@Component({
selector: 'my-app',
template: `
<div class="container">
<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li *ngFor="let tab of tabs" class="{{tab.active ? 'active' : ''}}">
<a href="#{{tab.name}}">{{tab.name}}</a>
</li>
</ul>
</div>
</div>
`,
})
export class App {
tabs: any[] = [];
constructor() {
for(var i = 1; i < 21; i++){
this.tabs.push({
name: "Tab" + i,
active: i === 1 ? true : false
});
}
}
ngAfterViewInit(){
//Do jquery stuff to access the DOM
}
}
或你可以使用这个非常容易使用的angular库-
https://www.npmjs.com/package/angular2-drag-scroll
我有一个要求,我的辅助导航栏是根据来自服务器的数据动态生成的。我需要一个类似于此的控件 -->
我需要在左侧和右侧有箭头标记,以允许用户滚动项目。我在这里找到了一些使用 JQuery 的示例代码。 http://www.bootply.com/l2ChB4vYmC 但是我需要使用 Angular 2 和 Bootstrap 3 来实现这一点。是否有类似的东西可用?
不需要像 Angular 2 那样的东西。您也可以在 Angular 2 中使用它。这是 plunkr 显示的内容。
@Component({
selector: 'my-app',
template: `
<div class="container">
<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li *ngFor="let tab of tabs" class="{{tab.active ? 'active' : ''}}">
<a href="#{{tab.name}}">{{tab.name}}</a>
</li>
</ul>
</div>
</div>
`,
})
export class App {
tabs: any[] = [];
constructor() {
for(var i = 1; i < 21; i++){
this.tabs.push({
name: "Tab" + i,
active: i === 1 ? true : false
});
}
}
ngAfterViewInit(){
//Do jquery stuff to access the DOM
}
}
或你可以使用这个非常容易使用的angular库-
https://www.npmjs.com/package/angular2-drag-scroll