ci-components-h5

ci-components

a vue2.0 ui library based on IDG

language

• Chinese

Install

$ npm install ci-components --save-dev

upgrade

$ npm upgrade ci-components --save-dev

What's Library Included

• element-ui 1.2.5

Usage

// import 
import CIComponents from 'ci-components'
// css
import 'element-ui/lib/theme-default/index.css'
import 'ci-components/css/index.scss'
Vue.use(CIComponents)

Components

• ci-row (same as element ci-col)
• ci-col

<ci-row>
  <ci-col :span="24">
    <ci-col :span="12">
      <!-- content -->
    </ci-col>
    <ci-col :span="12">
      <!-- content -->
    </ci-col>
  </ci-col>
</ci-row>

• ci-sidebar

example

<template>
 <ci-topbar
  class="light-blue"
  :data="topbarData"
  :username="username"
  :titlename="appname" />
</template>
 
<script>
export default {
 
  data () {
    return {
      username: 'luliangxiao',
      titlename: 'dashboard',
      topbarData:  [
        {
          title: 'home',
          name: 'index' // use vue router name
        },
        {
          title: 'components',
          // icon: 'el-icon-message', // use icon class name
          items: [
            {
              title: 'example',
              hash: '/example' // use vue router path
            }
          ]
        },
        {
          title: 'noAccess',
          name: 'noAccess'
        },
        {
          title: '404',
          link: '/#/no.html' // use normal href
        }
      ]
    }
  }
 
}
</script>
 

• class: light-blue dark-blue light-dark

• titlename: String

• username: String

• icon: must be a class name

• data:

  • title: String
  • name: must be vue router name

  ```
  name: anotherName
  www.domain.com/#/index => www.domain.com/#/anotherName
  ```
  

  • link: must be fullpath link

  ```
  link: www.baidu.com
  www.domain.com/#/index => www.baidu.com
  link: /link
  www.domain.com/#/index => www.domain.com/link
  ```
  

  • hash: must be hash

  ```
  hash: hashName
  www.domain.com/#/index => www.domain/#/hashName
  ```
  

• ci-topbar

  • class: as ci-sidebar
  • data: as ci-sidebar
  • titlename: as ci-sidebar

      <ci-sidebar
      class="light-blue"
      :data="navData"
      :titlename="appname" />

• ci-noAccess

<ci-noAccess />

• ci-notFound

<ci-notFound />