Version 1.0.4 文档

swan-ui

Version 1.0.4

基于Vue框架实现的移动端UI组件库

Github | Examples

组件引入方式

• script标签引入
• 全局注册
• 按需引入注册

样式引入方式

• html中link标签引入
• 从npm包引入

script标签引入

<!-- 引入样式 -->
<link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" />
<!-- 移动端适配 -->
<script type="text/javascript" src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="http://future-team.github.io/swan-ui/lib/index.js"></script>

<template>
    <div id="app">
        <sw-button @click="visible = true" block>按钮</sw-button>
        <sw-dialog v-model="visible" title="Hello world">
            <p>欢迎使用 Swan UI</p>
        </sw-dialog>
    </div>
<template>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return { visible: false }
        }
    })
</script>

从npm包引入

安装

$ npm install swan-ui --save

$ npm install phoenix-styles --save

全局注册

import Vue from 'vue'
import SwanUI from 'swan-ui'

Vue.use(SwanUI)

按需引入

import Vue from 'vue'
import { Button, Star} from 'swan-ui'
//import Button from 'swan-ui/lib/Button'
//import Star from 'swan-ui/lib/Star'
Vue.component(Button.name,Button)
Vue.component(Star.name,Star)

引入样式

link标签引入

<!-- html引入 -->
<link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" />

从npm包导入

.vue文件中

<style lang="less" src="phoenix-styles/less/phoenix-styles.less">       

或者在js文件中引入

<!-- 全部引入 -->
import 'phoenix-styles/dist/phoenix-styles.min.css'
<!-- 按需引入 -->
import 'phoenix-styles/less/modules/buttons.less'
<!-- 全部引入 -->
import 'phoenix-styles/less/phoenix-styles.less'

另外，如果要换成ios主题的皮肤，可引入

import 'phoenix-styles/dist/ios-skin.min.css'