Vonic 2.0 全新文档站上线

阅读 6836
收藏 38
2017-03-07
原文链接:wangdahoo.github.io

VONIC

Mobile UI Components, based on Vue.js and ionic CSS.

介绍

什么是 vonic

一个基于 vue.jsionic 样式的 UI 框架,用于快速构建移动端单页应用。

和 ionic 的关系:没有关系,只是在样式方面以 ionic 的 css 文件为基础(做了一些调整)


基础规范

字体

vonic 沿用了 ionic 跟随苹果系统的字体栈

font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;

颜色

vonic 提供以下几种场景色

Assertive #EA5A49
Positive #4A90E2
Balanced #44CC00
Energized #FFBD17
Calm #11C1F3
Dark #484746
Royal #B5B5B5
Stable #F5F5F5
Light #FFFFFF

这些场景色将作为主题元素融入到很多插件中去,如:Material Design Button、单选框、多选框、开关按钮、计数器、选项卡、对话框等。

图标

既然 vonic 是以 ionic 样式为基础的,那它当然也包含 ionicons 图标集。


准备

依赖

vonic 依赖以下几个库,在创建 vonic 项目之前,请确保引入它们。

  • vue.js
  • vue-router.js
  • axios.js (vue.js 官方推荐的 ajax 方案)

CDN

通过 unpkg/vonic 你可以快速获取最新的相关资源文件(含 vonic 定制版 ionic 样式资源文件)。

<!-- 定制版 ionic 样式 -->
<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.6/dist/ionic/css/ionic.css">

<!-- 依赖库 axios/vue/vue-router -->
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.0/dist/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<script src="https://unpkg.com/vonic@2.0.0-beta.6/dist/vonic.min.js"></script>

vonic 当前最新版本为 2.0.0-beta.6


Hello Vonic

好了,是时候整一个 Hello World 了。

vonic 是一个用来做单页应用的UI框架。所以,我们这里谈论的 Hello World 不是一个单个的页面,而是一个单页应用骨架。

整个单页应用的搭建过程很简单,只要4个步骤。

应用挂载点
<von-app></von-app>
页面组件
const Index = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'Home' }">
      <div class="page-content text-center">
        <h2 class="padding" v-text="msg"></h2>

        <router-link class="button button-assertive" to="/about">
          <i class="ion-information-circled"></i> About
        </router-link>
      </div>
    </div>
  `,
  data() {
      return {
        msg: 'Hello! Vonic.'  
    }
  }
}

const About = {
  template: `
    <div class="page has-navbar" v-nav="{ title: 'About', showBackButton: true }">
      <div class="page-content text-center">
        <h2 class="padding">Nothing here.</h2>
      </div>
    </div>
  `
}
路由定义
const routes = [
  { path: '/', component: Index },
  { path: '/about', component: About }
]
启动应用
Vue.use(Vonic.app, {
  routes: routes
})

没错,就这么简单。


组件和服务

概述

vonic 加载完成后,一部分组件已通过Vue.component方法注册为全局组件,以 Vue 标准组件方式进行使用;另一部分组件则注册为全局组件服务,调用其方法即可使用,如:$toast$dialog 等。

下面以 MdButton、$toast 为例进行说明:

<template>
  <div class="page has-navbar" v-nav="{'title': 'Component and Service'}">
    <div class="page-content padding padding-top">
      <md-button class="button button-assertive button-block">
        just a button
      </md-button>

      <md-button class="button button-balanced button-block" @click.native="onClick()">
        show toast
      </md-button>
    </div>
  </div>
</template>
<script>
  export default {
    methods: {
      onClick() {
        $toast.show("button clicked.")
      }
    }
  }
</script>

vonic 组件

组件名称 组件标签 描述
MdButton <md-button> Material Design 风格按钮
VonInput <von-input> 输入框
Search <search> 搜索框
VonRadio <von-radio> 单选框
VonCheckbox <von-checkbox> 复选框
VonToggle <von-toggle> 开关按钮
VonRange <von-range> 滑块
VonHeader <von-header> 页头
VonBadge <badge> 徽章
List <list> 列表
Item <item> 列表选项
Cells <cells> 宫格
Tabs <tabs> 选项卡
ButtonBar <button-bar> 按钮栏
Scalable <scalable> 缩放
Swiper <swiper> 轮播容器
SwiperItem <swiper-item> 轮播项
Scroll <scroll> 滚动容器
Scroller <scroller> 基于 vue-scroller 插件的滚动容器
Cascade <cascade> 级联
Accordion <accordion> 手风琴容器
AccordionItem <accordion-item> 手风琴内容项
Datepicker <datepicker> 日期选择器

vonic 服务

服务名称(全局变量) 描述
$toast 文字提示
$loading 加载提示
$dialog 对话框
$popup 弹层
$actionSheet 操作列表
$tabbar 选项栏
$sidebar 侧边栏
$modal 模态窗
$storage 本地存储

vonic 指令

指令 描述
v-nav 导航栏指令
v-tabbar 选择栏指令
v-tabbar-menu-index 选择栏默认菜单指令

页面与路由

页面

vonic 通过 .page.page-content 这两个基类和v-nav指令来定义页面及导航栏信息

<template>
  <div class="page has-navbar" v-nav="{title: '页面标题'}">
    <div class="page-content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

v-nav 指令参数列表

参数名 描述 类型 必选 默认值
title 导航栏标题 String
showBackButton 是否显示返回按钮 Boolean false
backButtonText 返回按钮文字(模板) String 见备注
onBackButtonClick 返回按钮点击回调 Function
showMenuButton 是否显示菜单按钮 Boolean false
menuButtonText 菜单按钮文字(模板) String 见备注
onMenuButtonClick 菜单按钮点击回调 Function
hideNavbar 隐藏导航栏 Boolean false

backButtonText 默认值为 <i class="icon ion-ios-arrow-back"></i>
menuButtonText 默认值为 <i class="icon ion-navicon"></i>

路由

vonic 加载完成后,即注册 VueRouter 实例为 $router 服务

$router.forward()$router.back() 两个方法默认通过调用 VueRouter 实例的 push 方法来进行路由切换,但在调用 push 方法前会预先定义页面切换方向。

/* 启动应用前,设置 Vonic.app 的 pushMethod 选项为 replace 可以全局禁用浏览器 history */
/* 即,$router.forward()、$router.back() 不再新增浏览记录 */

Vonic.app.setConfig('pushMethod', 'replace')

Vue.use(Vonic.app, {
  routes: routes
})

Webpack

习惯使用 vue init webpack my-project 构建项目的同学,请参考这个项目。

github.com/wangdahoo/v…

评论