VONIC

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

介绍

什么是 vonic ？

一个基于 vue.js 和 ionic 样式的 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 样式资源文件)。

复制代码

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

Hello Vonic

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

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

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

应用挂载点

复制代码

页面组件const Index = {

template: `

`,

data() {

return {

msg: 'Hello! Vonic.'

}

}

}

const About = {

template: `

`

}

复制代码

路由定义const routes = [

{ path: '/', component: Index },

{ path: '/about', component: About }

]

复制代码

启动应用Vue.use(Vonic.app, {

routes: routes

})

复制代码

没错，就这么简单。

组件和服务

概述

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

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

methods: {

onClick() {

$toast.show("button clicked.")

}

}

}

复制代码

vonic 组件组件名称

组件标签

描述

MdButton

Material Design 风格按钮

VonInput

输入框

Search

搜索框

VonRadio

单选框

VonCheckbox

复选框

VonToggle

开关按钮

VonRange

滑块

VonHeader

页头

VonBadge

徽章

List

列表

Item

列表选项

Cells

宫格

Tabs

选项卡

ButtonBar

按钮栏

Scalable

缩放

Swiper

轮播容器

SwiperItem

轮播项

Scroll

滚动容器

Scroller

基于 vue-scroller 插件的滚动容器

Cascade

级联

Accordion

手风琴容器

AccordionItem

手风琴内容项

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指令来定义页面及导航栏信息

复制代码

v-nav 指令参数列表参数名

描述

类型

必选

默认值

title

导航栏标题

String

否

无

showBackButton

是否显示返回按钮

Boolean

否

false

backButtonText

返回按钮文字(模板)

String

否

见备注

onBackButtonClick

返回按钮点击回调

Function

否

无

showMenuButton

是否显示菜单按钮

Boolean

否

false

menuButtonText

菜单按钮文字(模板)

String

否

见备注

onMenuButtonClick

菜单按钮点击回调

Function

否

无

hideNavbar

隐藏导航栏

Boolean

否

false

backButtonText 默认值为

menuButtonText 默认值为

路由

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 构建项目的同学，请参考这个项目。