XiaoShang

  • 笔记
  • 日志
  • 阅读
所有文章

XiaoShang

  • 笔记
  • 日志
  • 阅读

UI-Bootstrap文档翻译

2017-03-19 20:44:52

UI Bootstrap

AngularUI 团队使用纯AngularJS写的Bootstrap 组件

Angular 2

为Angular 2 提供支持,检验ng-bootstrap, 由 UI Bootstrap 团队创建。

依赖

这个指令库包含了符合Bootstrap标准和样式的一组原生的AngularJS指令。而且不依赖于JQuery或者Bootstrap的javascript文件。它只依赖这些:

  • AngularJS(要求AngularJS 1.4.x或者更高版本,已在1.6.1版本测试). 0.14.3版本的库是支持AngularJS 1.3.x 的最新版本, 0.12.0版,是支持AngularJS 1.2.x的最新版本
  • Angular-animate (这个版本需要和你的angular匹配,1.6.1版本已测试),如果你打算使用动画,你需要加载angular-animate
  • angular-touch (这个版本需要和你的angular匹配,1.6.1版本已测试), 如果你打算使用swipe actions, 你需要加载angular-touch.
  • Bootstrap CSS (3.3.7版本已测试). 这个版本的库(2.5.0)只能与Bootstrap CSS 3.x版本使用。0.8.0版本的库是支持Bootstrap CSS 2.3.x的最新版本

文件下载

所有指令的构建文件分布几个不同的种类:为产品使用的压缩文件,为开发使用的非压缩文件,有或没有模板。所有的配置和描述说明可以从这里下载, 有-tpls标识的文件包含捆绑了JavaScript的模板,正常的版本不包含被捆绑的模板,如果你只对这些指令中的一部分感兴趣,你可以在这里创建你需要的文件然后下载(需要在原文创建)。

无论你选择用哪种方式,好消息是,所有这些文件的大小相当小:包含模板的压缩文件只有122k, 没有模板的是98k(如果使用gzip压缩,有模板的是 ~31kb , 没有模板是28k)。

安装

当你下载了所有的文件,并在你的页面中引用它们,你只需要在模块中声明依赖ui.bootstrap:

angular.module('myModule', ['ui.bootstrap']);

如果你在CSP模块中使用UI Bootstrap, 例如:在扩展中,确保手动在HTML文件中链接ui-bootstrap-csp.css

你可以从这个页面去plunkers查看对应描述的demo的运行示例。

前缀迁移

自从0.14.0版本,我们开始给所有的组件增加前缀。如果你是从ui-bootstrap 0.13.4或更早的版本升级,请查看我们的迁移指南。

CSS

由于最初的Bootstrap的CSS不依赖href属性,一些组件(pagination, tabs)的游标风格取决于空的href属性。
但是在AngularJS中添加空的href属性在link标签中将会导致有害的路由改变。这就是为什么样式不能正确应用,我们要在指令模板中移除空的href属性。这个纠正很简单,只需要在你的应用中增加下面的样式。

.nav, .pagination, .carousel, .panel-title a {cursor: pointer;}

FAQ

普通的问题/解决方法请查看我们的FAQ

文档阅读

ui-bootstrap提供的每一个组件都有说明文档和可交互的Plunker示例。

对于指令,我们列出不同属性的默认值。除了这个,一些设置还有增加了标记:

  • $watch-这个设置会被angular $watch 监听。
  • B-这个设置是布尔值,它不需要参数。
  • C-这个设置是可以在constant service中被配置成全局的形式。
  • $-这个设置期待一个angular表达式替代文字字符串。如果这个表达式支持布尔值/整数,你可以直接跳过。
  • readonly-这个设置是只读。

对于服务(你可以通过$前缀认出它们),我们会列出所有可能的参数,你可以跳过它们,和它们默认的值。

  • 有些指令会有一个配置服务,就像这种模式:uibDirectiveConfig. 这个服务设置使用驼峰式命名。服务可以在实例的.config方法中配置。

Accordion

Alert

Buttons

Carousel

Collapse

Dateparser

Datepicker

Datepicker Popup

Dropdown

Modal

Pager

Pagination

Popover

Position

Progressbar

Rating

Tabs

Timepicker

Tooltip

Typeahead

  • AngularJS
  • note

扫一扫,分享到微信

微信分享二维码
JavaScript正则表达式
flex弹性盒子模型探索

Gitalking ...

© 2019 XiaoShang
  • 所有文章

tag:

  • JS
  • Mac
  • Npm
  • Redis
  • MySql
  • AngularJS
  • HTML
  • CSS
  • Hexo
  • Git
  • Vue
  • Linux
  • Node
  • Nginx
  • Canvas

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true