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

bootstrap4中文版(纯手工翻译)的更多相关文章

  1. 欢迎来到 C# 9.0(Welcome to C# 9.0)【纯手工翻译】

    翻译自 Mads Torgersen 2020年5月20日的博文<Welcome to C# 9.0>,Mads Torgersen 是微软 C# 语言的首席设计师,也是微软 .NET 团 ...

  2. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

  3. 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  4. 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  5. JAVA+PHP+阿里云组件纯手工实现POP、SMTP、IMAP开发邮件服务器(二)

    java开发邮件服务器的接收模块 用java建立socket服务端,监听端口25,实现SMTP协议.即可完成邮件服务器的接收模块. 这里要注意的是,SMTP协议其实可以分为两种.一种是你用手机.PC等 ...

  6. [置顶] 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  7. [置顶] 纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  8. 【转】纯手工玩转 Nginx 日志

    Nginx 日志对于大部分人来说是个未被发掘的宝藏,总结之前做某日志分析系统的经验,和大家分享一下 Nginx 日志的纯手工分析方式. Nginx 日志相关配置有 2 个地方:access_log 和 ...

  9. 纯手工编写的PE可执行程序

    [文章标题]: 纯手工编写的PE可执行程序[文章作者]: Kinney[下载地址]: 自己搜索下载[使用工具]: C32[操作平台]: win 7[作者声明]: 只是感兴趣,没有其他目的.失误之处敬请 ...

随机推荐

  1. grep的用法笔记

    1.grep搜索不保护字符串的命令格式如下: #带-v参数 jevan@df ~ grep "agc" -vRn ./

  2. 彻底搞定C语言指针(精华版)

    1.语言中变量的实质 要理解C指针,我认为一定要理解C中“变量”的存储实质, 所以我就从“变量”这个东西开始讲起吧! 先来理解理解内存空间吧!请看下图: 内存地址→ 6 7 8 9 10 11 12 ...

  3. 文本挖掘预处理之向量化与Hash Trick

    在文本挖掘的分词原理中,我们讲到了文本挖掘的预处理的关键一步:"分词",而在做了分词后,如果我们是做文本分类聚类,则后面关键的特征预处理步骤有向量化或向量化的特例Hash Tric ...

  4. 通过virtualbox最小化安装centos 6.3后无法上网解决办法

    通过virtualbox最小化安装centos 6.3后无法上网解决办法 1.设置virtualbox的网络连接方式,如下图使用桥接方式,桥接的网卡为宿主正在上网的网卡,现在我是通过无线来上网的,所以 ...

  5. 关于css禁止文本复制属性

    最近在做DHTMLX框架替换,新框架dhx的grid是不能选中内容复制的 虽然相对来说是安全些的,但是客户体验度一定会大打折扣 网页上禁止复制主要靠JavaScript来实现.<BODY onc ...

  6. java面试题(二)

    21.描述一下JVM加载class文件的原理机制? 答:JVM中类的装载是由类加载器(ClassLoader)和它的子类来实现的,Java中的类加载器是一个重要的Java运行时系统组件,它负责在运行时 ...

  7. select效果联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. Angular2.js——表单(下)

    这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...

  9. Yii2框架---常用代码

    一.Php控制器跳转 return $this->redirect('/site/index/index');   二.回调自身控制器 self::actionXxxx();   三.获取当前用 ...

  10. Unity 多屏(分屏)显示,Muti_Display

    Unity 多屏(分屏)显示,Muti_Display  最近项目有个需求,主要用于在展厅的展示游戏. 比如,在一个很大的展厅,很大的显示屏挂在墙上,我们不可能通过操作墙上那块显示器上的按钮来控制游戏 ...