Build a “wheel” musionUI

First published at: github.com/USTB-musion…

Writing in the front

Let’s start with musionUI’s repository: musionUI. Right now the code is not finished, it’s only about 30% complete, it’s being updated… Simple documentation will be written when all the code is complete.

What wheels were made

• Done: Input boxes, buttons, ring fit layouts, grids, popover, TAB tabs, accordion, cascade selection, Collapse panels
• What is not done: seamless round robin, Dialog, Notification Notification, responsive navigation bar, paging, form validation, Table, image upload, Sticky, Tree, Suggestion, Datepicker, etc.

Project characteristics

1. Use CHAI, Mocha to write test cases, use Karma to configure the test environment, and each component has rich unit test cases
2. Parcel is used early to facilitate building, and Vue Cli3 or Webpack is referenced later for more functionality
3. Continuous integration testing using Travis CI
4. Refer to the API Design and style layout of UI wheels such as ElementUI, Ant Design, and Material UI that are now well established in the community.
5. The project was developed and used based on the Vue2. X version

Run projects

1. Git clone github.com/USTB-musion…
2. cd musion / npm install
3. npm start

documentation

import Vue from 'vue'
import Button from './button.vue'
import Icon from './icon.vue'
import ButtonGroup from './button-group.vue'
import Input from './input.vue'
import Row from './row.vue'
import Col from './col.vue'
import Layout from './layout.vue'
import Header from './header.vue'
import Content from './content.vue'
import Sider from './sider.vue'
import Footer from './footer.vue'
import Toast from './toast.vue'
import plugin from './plugin.js'
import Tabs from './tabs.vue'
import TabsHead from './tabs-head.vue'
import TabsBody from './tabs-body.vue'
import TabsPane from './tabs-pane.vue'
import TabsItem from './tabs-item.vue'
import Popover from './popover.vue'
import Collapse from './collapse.vue'
import CollapseItem from './collapse-item.vue'

Vue.component('m-button', Button)
Vue.component('m-icon', Icon)
Vue.component('m-button-group', ButtonGroup)
Vue.component('m-input', Input)
Vue.component('m-row', Row)
Vue.component('m-col', Col)
Vue.component('m-layout', Layout)
Vue.component('m-header', Header)
Vue.component('m-content', Content)
Vue.component('m-sider', Sider)
Vue.component('m-footer', Footer)
Vue.component('m-toast', Toast)
Vue.component('m-tabs', Tabs)
Vue.component('m-tabs-head', TabsHead)
Vue.component('m-tabs-body', TabsBody)
Vue.component('m-tabs-pane', TabsPane)
Vue.component('m-tabs-item', TabsItem)
Vue.component('m-popover', Popover)
Vue.component('m-collapse', Collapse)
Vue.component('m-collapse-item', CollapseItem)
Vue.use(plugin)
Copy the code

Components are registered globally, so they can be imported directly into the page. Two examples:

1. Use the TAB page

preview

Code use:

data:{
  selected: '1'
}

<m-tabs :selected="selected">
  <m-tabs-head>
    <m-tabs-item name="1">1</m-tabs-item>
    <m-tabs-item name="2">2</m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane name="1">content 1</m-tabs-pane>
    <m-tabs-pane name="2">content 2</m-tabs-pane>
  </m-tabs-body>
</m-tabs>
Copy the code

2. The popover

preview

Code using

<m-popover trigger="hover">
  <m-button>Above the pop-up</m-button>
  <template slot="content">Pop-up content</template>
</m-popover>
<m-popover position="bottom" trigger="hover">
  <m-button>Below the pop-up</m-button>
  <template slot="content">Pop-up content</template>
</m-popover>
<m-popover position="left" trigger="hover">
  <m-button>On the left side of the pop-up</m-button>
  <template slot="content">Pop-up content</template>
</m-popover>
<m-popover position="right" trigger="hover">
  <m-button>On the right side of the pop-up</m-button>
  <template slot="content">Pop-up content</template>
</m-popover>
Copy the code

Attribute Usage Instructions

3. The layout

preview

Code using

<m-layout>
  <m-sider>
    sider
  </m-sider>
  <m-layout>
    <m-header>
      header
    </m-header>
    <m-content>
      content
    </m-content>
    <m-footer>
      footer
    </m-footer>
  </m-layout>
</m-layout>
Copy the code

4. Grid components

preview

Code using

<m-row>
  <m-col span="8">
    <div>8</div>
  </m-col>
  <m-col span="8">
    <div>8</div>
  </m-col>
  <m-col span="8">
    <div>8</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
</m-row>
Copy the code

Attribute Usage Instructions

More code and documentation continue to be updated at…..

Special thanks

Special thanks to Teacher Fang Fang. Under the guidance of Fang Fang, it is very cool to realize the components one by one.

You can pay attention to my public account “Muchen classmates”, goose factory code farmers, usually record some trivial bits, technology, life, perception, grow together.