颜色

颜色可以都是带有一定情感的,品牌借助色彩传达一种理念从而丰富品牌的内涵和视觉传达的辨识度。商家端面向的用户群跟M端有所区分在色彩上也做了区分...

主色

M端用色

  • #009acd .bg-blue-darker
  • #00abe4 .bg-blue-base
  • #4cc4ec .bg-blue-dark
  • #94d9ef .bg-blue
  • #cceefa .bg-blue-light
  • #e5f6fc .bg-blue-lighter

商家端用色

  • #06c1ae .bg-green-base
  • #50d3c6 .bg-green-dark
  • #9be6df .bg-green
  • #cdf3ef .bg-green-light
  • #e6f9f7 .bg-green-lighter

左侧导航用色

  • #162530 .bg-blue-black-darker
  • #203544 .bg-blue-black-base
  • #2a4a5f .bg-blue-black-standard
  • #62717c .bg-blue-black-dark
  • #a6aeb4 .bg-blue-black
  • #d2d7da .bg-blue-black-light
  • #e8eaec .bg-blue-black-lighter

辅助色

用于备注、提醒、警惕性含义的文字。也用于部分题型的底色、数据图表的颜色

  • #ff5a5a .bg-danger-base
  • #ff8b8b .bg-danger-dark
  • #ffd1d1 .bg-danger
  • #ffdede .bg-danger-light
  • #fff3f3 .bg-danger-lighter

用于普通提醒、例如整个网站消息提醒条的背景色。也用于部分题型的底色、数据图表的颜色

  • #f8c833 .bg-warn-base
  • #fad870 .bg-warn-dark
  • #fdeec1 .bg-warn
  • #fef4d6 .bg-warn-light
  • #fef9ea .bg-warn-lighter

成功、预定等含义的icon或文字的颜色。也用于图表中数据的颜色

  • #99d465 .bg-success-base
  • #b7e193 .bg-success-dark
  • #e2f3d4 .bg-success
  • #f1f9e9 .bg-success-light
  • #f8fcf4 .bg-success-lighter

地图区域颜色划分

  • #ff5a5a .bg-danger-base
  • #fa96cc .bg-pink-base
  • #b56fe7 .bg-purple-base
  • #00abe4 .bg-blue-base
  • #0f5bb0 .bg-blue-royal-base
  • #6c553c .bg-brown-base
  • #9a6b38 .bg-brown-light-base
  • #f8c833 .bg-warn-base
  • #99d465 .bg-success-base
  • #05944b .bg-green-forest-base

字体

文字按照用户操作系统区分,按照中英文分别规范使用。字号不做绝对限制,基于Windows系统下标题类统一用18-14px微软雅黑。文案类,如类目,备注,统一采用14-12px微软雅黑,需醒目时加粗。输入框内文字使用14或12px,不做绝对限制。字体颜色只有以下四种,使用上不做绝对限制。

文字说明

WINDOWS

微软雅黑

EnArial

MAC

苹方

EnHelvetica Neue

18 px

重点文字

16 px

标题文字

14 px

较常用 标题、表单文字

12 px

较常用 表单文字、部分解释性文字

#2a2a2a

重点标题文字常用

#4a4a4a

标题/表单文字常用

#6a6a6a

表单文字/部分解释文字常用/置灰button文字

#a0a0a0

未输入状态/输入框禁用文字常用

使用示例

表头文字
12px    #6a6a6a

主键标题文字
14px    #6a6a6a

说明文字
12px    #6a6a6a

下拉选框文字
14px    #6a6a6a

栅格

本栅格是基于bootstrap系统下的栅格划分,采用12栅格布局,主要运用在表单排版中
本页面栅格举例基于袋鼠UI页面内容区域1020px宽度进行描述

布局

本次栅格仅限于整个系统的内容区,不包括导航条,自适应整体范围为1020-1440。布局宽度为780px,分为12份,每份宽度65px,每个栅格两端padding为10px,所以内容宽度为760px,。

等分计算公式

内容区的宽度=内容区/12 * 份数 - 左右padding

十二等分计算公式

45px =(780/12)*(12/1)- 20

二等分计算公式

370px =(780/12)*(12/2)- 20

三等分计算公式

240px =(780/12)*(12/3)- 20

四等分计算公式

175px =(780/12)*(12/4)- 20

六等分计算公式

110px =(780/12)*(12/6)- 20

应用

单列表单的情况下,采用“二四六”分布局,col-md-2, col-md-4, col-md-6

<!--label文字占2格,input占4格,剩下6格空余,可用于提示等信息展示等-->
<form class="no-margin form-horizontal">
    <div class="form-group">
      <label class="control-label col-md-2">Username</label>
      <div class="col-md-4">
        <input type="text" placeholder="Username" class="form-control">
      </div>
      <div class="col-md-6"></div>
    </div>
</form>

双表单的情况下,采用“二三二三二”分布局,col-md-2, col-md-3, col-md-2, col-md-3, col-md-2

<!--label文字占2格,input占4格,剩下6格空余,可用于提示等信息展示等-->
<form class="no-margin form-horizontal">
    <div class="form-group">
      <label class="control-label col-md-2">Username</label>
      <div class="col-md-3">
        <input type="text" placeholder="Username" class="form-control">
      </div>
      <label class="control-label col-md-2">Password</label>
      <div class="col-md-3">
        <input type="text" placeholder="Password" class="form-control">
      </div>
      <div class="col-md-2"></div>
    </div>
</form>

结构布局

适用于设计师在产品迭代时的规范化设计、程序员在开发过程中对设计效果图的高保真还原、产品在重构或更新时的参考。

自适应规则

左侧导航宽度固定。
右侧顶栏,面包屑和内容区的宽度根据用户容器的宽度自适应。
右侧模块自适应的规则如下: 设定最小宽度,如果用户容器的宽度小于最少宽度,右侧模块则按照最小宽度显示,且显示页面
级的横向滚动条;如果用户容器的宽度大于或等于最小宽度,则右侧模块按照容器的宽度进行适配(最小宽度需视觉同学设定)。

屏幕最大范围

屏幕最小范围

超出最大范围

若屏幕过大且分辨率超出1440,在浏览器的窗口中页面采取居左中形式展示,两侧边留白处理。

页面纵向滚动规则

按照纵向滚动行为,页面分为两个纵向滚动区和一个纵向固定区
顶栏和面包屑固定在页面顶部,不随着页面滚动而滚动
导航区则为纵向滚动区A,当鼠标Hover到该区域时,出现滚动区A的纵向滚动条
内容区则为纵向滚动区B,当鼠标Hover到该区域时,出现滚动区A的纵向滚动条

侧边栏导航

左侧导航宽度固定。
右侧顶栏,面包屑和内容区的宽度根据用户容器的宽度自适应。
右侧模块自适应的规则如下: 设定最小宽度,如果用户容器的宽度小于最少宽度,右侧模块则按照最小宽度显示,且显示页面
级的横向滚动条;如果用户容器的宽度大于或等于最小宽度,则右侧模块按照容器的宽度进行适配(最小宽度需视觉同学设定)。

层级类型

左侧导航只有两级,仅一级菜单可以展开和折叠
一级菜单不对应具体的页面,只有二级菜单对应具体的页面

页面纵向滚动规则

同一时间,只能有一个一级导航处于展开状态,即当用户展开某个一级导航时,其它展开的一级导航要收起。一级导航共有两种状态,展开态及未展开态。
二级导航有三种状态,选中态,鼠标悬浮态和未选中态。

面包屑导航置于页面顶部,用作页面级别的导航,为用户识别当前页面路径提供帮助。

使用示例

普通面包屑导航

<!-- 面包屑导航 -->
<ul class="breadcrumb">
  <li><a href="#">KangarooUI</a></li>
  <li class="active"><span>Homepage</span></li>
</ul>
</div>

置顶面包屑导航

<!-- 放在main-container内部, 并且加上fixed-breadcrumb的类可以让面包屑导航置顶在页面顶部 -->
<div id="main-container" class="fixed-breadcrumb">

  <!-- 面包屑导航 -->
  <ul class="breadcrumb">
    <li><a href="#">KangarooUI</a></li>
    <li class="active"><span>Homepage</span></li>
  </ul>

  <!-- 页面内容容器 -->
  <div id="main-content" class="clearfix"></div>
</div>

导航结构用于页面层级划分和内容层级划分,在页面内部链接多个同级目录。

页面层级导航

使用示例

<ul class="nav-cards">
  <li>
    <a class="active" href="javascript:;">激活态</a>
  </li>
  <li>
    <a class="" href="javascript:;">非激活态</a>
  </li>
</ul>

内容层级导航

单独使用示例

<ul class="nav nav-tabs">
  <li class="tabItem active">
    <a class="" href="javascript:;">激活态</a>
  </li>
  <li class="tabItem">
    <a class="" href="javascript:;">非激活态</a>
  </li>
</ul>

结合使用示例

袋鼠学院

内容1

内容2

内容3

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">袋鼠学院</h3>
  </div>
  <div class="panel-body no-padding">
    <div class="container-fluid">
      <div class="row">
        <ul class="nav nav-tabs-bs" role="tablist">
          <li class="tabItem active" role="presentation">
            <a class="" href="#kui-docs-example-tab-11" aria-controls="profile" role="tab" data-toggle="tab">图文资讯</a>
          </li>
          <li class="tabItem" role="presentation">
            <a class="" href="#kui-docs-example-tab-12" aria-controls="profile" role="tab" data-toggle="tab">常见问答</a>
          </li>
          <li class="tabItem" role="presentation">
            <a class="" href="#kui-docs-example-tab-13" aria-controls="profile" role="tab" data-toggle="tab">联系电话</a>
          </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="kui-docs-example-tab-11">
            <p class="padding-md">内容1</p>
          </div>
          <div role="tabpanel" class="tab-pane" id="kui-docs-example-tab-12">
            <p class="padding-md">内容2</p>
          </div>
          <div role="tabpanel" class="tab-pane" id="kui-docs-example-tab-13">
            <p class="padding-md">内容3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Glyphicons

Bootstrap推荐使用的Icon字体,找到想要的字体可直接使用元素 <i class="glyphicon glyphicon-xxx"></i>,xxx即为对应的icon名称。

图标示例

  • glyphicon
    glyphicon-asterisk
  • glyphicon
    glyphicon-plus
  • glyphicon
    glyphicon-euro
  • glyphicon
    glyphicon-eur
  • glyphicon
    glyphicon-minus
  • glyphicon
    glyphicon-cloud
  • glyphicon
    glyphicon-envelope
  • glyphicon
    glyphicon-pencil
  • glyphicon
    glyphicon-glass
  • glyphicon
    glyphicon-music
  • glyphicon
    glyphicon-search
  • glyphicon
    glyphicon-heart
  • glyphicon
    glyphicon-star
  • glyphicon
    glyphicon-star-empty
  • glyphicon
    glyphicon-user
  • glyphicon
    glyphicon-film
  • glyphicon
    glyphicon-th-large
  • glyphicon
    glyphicon-th
  • glyphicon
    glyphicon-th-list
  • glyphicon
    glyphicon-ok
  • glyphicon
    glyphicon-remove
  • glyphicon
    glyphicon-zoom-in
  • glyphicon
    glyphicon-zoom-out
  • glyphicon
    glyphicon-off
  • glyphicon
    glyphicon-signal
  • glyphicon
    glyphicon-cog
  • glyphicon
    glyphicon-trash
  • glyphicon
    glyphicon-home
  • glyphicon
    glyphicon-file
  • glyphicon
    glyphicon-time
  • glyphicon
    glyphicon-road
  • glyphicon
    glyphicon-download-alt
  • glyphicon
    glyphicon-download
  • glyphicon
    glyphicon-upload
  • glyphicon
    glyphicon-inbox
  • glyphicon
    glyphicon-play-circle
  • glyphicon
    glyphicon-repeat
  • glyphicon
    glyphicon-refresh
  • glyphicon
    glyphicon-list-alt
  • glyphicon
    glyphicon-lock
  • glyphicon
    glyphicon-flag
  • glyphicon
    glyphicon-headphones
  • glyphicon
    glyphicon-volume-off
  • glyphicon
    glyphicon-volume-down
  • glyphicon
    glyphicon-volume-up
  • glyphicon
    glyphicon-qrcode
  • glyphicon
    glyphicon-barcode
  • glyphicon
    glyphicon-tag
  • glyphicon
    glyphicon-tags
  • glyphicon
    glyphicon-book
  • glyphicon
    glyphicon-bookmark
  • glyphicon
    glyphicon-print
  • glyphicon
    glyphicon-camera
  • glyphicon
    glyphicon-font
  • glyphicon
    glyphicon-bold
  • glyphicon
    glyphicon-italic
  • glyphicon
    glyphicon-text-height
  • glyphicon
    glyphicon-text-width
  • glyphicon
    glyphicon-align-left
  • glyphicon
    glyphicon-align-center
  • glyphicon
    glyphicon-align-right
  • glyphicon
    glyphicon-align-justify
  • glyphicon
    glyphicon-list
  • glyphicon
    glyphicon-indent-left
  • glyphicon
    glyphicon-indent-right
  • glyphicon
    glyphicon-facetime-video
  • glyphicon
    glyphicon-picture
  • glyphicon
    glyphicon-map-marker
  • glyphicon
    glyphicon-adjust
  • glyphicon
    glyphicon-tint
  • glyphicon
    glyphicon-edit
  • glyphicon
    glyphicon-share
  • glyphicon
    glyphicon-check
  • glyphicon
    glyphicon-move
  • glyphicon
    glyphicon-step-backward
  • glyphicon
    glyphicon-fast-backward
  • glyphicon
    glyphicon-backward
  • glyphicon
    glyphicon-play
  • glyphicon
    glyphicon-pause
  • glyphicon
    glyphicon-stop
  • glyphicon
    glyphicon-forward
  • glyphicon
    glyphicon-fast-forward
  • glyphicon
    glyphicon-step-forward
  • glyphicon
    glyphicon-eject
  • glyphicon
    glyphicon-chevron-left
  • glyphicon
    glyphicon-chevron-right
  • glyphicon
    glyphicon-plus-sign
  • glyphicon
    glyphicon-minus-sign
  • glyphicon
    glyphicon-remove-sign
  • glyphicon
    glyphicon-ok-sign
  • glyphicon
    glyphicon-question-sign
  • glyphicon
    glyphicon-info-sign
  • glyphicon
    glyphicon-screenshot
  • glyphicon
    glyphicon-remove-circle
  • glyphicon
    glyphicon-ok-circle
  • glyphicon
    glyphicon-ban-circle
  • glyphicon
    glyphicon-arrow-left
  • glyphicon
    glyphicon-arrow-right
  • glyphicon
    glyphicon-arrow-up
  • glyphicon
    glyphicon-arrow-down
  • glyphicon
    glyphicon-share-alt
  • glyphicon
    glyphicon-resize-full
  • glyphicon
    glyphicon-resize-small
  • glyphicon
    glyphicon-exclamation-sign
  • glyphicon
    glyphicon-gift
  • glyphicon
    glyphicon-leaf
  • glyphicon
    glyphicon-fire
  • glyphicon
    glyphicon-eye-open
  • glyphicon
    glyphicon-eye-close
  • glyphicon
    glyphicon-warning-sign
  • glyphicon
    glyphicon-plane
  • glyphicon
    glyphicon-calendar
  • glyphicon
    glyphicon-random
  • glyphicon
    glyphicon-comment
  • glyphicon
    glyphicon-magnet
  • glyphicon
    glyphicon-chevron-up
  • glyphicon
    glyphicon-chevron-down
  • glyphicon
    glyphicon-retweet
  • glyphicon
    glyphicon-shopping-cart
  • glyphicon
    glyphicon-folder-close
  • glyphicon
    glyphicon-folder-open
  • glyphicon
    glyphicon-resize-vertical
  • glyphicon
    glyphicon-resize-horizontal
  • glyphicon
    glyphicon-hdd
  • glyphicon
    glyphicon-bullhorn
  • glyphicon
    glyphicon-bell
  • glyphicon
    glyphicon-certificate
  • glyphicon
    glyphicon-thumbs-up
  • glyphicon
    glyphicon-thumbs-down
  • glyphicon
    glyphicon-hand-right
  • glyphicon
    glyphicon-hand-left
  • glyphicon
    glyphicon-hand-up
  • glyphicon
    glyphicon-hand-down
  • glyphicon
    glyphicon-circle-arrow-right
  • glyphicon
    glyphicon-circle-arrow-left
  • glyphicon
    glyphicon-circle-arrow-up
  • glyphicon
    glyphicon-circle-arrow-down
  • glyphicon
    glyphicon-globe
  • glyphicon
    glyphicon-wrench
  • glyphicon
    glyphicon-tasks
  • glyphicon
    glyphicon-filter
  • glyphicon
    glyphicon-briefcase
  • glyphicon
    glyphicon-fullscreen
  • glyphicon
    glyphicon-dashboard
  • glyphicon
    glyphicon-paperclip
  • glyphicon
    glyphicon-heart-empty
  • glyphicon
    glyphicon-link
  • glyphicon
    glyphicon-phone
  • glyphicon
    glyphicon-pushpin
  • glyphicon
    glyphicon-usd
  • glyphicon
    glyphicon-gbp
  • glyphicon
    glyphicon-sort
  • glyphicon
    glyphicon-sort-by-alphabet
  • glyphicon
    glyphicon-sort-by-alphabet-alt
  • glyphicon
    glyphicon-sort-by-order
  • glyphicon
    glyphicon-sort-by-order-alt
  • glyphicon
    glyphicon-sort-by-attributes
  • glyphicon
    glyphicon-sort-by-attributes-alt
  • glyphicon
    glyphicon-unchecked
  • glyphicon
    glyphicon-expand
  • glyphicon
    glyphicon-collapse-down
  • glyphicon
    glyphicon-collapse-up
  • glyphicon
    glyphicon-log-in
  • glyphicon
    glyphicon-flash
  • glyphicon
    glyphicon-log-out
  • glyphicon
    glyphicon-new-window
  • glyphicon
    glyphicon-record
  • glyphicon
    glyphicon-save
  • glyphicon
    glyphicon-open
  • glyphicon
    glyphicon-saved
  • glyphicon
    glyphicon-import
  • glyphicon
    glyphicon-export
  • glyphicon
    glyphicon-send
  • glyphicon
    glyphicon-floppy-disk
  • glyphicon
    glyphicon-floppy-saved
  • glyphicon
    glyphicon-floppy-remove
  • glyphicon
    glyphicon-floppy-save
  • glyphicon
    glyphicon-floppy-open
  • glyphicon
    glyphicon-credit-card
  • glyphicon
    glyphicon-transfer
  • glyphicon
    glyphicon-cutlery
  • glyphicon
    glyphicon-header
  • glyphicon
    glyphicon-compressed
  • glyphicon
    glyphicon-earphone
  • glyphicon
    glyphicon-phone-alt
  • glyphicon
    glyphicon-tower
  • glyphicon
    glyphicon-stats
  • glyphicon
    glyphicon-sd-video
  • glyphicon
    glyphicon-hd-video
  • glyphicon
    glyphicon-subtitles
  • glyphicon
    glyphicon-sound-stereo
  • glyphicon
    glyphicon-sound-dolby
  • glyphicon
    glyphicon-sound-5-1
  • glyphicon
    glyphicon-sound-6-1
  • glyphicon
    glyphicon-sound-7-1
  • glyphicon
    glyphicon-copyright-mark
  • glyphicon
    glyphicon-registration-mark
  • glyphicon
    glyphicon-cloud-download
  • glyphicon
    glyphicon-cloud-upload
  • glyphicon
    glyphicon-tree-conifer
  • glyphicon
    glyphicon-tree-deciduous
  • glyphicon
    glyphicon-cd
  • glyphicon
    glyphicon-save-file
  • glyphicon
    glyphicon-open-file
  • glyphicon
    glyphicon-level-up
  • glyphicon
    glyphicon-copy
  • glyphicon
    glyphicon-paste
  • glyphicon
    glyphicon-alert
  • glyphicon
    glyphicon-equalizer
  • glyphicon
    glyphicon-king
  • glyphicon
    glyphicon-queen
  • glyphicon
    glyphicon-pawn
  • glyphicon
    glyphicon-bishop
  • glyphicon
    glyphicon-knight
  • glyphicon
    glyphicon-baby-formula
  • glyphicon
    glyphicon-tent
  • glyphicon
    glyphicon-blackboard
  • glyphicon
    glyphicon-bed
  • glyphicon
    glyphicon-apple
  • glyphicon
    glyphicon-erase
  • glyphicon
    glyphicon-hourglass
  • glyphicon
    glyphicon-lamp
  • glyphicon
    glyphicon-duplicate
  • glyphicon
    glyphicon-piggy-bank
  • glyphicon
    glyphicon-scissors
  • glyphicon
    glyphicon-bitcoin
  • glyphicon
    glyphicon-btc
  • glyphicon
    glyphicon-xbt
  • glyphicon
    glyphicon-yen
  • glyphicon
    glyphicon-jpy
  • glyphicon
    glyphicon-ruble
  • glyphicon
    glyphicon-rub
  • glyphicon
    glyphicon-scale
  • glyphicon
    glyphicon-ice-lolly
  • glyphicon
    glyphicon-ice-lolly-tasted
  • glyphicon
    glyphicon-education
  • glyphicon
    glyphicon-option-horizontal
  • glyphicon
    glyphicon-option-vertical
  • glyphicon
    glyphicon-menu-hamburger
  • glyphicon
    glyphicon-modal-window
  • glyphicon
    glyphicon-oil
  • glyphicon
    glyphicon-grain
  • glyphicon
    glyphicon-sunglasses
  • glyphicon
    glyphicon-text-size
  • glyphicon
    glyphicon-text-color
  • glyphicon
    glyphicon-text-background
  • glyphicon
    glyphicon-object-align-top
  • glyphicon
    glyphicon-object-align-bottom
  • glyphicon
    glyphicon-object-align-horizontal
  • glyphicon
    glyphicon-object-align-left
  • glyphicon
    glyphicon-object-align-vertical
  • glyphicon
    glyphicon-object-align-right
  • glyphicon
    glyphicon-triangle-right
  • glyphicon
    glyphicon-triangle-left
  • glyphicon
    glyphicon-triangle-bottom
  • glyphicon
    glyphicon-triangle-top
  • glyphicon
    glyphicon-console
  • glyphicon
    glyphicon-superscript
  • glyphicon
    glyphicon-subscript
  • glyphicon
    glyphicon-menu-left
  • glyphicon
    glyphicon-menu-right
  • glyphicon
    glyphicon-menu-down
  • glyphicon
    glyphicon-menu-up

FontAwesome

KangarooUI推荐使用的字体,包含了Font Awesome(4.4.0)版本的字体以及KangarooUI扩展的自定义字体。找到想要的字体可直接使用元素 <i class="fa fa-xxx"></i>,xxx即为对应的icon名称。

图标示例

  • fa
    fa-glass
  • fa
    fa-music
  • fa
    fa-search
  • fa
    fa-envelope-o
  • fa
    fa-heart
  • fa
    fa-star
  • fa
    fa-star-o
  • fa
    fa-user
  • fa
    fa-film
  • fa
    fa-th-large
  • fa
    fa-th
  • fa
    fa-th-list
  • fa
    fa-check
  • fa
    fa-remove
  • fa
    fa-close
  • fa
    fa-times
  • fa
    fa-search-plus
  • fa
    fa-search-minus
  • fa
    fa-power-off
  • fa
    fa-signal
  • fa
    fa-gear
  • fa
    fa-cog
  • fa
    fa-trash-o
  • fa
    fa-home
  • fa
    fa-file-o
  • fa
    fa-clock-o
  • fa
    fa-road
  • fa
    fa-download
  • fa
    fa-arrow-circle-o-down
  • fa
    fa-arrow-circle-o-up
  • fa
    fa-inbox
  • fa
    fa-play-circle-o
  • fa
    fa-rotate-right
  • fa
    fa-repeat
  • fa
    fa-refresh
  • fa
    fa-list-alt
  • fa
    fa-lock
  • fa
    fa-flag
  • fa
    fa-headphones
  • fa
    fa-volume-off
  • fa
    fa-volume-down
  • fa
    fa-volume-up
  • fa
    fa-qrcode
  • fa
    fa-barcode
  • fa
    fa-tag
  • fa
    fa-tags
  • fa
    fa-book
  • fa
    fa-bookmark
  • fa
    fa-print
  • fa
    fa-camera
  • fa
    fa-font
  • fa
    fa-bold
  • fa
    fa-italic
  • fa
    fa-text-height
  • fa
    fa-text-width
  • fa
    fa-align-left
  • fa
    fa-align-center
  • fa
    fa-align-right
  • fa
    fa-align-justify
  • fa
    fa-list
  • fa
    fa-dedent
  • fa
    fa-outdent
  • fa
    fa-indent
  • fa
    fa-video-camera
  • fa
    fa-photo
  • fa
    fa-image
  • fa
    fa-picture-o
  • fa
    fa-pencil
  • fa
    fa-map-marker
  • fa
    fa-adjust
  • fa
    fa-tint
  • fa
    fa-edit
  • fa
    fa-pencil-square-o
  • fa
    fa-share-square-o
  • fa
    fa-check-square-o
  • fa
    fa-arrows
  • fa
    fa-step-backward
  • fa
    fa-fast-backward
  • fa
    fa-backward
  • fa
    fa-play
  • fa
    fa-pause
  • fa
    fa-stop
  • fa
    fa-forward
  • fa
    fa-fast-forward
  • fa
    fa-step-forward
  • fa
    fa-eject
  • fa
    fa-chevron-left
  • fa
    fa-chevron-right
  • fa
    fa-plus-circle
  • fa
    fa-minus-circle
  • fa
    fa-times-circle
  • fa
    fa-check-circle
  • fa
    fa-question-circle
  • fa
    fa-info-circle
  • fa
    fa-crosshairs
  • fa
    fa-times-circle-o
  • fa
    fa-check-circle-o
  • fa
    fa-ban
  • fa
    fa-arrow-left
  • fa
    fa-arrow-right
  • fa
    fa-arrow-up
  • fa
    fa-arrow-down
  • fa
    fa-mail-forward
  • fa
    fa-share
  • fa
    fa-expand
  • fa
    fa-compress
  • fa
    fa-plus
  • fa
    fa-minus
  • fa
    fa-asterisk
  • fa
    fa-exclamation-circle
  • fa
    fa-gift
  • fa
    fa-leaf
  • fa
    fa-fire
  • fa
    fa-eye
  • fa
    fa-eye-slash
  • fa
    fa-warning
  • fa
    fa-exclamation-triangle
  • fa
    fa-plane
  • fa
    fa-calendar
  • fa
    fa-random
  • fa
    fa-comment
  • fa
    fa-magnet
  • fa
    fa-chevron-up
  • fa
    fa-chevron-down
  • fa
    fa-retweet
  • fa
    fa-shopping-cart
  • fa
    fa-folder
  • fa
    fa-folder-open
  • fa
    fa-arrows-v
  • fa
    fa-arrows-h
  • fa
    fa-bar-chart-o
  • fa
    fa-bar-chart
  • fa
    fa-twitter-square
  • fa
    fa-facebook-square
  • fa
    fa-camera-retro
  • fa
    fa-key
  • fa
    fa-gears
  • fa
    fa-cogs
  • fa
    fa-comments
  • fa
    fa-thumbs-o-up
  • fa
    fa-thumbs-o-down
  • fa
    fa-star-half
  • fa
    fa-heart-o
  • fa
    fa-sign-out
  • fa
    fa-linkedin-square
  • fa
    fa-thumb-tack
  • fa
    fa-external-link
  • fa
    fa-sign-in
  • fa
    fa-trophy
  • fa
    fa-github-square
  • fa
    fa-upload
  • fa
    fa-lemon-o
  • fa
    fa-phone
  • fa
    fa-square-o
  • fa
    fa-bookmark-o
  • fa
    fa-phone-square
  • fa
    fa-twitter
  • fa
    fa-facebook-f
  • fa
    fa-facebook
  • fa
    fa-github
  • fa
    fa-unlock
  • fa
    fa-credit-card
  • fa
    fa-feed
  • fa
    fa-rss
  • fa
    fa-hdd-o
  • fa
    fa-bullhorn
  • fa
    fa-bell
  • fa
    fa-certificate
  • fa
    fa-hand-o-right
  • fa
    fa-hand-o-left
  • fa
    fa-hand-o-up
  • fa
    fa-hand-o-down
  • fa
    fa-arrow-circle-left
  • fa
    fa-arrow-circle-right
  • fa
    fa-arrow-circle-up
  • fa
    fa-arrow-circle-down
  • fa
    fa-globe
  • fa
    fa-wrench
  • fa
    fa-tasks
  • fa
    fa-filter
  • fa
    fa-briefcase
  • fa
    fa-arrows-alt
  • fa
    fa-group
  • fa
    fa-users
  • fa
    fa-chain
  • fa
    fa-link
  • fa
    fa-cloud
  • fa
    fa-flask
  • fa
    fa-cut
  • fa
    fa-scissors
  • fa
    fa-copy
  • fa
    fa-files-o
  • fa
    fa-paperclip
  • fa
    fa-save
  • fa
    fa-floppy-o
  • fa
    fa-square
  • fa
    fa-navicon
  • fa
    fa-reorder
  • fa
    fa-bars
  • fa
    fa-list-ul
  • fa
    fa-list-ol
  • fa
    fa-strikethrough
  • fa
    fa-underline
  • fa
    fa-table
  • fa
    fa-magic
  • fa
    fa-truck
  • fa
    fa-pinterest
  • fa
    fa-pinterest-square
  • fa
    fa-google-plus-square
  • fa
    fa-google-plus
  • fa
    fa-money
  • fa
    fa-caret-down
  • fa
    fa-caret-up
  • fa
    fa-caret-left
  • fa
    fa-caret-right
  • fa
    fa-columns
  • fa
    fa-unsorted
  • fa
    fa-sort
  • fa
    fa-sort-down
  • fa
    fa-sort-desc
  • fa
    fa-sort-up
  • fa
    fa-sort-asc
  • fa
    fa-envelope
  • fa
    fa-linkedin
  • fa
    fa-rotate-left
  • fa
    fa-undo
  • fa
    fa-legal
  • fa
    fa-gavel
  • fa
    fa-dashboard
  • fa
    fa-tachometer
  • fa
    fa-comment-o
  • fa
    fa-comments-o
  • fa
    fa-flash
  • fa
    fa-bolt
  • fa
    fa-sitemap
  • fa
    fa-umbrella
  • fa
    fa-paste
  • fa
    fa-clipboard
  • fa
    fa-lightbulb-o
  • fa
    fa-exchange
  • fa
    fa-cloud-download
  • fa
    fa-cloud-upload
  • fa
    fa-user-md
  • fa
    fa-stethoscope
  • fa
    fa-suitcase
  • fa
    fa-bell-o
  • fa
    fa-coffee
  • fa
    fa-cutlery
  • fa
    fa-file-text-o
  • fa
    fa-building-o
  • fa
    fa-hospital-o
  • fa
    fa-ambulance
  • fa
    fa-medkit
  • fa
    fa-fighter-jet
  • fa
    fa-beer
  • fa
    fa-h-square
  • fa
    fa-plus-square
  • fa
    fa-angle-double-left
  • fa
    fa-angle-double-right
  • fa
    fa-angle-double-up
  • fa
    fa-angle-double-down
  • fa
    fa-angle-left
  • fa
    fa-angle-right
  • fa
    fa-angle-up
  • fa
    fa-angle-down
  • fa
    fa-desktop
  • fa
    fa-laptop
  • fa
    fa-tablet
  • fa
    fa-mobile-phone
  • fa
    fa-mobile
  • fa
    fa-circle-o
  • fa
    fa-quote-left
  • fa
    fa-quote-right
  • fa
    fa-spinner
  • fa
    fa-circle
  • fa
    fa-mail-reply
  • fa
    fa-reply
  • fa
    fa-github-alt
  • fa
    fa-folder-o
  • fa
    fa-folder-open-o
  • fa
    fa-smile-o
  • fa
    fa-frown-o
  • fa
    fa-meh-o
  • fa
    fa-gamepad
  • fa
    fa-keyboard-o
  • fa
    fa-flag-o
  • fa
    fa-flag-checkered
  • fa
    fa-terminal
  • fa
    fa-code
  • fa
    fa-mail-reply-all
  • fa
    fa-reply-all
  • fa
    fa-star-half-empty
  • fa
    fa-star-half-full
  • fa
    fa-star-half-o
  • fa
    fa-location-arrow
  • fa
    fa-crop
  • fa
    fa-code-fork
  • fa
    fa-unlink
  • fa
    fa-chain-broken
  • fa
    fa-question
  • fa
    fa-info
  • fa
    fa-exclamation
  • fa
    fa-superscript
  • fa
    fa-subscript
  • fa
    fa-eraser
  • fa
    fa-puzzle-piece
  • fa
    fa-microphone
  • fa
    fa-microphone-slash
  • fa
    fa-shield
  • fa
    fa-calendar-o
  • fa
    fa-fire-extinguisher
  • fa
    fa-rocket
  • fa
    fa-maxcdn
  • fa
    fa-chevron-circle-left
  • fa
    fa-chevron-circle-right
  • fa
    fa-chevron-circle-up
  • fa
    fa-chevron-circle-down
  • fa
    fa-html5
  • fa
    fa-css3
  • fa
    fa-anchor
  • fa
    fa-unlock-alt
  • fa
    fa-bullseye
  • fa
    fa-ellipsis-h
  • fa
    fa-ellipsis-v
  • fa
    fa-rss-square
  • fa
    fa-play-circle
  • fa
    fa-ticket
  • fa
    fa-minus-square
  • fa
    fa-minus-square-o
  • fa
    fa-level-up
  • fa
    fa-level-down
  • fa
    fa-check-square
  • fa
    fa-pencil-square
  • fa
    fa-external-link-square
  • fa
    fa-share-square
  • fa
    fa-compass
  • fa
    fa-toggle-down
  • fa
    fa-caret-square-o-down
  • fa
    fa-toggle-up
  • fa
    fa-caret-square-o-up
  • fa
    fa-toggle-right
  • fa
    fa-caret-square-o-right
  • fa
    fa-euro
  • fa
    fa-eur
  • fa
    fa-gbp
  • fa
    fa-dollar
  • fa
    fa-usd
  • fa
    fa-rupee
  • fa
    fa-inr
  • fa
    fa-cny
  • fa
    fa-rmb
  • fa
    fa-yen
  • fa
    fa-jpy
  • fa
    fa-ruble
  • fa
    fa-rouble
  • fa
    fa-rub
  • fa
    fa-won
  • fa
    fa-krw
  • fa
    fa-bitcoin
  • fa
    fa-btc
  • fa
    fa-file
  • fa
    fa-file-text
  • fa
    fa-sort-alpha-asc
  • fa
    fa-sort-alpha-desc
  • fa
    fa-sort-amount-asc
  • fa
    fa-sort-amount-desc
  • fa
    fa-sort-numeric-asc
  • fa
    fa-sort-numeric-desc
  • fa
    fa-thumbs-up
  • fa
    fa-thumbs-down
  • fa
    fa-youtube-square
  • fa
    fa-youtube
  • fa
    fa-xing
  • fa
    fa-xing-square
  • fa
    fa-youtube-play
  • fa
    fa-dropbox
  • fa
    fa-stack-overflow
  • fa
    fa-instagram
  • fa
    fa-flickr
  • fa
    fa-adn
  • fa
    fa-bitbucket
  • fa
    fa-bitbucket-square
  • fa
    fa-tumblr
  • fa
    fa-tumblr-square
  • fa
    fa-long-arrow-down
  • fa
    fa-long-arrow-up
  • fa
    fa-long-arrow-left
  • fa
    fa-long-arrow-right
  • fa
    fa-apple
  • fa
    fa-windows
  • fa
    fa-android
  • fa
    fa-linux
  • fa
    fa-dribbble
  • fa
    fa-skype
  • fa
    fa-foursquare
  • fa
    fa-trello
  • fa
    fa-female
  • fa
    fa-male
  • fa
    fa-gittip
  • fa
    fa-gratipay
  • fa
    fa-sun-o
  • fa
    fa-moon-o
  • fa
    fa-archive
  • fa
    fa-bug
  • fa
    fa-vk
  • fa
    fa-weibo
  • fa
    fa-renren
  • fa
    fa-pagelines
  • fa
    fa-stack-exchange
  • fa
    fa-arrow-circle-o-right
  • fa
    fa-arrow-circle-o-left
  • fa
    fa-toggle-left
  • fa
    fa-caret-square-o-left
  • fa
    fa-dot-circle-o
  • fa
    fa-wheelchair
  • fa
    fa-vimeo-square
  • fa
    fa-turkish-lira
  • fa
    fa-try
  • fa
    fa-plus-square-o
  • fa
    fa-space-shuttle
  • fa
    fa-slack
  • fa
    fa-envelope-square
  • fa
    fa-wordpress
  • fa
    fa-openid
  • fa
    fa-institution
  • fa
    fa-bank
  • fa
    fa-university
  • fa
    fa-mortar-board
  • fa
    fa-graduation-cap
  • fa
    fa-yahoo
  • fa
    fa-google
  • fa
    fa-reddit
  • fa
    fa-reddit-square
  • fa
    fa-stumbleupon-circle
  • fa
    fa-stumbleupon
  • fa
    fa-delicious
  • fa
    fa-digg
  • fa
    fa-pied-piper
  • fa
    fa-pied-piper-alt
  • fa
    fa-drupal
  • fa
    fa-joomla
  • fa
    fa-language
  • fa
    fa-fax
  • fa
    fa-building
  • fa
    fa-child
  • fa
    fa-paw
  • fa
    fa-spoon
  • fa
    fa-cube
  • fa
    fa-cubes
  • fa
    fa-behance
  • fa
    fa-behance-square
  • fa
    fa-steam
  • fa
    fa-steam-square
  • fa
    fa-recycle
  • fa
    fa-automobile
  • fa
    fa-car
  • fa
    fa-cab
  • fa
    fa-taxi
  • fa
    fa-tree
  • fa
    fa-spotify
  • fa
    fa-deviantart
  • fa
    fa-soundcloud
  • fa
    fa-database
  • fa
    fa-file-pdf-o
  • fa
    fa-file-word-o
  • fa
    fa-file-excel-o
  • fa
    fa-file-powerpoint-o
  • fa
    fa-file-photo-o
  • fa
    fa-file-picture-o
  • fa
    fa-file-image-o
  • fa
    fa-file-zip-o
  • fa
    fa-file-archive-o
  • fa
    fa-file-sound-o
  • fa
    fa-file-audio-o
  • fa
    fa-file-movie-o
  • fa
    fa-file-video-o
  • fa
    fa-file-code-o
  • fa
    fa-vine
  • fa
    fa-codepen
  • fa
    fa-jsfiddle
  • fa
    fa-life-bouy
  • fa
    fa-life-buoy
  • fa
    fa-life-saver
  • fa
    fa-support
  • fa
    fa-life-ring
  • fa
    fa-circle-o-notch
  • fa
    fa-ra
  • fa
    fa-rebel
  • fa
    fa-ge
  • fa
    fa-empire
  • fa
    fa-git-square
  • fa
    fa-git
  • fa
    fa-y-combinator-square
  • fa
    fa-yc-square
  • fa
    fa-hacker-news
  • fa
    fa-tencent-weibo
  • fa
    fa-qq
  • fa
    fa-wechat
  • fa
    fa-weixin
  • fa
    fa-send
  • fa
    fa-paper-plane
  • fa
    fa-send-o
  • fa
    fa-paper-plane-o
  • fa
    fa-history
  • fa
    fa-circle-thin
  • fa
    fa-header
  • fa
    fa-paragraph
  • fa
    fa-sliders
  • fa
    fa-share-alt
  • fa
    fa-share-alt-square
  • fa
    fa-bomb
  • fa
    fa-soccer-ball-o
  • fa
    fa-futbol-o
  • fa
    fa-tty
  • fa
    fa-binoculars
  • fa
    fa-plug
  • fa
    fa-slideshare
  • fa
    fa-twitch
  • fa
    fa-yelp
  • fa
    fa-newspaper-o
  • fa
    fa-wifi
  • fa
    fa-calculator
  • fa
    fa-paypal
  • fa
    fa-google-wallet
  • fa
    fa-cc-visa
  • fa
    fa-cc-mastercard
  • fa
    fa-cc-discover
  • fa
    fa-cc-amex
  • fa
    fa-cc-paypal
  • fa
    fa-cc-stripe
  • fa
    fa-bell-slash
  • fa
    fa-bell-slash-o
  • fa
    fa-trash
  • fa
    fa-copyright
  • fa
    fa-at
  • fa
    fa-eyedropper
  • fa
    fa-paint-brush
  • fa
    fa-birthday-cake
  • fa
    fa-area-chart
  • fa
    fa-pie-chart
  • fa
    fa-line-chart
  • fa
    fa-lastfm
  • fa
    fa-lastfm-square
  • fa
    fa-toggle-off
  • fa
    fa-toggle-on
  • fa
    fa-bicycle
  • fa
    fa-bus
  • fa
    fa-ioxhost
  • fa
    fa-angellist
  • fa
    fa-cc
  • fa
    fa-shekel
  • fa
    fa-sheqel
  • fa
    fa-ils
  • fa
    fa-meanpath
  • fa
    fa-buysellads
  • fa
    fa-connectdevelop
  • fa
    fa-dashcube
  • fa
    fa-forumbee
  • fa
    fa-leanpub
  • fa
    fa-sellsy
  • fa
    fa-shirtsinbulk
  • fa
    fa-simplybuilt
  • fa
    fa-skyatlas
  • fa
    fa-cart-plus
  • fa
    fa-cart-arrow-down
  • fa
    fa-diamond
  • fa
    fa-ship
  • fa
    fa-user-secret
  • fa
    fa-motorcycle
  • fa
    fa-street-view
  • fa
    fa-heartbeat
  • fa
    fa-venus
  • fa
    fa-mars
  • fa
    fa-mercury
  • fa
    fa-intersex
  • fa
    fa-transgender
  • fa
    fa-transgender-alt
  • fa
    fa-venus-double
  • fa
    fa-mars-double
  • fa
    fa-venus-mars
  • fa
    fa-mars-stroke
  • fa
    fa-mars-stroke-v
  • fa
    fa-mars-stroke-h
  • fa
    fa-neuter
  • fa
    fa-genderless
  • fa
    fa-facebook-official
  • fa
    fa-pinterest-p
  • fa
    fa-whatsapp
  • fa
    fa-server
  • fa
    fa-user-plus
  • fa
    fa-user-times
  • fa
    fa-hotel
  • fa
    fa-bed
  • fa
    fa-viacoin
  • fa
    fa-train
  • fa
    fa-subway
  • fa
    fa-medium
  • fa
    fa-yc
  • fa
    fa-y-combinator
  • fa
    fa-optin-monster
  • fa
    fa-opencart
  • fa
    fa-expeditedssl
  • fa
    fa-battery-4
  • fa
    fa-battery-full
  • fa
    fa-battery-3
  • fa
    fa-battery-three-quarters
  • fa
    fa-battery-2
  • fa
    fa-battery-half
  • fa
    fa-battery-1
  • fa
    fa-battery-quarter
  • fa
    fa-battery-0
  • fa
    fa-battery-empty
  • fa
    fa-mouse-pointer
  • fa
    fa-i-cursor
  • fa
    fa-object-group
  • fa
    fa-object-ungroup
  • fa
    fa-sticky-note
  • fa
    fa-sticky-note-o
  • fa
    fa-cc-jcb
  • fa
    fa-cc-diners-club
  • fa
    fa-clone
  • fa
    fa-balance-scale
  • fa
    fa-hourglass-o
  • fa
    fa-hourglass-1
  • fa
    fa-hourglass-start
  • fa
    fa-hourglass-2
  • fa
    fa-hourglass-half
  • fa
    fa-hourglass-3
  • fa
    fa-hourglass-end
  • fa
    fa-hourglass
  • fa
    fa-hand-grab-o
  • fa
    fa-hand-rock-o
  • fa
    fa-hand-stop-o
  • fa
    fa-hand-paper-o
  • fa
    fa-hand-scissors-o
  • fa
    fa-hand-lizard-o
  • fa
    fa-hand-spock-o
  • fa
    fa-hand-pointer-o
  • fa
    fa-hand-peace-o
  • fa
    fa-trademark
  • fa
    fa-registered
  • fa
    fa-creative-commons
  • fa
    fa-gg
  • fa
    fa-gg-circle
  • fa
    fa-tripadvisor
  • fa
    fa-odnoklassniki
  • fa
    fa-odnoklassniki-square
  • fa
    fa-get-pocket
  • fa
    fa-wikipedia-w
  • fa
    fa-safari
  • fa
    fa-chrome
  • fa
    fa-firefox
  • fa
    fa-opera
  • fa
    fa-internet-explorer
  • fa
    fa-tv
  • fa
    fa-television
  • fa
    fa-contao
  • fa
    fa-500px
  • fa
    fa-amazon
  • fa
    fa-calendar-plus-o
  • fa
    fa-calendar-minus-o
  • fa
    fa-calendar-times-o
  • fa
    fa-calendar-check-o
  • fa
    fa-industry
  • fa
    fa-map-pin
  • fa
    fa-map-signs
  • fa
    fa-map-o
  • fa
    fa-map
  • fa
    fa-commenting
  • fa
    fa-commenting-o
  • fa
    fa-houzz
  • fa
    fa-vimeo
  • fa
    fa-black-tie
  • fa
    fa-fonticons
  • fa
    fa-custom-package
  • fa
    fa-custom-delivery-clerk
  • fa
    fa-custom-architecture
  • fa
    fa-custom-clearing-center
  • fa
    fa-custom-data-center
  • fa
    fa-custom-crowdsourcing
  • fa
    fa-custom-wildebeest
  • fa
    fa-custom-system-manage
  • fa
    fa-custom-business-manage
  • fa
    fa-custom-search
  • fa
    fa-custom-chat
  • fa
    fa-custom-download
  • fa
    fa-custom-user
  • fa
    fa-custom-message
  • fa
    fa-custom-dispatching-center
  • fa
    fa-custom-report-form
  • fa
    fa-custom-arrow
  • fa
    fa-custom-purse
  • fa
    fa-custom-list
  • fa
    fa-custom-graph
  • fa
    fa-custom-smile
  • fa
    fa-custom-gift
  • fa
    fa-custom-wrench
  • fa
    fa-custom-home
  • fa
    fa-custom-money
  • fa
    fa-custom-info-error
  • fa
    fa-custom-hook
  • fa
    fa-custom-minus
  • fa
    fa-custom-info-warn
  • fa
    fa-custom-home1
  • fa
    fa-custom-bars
  • fa
    fa-custom-eye
  • fa
    fa-custom-info-hook
  • fa
    fa-custom-eye-slash
  • fa
    fa-custom-speaker
  • fa
    fa-custom-pencil
  • fa
    fa-custom-ashcan
  • fa
    fa-custom-singleup
  • fa
    fa-custom-singledown
  • fa
    fa-custom-up
  • fa
    fa-custom-down
  • fa
    fa-custom-calendar
  • fa
    fa-custom-school
  • fa
    fa-custom-suggestion
  • fa
    fa-custom-dish
  • fa
    fa-custom-cry-face
  • fa
    fa-custom-smile-face
  • fa
    fa-custom-poi
  • fa
    fa-custom-balance
  • fa
    fa-custom-notice
  • fa
    fa-custom-file
  • fa
    fa-custom-pocket
  • fa
    fa-custom-menu
  • fa
    fa-custom-money2
  • fa
    fa-custom-gift2
  • fa
    fa-custom-dish2
  • fa
    fa-custom-zan
  • fa
    fa-custom-zan-o
  • fa
    fa-custom-drag
  • fa
    fa-custom-empty
  • fa
    fa-custom-lamp
  • fa
    fa-custom-align-center
  • fa
    fa-custom-report
  • fa
    fa-custom-align-right
  • fa
    fa-custom-align-left
  • fa
    fa-custom-coupon
  • fa
    fa-custom-dialog
  • fa
    fa-custom-close
  • fa
    fa-custom-reply
  • fa
    fa-custom-img
  • fa
    fa-custom-config
  • fa
    fa-custom-point
  • fa
    fa-custom-bubble-right
  • fa
    fa-custom-voice-right
  • fa
    fa-custom-bubble-left
  • fa
    fa-custom-voice-left

使用说明

KangarooUI(又称袋鼠UI) 是美团外卖组件生态平台构建的基石,服务于提供标准化规范化的组件。当前推出的版本基于 Bootstrap 3.3.7 进行扩展,后续会持续推出Vue等版本。由于目前大部分业务线是jQuery和requireJs来进行开发的,所以引入袋鼠UI时,需要先引入jQuery(1.11.1以上版本)。另外需要特别注意的是袋鼠UI在1.0向2.0更新之后,所有 扩展组件 都必须通过 Kangaroo-Loader 进行加载。

资源地址

袋鼠UI的资源全部发布在外卖静态资源服务器上,链接类似:http://xs01.meituan.net/kui/版本信息/资源类型/@waimai/kangarooui.min.资源类型 。最新的版本信息请在文档后面 版本信息 进行查看,请尽量使用最新的UI版本。链接示例下面具体列举。

Javascript

资源链接示例:http://xs01.meituan.net/kui/1.8.2/js/@waimai/kangarooui.min.js

Css

资源链接示例:http://xs01.meituan.net/kui/1.8.2/css/@waimai/kangarooui.min.css

使用示例

HTML直接加载

本示例直接在页面中加载jQuery和KangarooUI,保证在页面全局都能够使用变量、调用方法。但是可能会存在使用requireJs后,某些组件再次引入jQuery导致代码重置,KangarooUI组件没有绑定上的问题,具体表现就是报组件undefined。解决方法是给加载的jQuery模块命名,使其虽然多次引用,但是加载只加载最初的那个,也就是袋鼠UI绑定组件的那个; 其次就是使用后面一种引用方法。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="renderer" content="webkit">
    <title>
      袋鼠UI - 页面初始化示例
    </title>
    <link rel="stylesheet" type="text/css" href="http://xs01.meituan.net/kui/1.8.2/css/@waimai/kangarooui.min.css" />

    <!--[if lte IE 9]>
    <script type="text/javascript" src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>
  <body>

    <h1>Hello KangarooUI!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 袋鼠UI javascript文件 -->
    <script src="http://xs01.meituan.net/kui/1.8.2/js/@waimai/kangarooui.min.js"></script>

    <!-- 袋鼠UI loader文件 -->
    <script src="http://s0.meituan.net/bs/js/?f=require(@waimai/kangarooui-loader):js/loader.min.js@0.4.1"></script>

  </body>
</html>

使用requireJs加载

本示例使用的是模块化加载的方式,适用于使用了require加载模块的项目。袋鼠UI没有做模块化的判断处理,所以需要使用shim函数来进行封装。下面是一个Javascript模块引用袋鼠UI的示例。
window.require.config({
  baseUrl: window.VM.STATIC_URL,
    shim: {
      'lib/kangarooui/kangarooui.min': {
        deps: ['lib/jquery']
    }
  }
});

window.require(['lib/jquery', 'lib/kangarooui/kangarooui.min'], function ($, KangarooUI) {
  'use strict';
  // 这里写业务代码
});

版本信息

下面列举了所有袋鼠UI从记录版本信息以来的所有改动信息。请尽量使用最新的版本进行开发。

版本号 修改信息 资源链接