bootstrap4中文版(纯手工翻译)

咸昀
2023-12-01

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)’  当点击关闭按钮是触发

 

这个是为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,必须是唯一的,如果不指定,会自动生成。

 

通用设置。如果想要做通用设置,可以在根组件中注入这个服务。

 

 

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

 

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

 

转载于:https://www.cnblogs.com/effie0220/p/6169683.html

 类似资料: