bootstrap4中文版（純手工翻譯）

本文轉載自查看原文 2016-12-13 14:03 4205

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';

export class 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>

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 方法

Dismiss

14.4 NgbActiveModal

14.4.1 方法

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

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 進度條的值