1初步开始
1.1依赖
这个仓储包含一系列基于bootstrap标识和css样式的原生angular2指令。所以是不需要依赖jq和bootstrap.js的。只需要以下依赖即可:
Angular(需要2以上的版本)
Bootstrap Css
1.2安装
安装完angular和bootstrap Css后
npm install --save @ng-bootstrap/ng-bootstrap
然后引入主模块
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
然后在你应用的模块中列出引入的模块。这个方法跟引入主模块有点不同。要以NgbModule.forRoot()结尾。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
这个是主文件中需要做的事情。在你需要应用到这个模块时候,只需要
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgbModule, ...]
})
export class OtherModule {
}
即可
1.3 SystemJS
如果你正在使用SystemJS,你需要通过map告诉system loader去哪寻找ng-bootstrap
map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}
2 手风琴效果(NgbAccordion)最外层的标签
Ngbaccorddion指令是很多面板的集合。
选择器 ngb-accordion(这是最外层的标签)
输出 ngbAccordion
2.1 输入
activeIds 类型:string 或是 string[]
ngbAccordion的id
[closeOthers] 类型:boolean
表示打开一个面板,其他的面板是否是关闭的
Type 类型:string
有4种取值:"success", "info", "warning" and "danger".
2.2 输出
(panelChange)=”beforeChange($event)”
可以参见6中的属性进行定义
在ts中,需要引入
import{
NgbPanelChangeEvent
}from
'@ng-bootstrap/ng-bootstrap';
exportclass
NgbdAccordionPreventchange
{
public
beforeChange(
$event
:NgbPanelChangeEvent
){
if
(
$event
.panelId
==='2')
{
$event
.preventDefault();
}
if
(
$event
.panelId
==='3'
&&
$event
.nextState
===false)
{
$event
.preventDefault();
}
};
}
2.3 方法
toggle 用法:外外层标签的id.toggle(panelId: string)
返回类型:void
3 NgbPanel(每个控制面板的标签包括标题)
Ngbpanel指令表示的是有个标题和可折叠区域的一个独立的面板。
选择器: ngb-panel(今次于ngb-accordion的标签)
3.1 输入
[disabled] 类型:boolean
默认值是false
表示面板是否是禁用的。如果是禁用的,就不能进行切换。
Id 类型:string
这个id可以是随便起的,但是必须是唯一的。如果没有提供id,会自动生成。
title 类型:string
表示的是面板的标题
Type 类型:string
有四个值:"success", "info", "warning" and "danger"
4 NgbPanelTitle
当面板标题包含html标记或是其他指令时,这个指令用来包裹这个面板标题
选择器:<template ngbPanelTitle>
里面是带有标签的标题
</template>
5 NgbPanelContent
这个指令用来包裹面板内容。
选贼器:<template ngbPanelContent> </template>
6NgbPanelChangeEvent
在切换面板之前,改变触发事件。
6.1 属性
nextState 类型:boolean
面板打开:true 面板关闭:false
panelId 类型:string
切换的面板的id
preventDefault 类型:() => void
阻止面板切换
7NgbAccordionConfig
这个是为NgbAccordion组件提供的配置服务。如果你想定制属性的值从而给所有面板提供默认的值,那你可以在根组件中注入这个服务。具体代码可以参照文档
8 NgbAlert
用于提供警示信息
选择器:ngb-alert
8.1·输入
[dismissible] 类型:Boolean
如果是false,不可以关闭;如果是true,可以关闭当前alert,当必须配合一个关闭按钮。
Type 类型:string(其实就是设置alert的颜色)
有以下四个值:"success", "info", "warning" and "danger".
8.2方法
(close)=‘closeAlert(alert)’ 当点击关闭按钮是触发
8.3 NgbAlertConfig
这个是为NgbAlert组件提供的服务。当想统一设置的时候,可以在根组件中注入这个服务。
9 NgbRadioGroup
具有bootstrap风格的单选按钮。
选择器:[ngbRadioGroup]
9.1 NgbRadio
NgbRadioGroup的一部分。
选择器:<input type=radio>
9.11 输入
Checked 类型:any
Disabled 类型:any
[value] 类型:any
绑定按钮的值
10 NgbCarousel
基于bootstrap标记创建轮播图。
选择器:ngb-carousel
输出:ngbCarousel
10.1 输入
activeId 类型:string
激活的轮播图的id
Interval 类型:number
间隔是时间
Keyboard 类型:boolean
是否使用键盘控制
Wrap 类型:boolean
是否能从最后一张到第一张
10.2 方法
Select 用法:select(slideId: string)
返回类型:void
根据具体的标识选择轮播图
Prev 用法:prev()
返回类型:void
到前一张轮播图
Next 用法:next()
返回类型:void
到下一章轮播图
Pause 用法:pause()
返回类型:void
停止轮播图循环
Cycle 用法:cycle()
返回类型:void
循环播放
10.3 NgbSlide
选择器:<template ngbSlide>
</template>
10.3.1 输入
Id 类型:string
每张轮播图的id,必须是唯一的,如果不指定,会自动生成。
10.4 NgbCarouselConfig
通用设置。如果想要做通用设置,可以在根组件中注入这个服务。
11 NgbCollapse
用来隐藏或显示内容
选择器:[ngbCollapse]
输出:ngbCollapse
11.1 输入
<div [ngbCollapse]=’isCollapsed’>
</div>
12 NgbDatepicker
一个轻量级和高配置的日期插件指令。
选择器:ngb-datepicker
输出: ngbDatepicker
12.1 输入
dayTemplate 类型:TemplateRef<DayTemplateContext>
显示日期的常用模板。
displayMonths 类型:number
显示月的数量
firstDayOfWeek 类型:number
一周的第一天。默认日历是1指的是星期一;7指的是星期天
markDisabled
等等。。。。。
12.2 输出
navigate 当导航发生变化或是展示的月份发生变化的时候,会触发事件
详情请参见NgbDatepickerNavigateEvent
用法:(navigate)=‘date=$event.next’
12.3 方法
navigateTo 表示直接跳到哪一天
如果不写就是当天,如果写就是制定的日期
用法:navigateTo(date: { year: number; month: number; })
返回值类型:void
12.4NgbInputDatepicker
这个指令可以让input标签中可以存在日期插件。使用input和ngModel配合使用。
选择器:input[ngbDatepicker]
输出:ngbDatepicker
12.4.1 输入
dayTemplate
displayMonths
firstDayOfWeek
markDisabled
等等。。。
12.4.2 输出
Navigate
12.4.3 方法
Open 用法:open()
返回值类型:void
通过已经选择的日期打开日期插件。
Close 用法:close()
返回值类型:void
关闭弹出的日期插件
Toggle 用法:toggle()
返回值类型:void
切换日期插件的状态
navigateTo
12.5 NgbDateStruct
NgbDatepicker和NgbInputDatepicker指令模块的接口。
用法:import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
12.5.1 属性
Day 类型:number
Month 类型:number
Year 类型:number
12.6 DayTemplateContext
12.6.1 属性
currentMonth 类型:number
表示当前的月份
Date 类型:NgbDateStruct
对应模板的日期
Disabled 类型:boolean
Selected
12.7NgbDatepickerNavigateEvent
12.7.1 属性
Current 类型:{ year: number; month: number; }
Next 类型:{ year: number; month: number; }
12.8NgbDatepickerI18n
12.8.1 方法
getWeekdayName 用法:getWeekdayName(weekday: number)
返回值类型:字符串
getMonthName 用法:getMonthName(month: number)
返回值类型:字符串
12.9 NgbDateParserFormatter
12.9.1 方法
Parse 用法:parse(value: string)
返回值类型:NgbDateStruct
Format 用法:format(date: NgbDateStruct)
返回值类型:字符串
12.10 NgbDatepickerConfig
通用设置,在根组件中设置
13 NgbDropdown
选择器:[ngbDropdown]
输出:ngbDropdown
13.1 输入
autoClose 类型:boolean
当选择好下拉项目中的一个时,下拉关闭
Open 类型:boolean
默认值:false
下拉是否一开始就是打开的
Up 类型:boolean
下拉是向上的还是向下的
13.2 输出
openChange 下拉打开或关闭的时候触发
13.3方法
isOpen 用法:isOpen()
返回值类型:boolean
检查下拉菜单是否是打开的
Open 用法:open()
返回值类型:void
Toggle 用法:toggle()
返回值类型:void
13.4NgbDropdownToggle
当点击的时候,是否允许下拉菜单是可以切换的。这个指令是可选的。
选择器:[ngbDropdownToggle]
13.5 NgbDropdownConfig
通用设置
14 NgbModal
用来打开模块窗口的,方法很简单:创建一个模板,然后使用open方法即可
14.1 方法
Open
14.2 NgbModalOptions
当打开新的模块窗口的时候可以设置的选项。
14.2.1 属性
Backdrop
Keyboard
Size
windowClass
14.3NgbModalRef
对于已经打开的模块窗口的参数
14.3.1属性
componentInstance
result
14.3.2 方法
Close
Dismiss
14.4 NgbActiveModal
14.4.1 方法
Close
Dismiss
15 NgbPagination
分页
15.1输入
boundaryLinks | 类型: boolean 是否展示第一页和最后一页 |
collectionSize | Type: number 总数量 |
directionLinks | Type: boolean 是否展示上一页和下一页 |
ellipses | Type: boolean 是否展示省略图标 |
maxSize | Type: number 能呈现的最大页数. |
page | Type: number 页 |
pageSize | Type: number 每页展示的条数 |
rotate | Type: boolean 当达到最大值后是否回调 |
size | Type: "sm" | "lg" 分页的大小 |
15.2 输出
pageChange
15.3NgbPaginationConfig
通用设置
16 NgbPopover
解释窗
选择器 | [ngbPopover] |
输出 | ngbPopover |
16.1 输入
container | Type: string body |
ngbPopover | Type: string | TemplateRef<any> 作为解释框弹出的内容 |
placement | Type: "top" | "bottom" | "left" | "right" 位置 |
popoverTitle | Type: string 标题 |
triggers | Type: string 触发的事件 |
16.2 输出
hidden | |
shown |
16.3 方法
Open
Close
Toggle
isOpen
16.4NgbPopoverConfig
通用设置
17 NgbProgressbar
进度条
选择器:ngb-progressbar
17.1 输入
animated | Type: boolean 动画 |
max | Type: number 进度条的最大值 |
striped | Type: boolean |
type | Type: string 推荐4个值:success", "info", "warning" or "danger". |
value | Type: number 进度条的值 |
17.2NgbProgressbarConfig
通用设置
18 NgbRating
用星星展示比例的功能
选择器:ngb-rating
18.1输入
Max
Rate
Readonly
starTemplate
18.2输出
Hover
Leave
rateChange
18.3StarTemplateContext
18.3.1 属性
Fill 星星填充的比例
18.4NgbRatingConfig
通用设置
19NgbTabset
Tab栏
选择器 | ngb-tabset |
输出 | ngbTabset |
19.1 输入
activeId
type
19.2 输出
tabChange
19.3 方法
Select
19.4 NgbTab
单一的tab指令
选择器:ngb-tab
19.4.1 输入
Disabled
Id
Title
19.5 NgbTabTitle
Selector | template[ngbTabTitle] |
19.6 NgbTabContent
Selector | template[ngbTabContent] |
19.7 NgbTabChangeEvent
19.7.1 属性
activeId
nextId
preventDefault
19.8 NgbTabsetConfig
通用设置
20 NgbTimepicker
时间格式
选择器:ngb-timepicker
20.1 输入
hourStep
meridian
minuteStep
readonlyInputs
seconds
secondStep
spinners
20.2NgbTimeStruct
20.3 NgbTimepickerConfig
21 NgbTooltip
提示框
选择器 | [ngbTooltip] |
输出 | ngbTooltip |
21.1 输入
Container
ngbTooltip
placement
triggers
21.2 输出
Hidden
Shown
21.3 方法
Open
Close
Toggle
isOpen
21.4 NgbTooltipConfig
通用设置
22 NgbTypeahead
搜索栏中的索引功能
选择器input[ngbTypeahead]
22.1 输入
Editable
focusFirst
inputFormatter
ngbTypeahead
resultFormatter
resultTemplate
showHint
22.2 输出
22.2.1 属性
Result
Term