bootstrap4中文版，纯手工翻译

2024-03-30 00:17•java•阅读 2319

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

exportclassNgbdAccordionPreventchange{

publicbeforeChange($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 进度条的值