wangdahoo / vonic Goto Github PK

View Code? Open in Web Editor NEW

3.4K 127.0 485.0 10.65 MB

Mobile UI Components, based on Vue.js and ionic CSS. https://wangdahoo.github.io/vonic-documents

License: Other

Vue 51.76% JavaScript 20.49% HTML 0.68% CSS 27.07%

components mobile web-app ionic vue vonic

vonic's Introduction

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

Demo

https://wangdahoo.github.io/vonic/docs/

Notice

v2.0.0-beta.15 released.

$ npm install [email protected]

for vue 1.0, please refer to branch 1.x.

Features

Equip with Vue.js, Vue-Router, ES6 & Babel 6
Cool with Webpack 2.0 & Vue Loader
Ionic CSS Components
Stylesheets in Sass
Starter Project for Development Quick Start

Components

Material Design Button
Input
Search
Radio
Checkbox
Toggle
RangeSlider
Badge
Toast
Loading
Header
List
Cells
Tabs
ButtonBar
Scalable
Swiper
Scroll
VueScroller
Cascade
Accordion
Datepicker
Dialog
Popup
Modal
ActionSheet
Sidebar
TabBar

Getting started

quick start with vue-cli.

$ npm i vue-cli -g
$ vue init wangdahoo/vonic-template#2.0 my-vonic-app
$ cd my-vonic-app
$ yarn install

Run project

$ npm run dev

That's it.

And if you start with vue-webpack-boilerplate by vue-cli, check the following starter for your reference. https://github.com/wangdahoo/vonic-webpack-starter

Documents

中文文档

Thanks to

LICENSE

MIT

vonic's People

Contributors

Stargazers

Watchers

Forkers

alexguo88 felix307253927 liheng-githup oo10 shrimps80 bring1125 nikelei eviem hevine looknd coocoky heistrock panjs lyy199212 ticktack cutso masdude tianya1015 avalian cyyjs unkushiro wang1505519757 lingtal-fork oxiaojiano baiyaaaaa sqaiyan 54yjg leolujuyi jinrichardjin osub ninjya88 xifat xueweiyema isusion chenz24 kagawagao seudevnews yefan813 shaode sdtm1016 vn-kevin shenglintang cuulee yst726 assoft 420258867 o0teamo0o cucygh yulingchen balmainctf louisbao asherjia langkcc leo851211 andrewddc resvue anhaoran jamielhf quietleo abunuo daiyichen liming0711 zhanghua3450 chengfeiblog eric2013 372130786 kanghaiwei d8q8 imziwen sujinw ui-vue lypigg lambdaxs yumengzhong akumalin 786320861 jnan77 879543369 andrewwpan taosin luckyuns sparkinzy weikety inkfish08 studyforfun hanmichael huguge xiaohui-zhangxh soleebook icodingstar lianiamfly m-ike jyy524325 foreverelement imjerrybao hadryan leehongqiang kahnnn thk9 hiekay

vonic's Issues

路由页面切换闪动

在chrome浏览器上没有，但在手机上就会出现，页面切换后上一个页面会快速闪动一下后消失
就连demo中也有这个问题

请问后期有没有考虑发展成ionic-v2版本的样式，同时支持2中平台样式

http://ionicframework.com/docs/v2/components/#action-sheets

Feature Request: Menu support

Support popup menu (Android material design)

ios下图片事件和文字选择事件被禁用解决

图片：
img { -webkit-touch-callout: default; }
文字：
user-select: text; -webkit-user-select: text;

从一个有swiper的页面跳转到另一个有swiper的页面，swiper就会失效。

例如，从/advanced/swiper/default跳转到/advanced/swiper/vertical

Tab的实现有非子路径实现的方案吗？

最近接触了一个项目，需要用到具名路径传递参数，但是在TAB的实现中用子路径传递参数时存在问题，想问问目前的TAB有非子路径的实现方式吗？

Scroll组件交互：实现多次加载数据后，没有更多数据的效果。

请问如何注销scroll滚动，

Feature Request: Date/Time picker

地区选择Popup-Picker

可不可以把那个选择器picker 改成和weui里面的那种从底部弹出滑动式的，有确认和取消选项的那种

tabbar横竖屏切换的icon和text不对齐的bug还没修复么？

API里的控件用法怎么用？

HellowWorld可以运行了，但是API里的写法和HellowWorld的写法不一样啊，标签是直接放body里吗？另外import {Tabs} from 'vonic'等语句究竟放哪？在JS和HTML文件里都报错：SyntaxError: import declarations may only appear at top level of a module

Tabbar icons on switching landscape-portrait

When using Tabbar, if I switch the orientation of the device, the icons don't work properly.

If I reload the page the icons return to normal.

Here what looks like when I change the orientation using the chrome devtools (works the same way on a real device).

Thanks!

Feature Request: Badge support

a.k.a numbers around icons

Which should I choose, vonic, vum, f7 or ionic?

Thanks for opening source this wonderful tool, @wangdahoo

What is the main differences between vonic and other frameworks? If I need to build a mobile app with web mainly running on iOS platform, and probably migrate to Android as well, what do you suggest?

Thanks again.

添加手势事件

大大，后期会考虑添加手势事件吗？比如tabs选项卡可以手势左右切换内容、侧边栏可以手势滑动展开/关闭等功能

Feature Request: FAB button (Android Material Design)

备忘

Vonic-template#2中没办法获取swiper对象

English Documentation

This is a very nice project, but is hard to use and share because they doc not is in english

English Docs-Translation

Hi @wangdahoo , great work!

Will there be an english translation of the Docs?

vonic2.0能否直接按组件的形式使用？或者vonic template怎么发布？

如题，我这边本身有一个vux的template，npm run build 后可以很方便的和flask一起发布。
但测试了下vonic的template的发布，发现npm run build后只有简单的index.html和build.js。
这个根本发布不了，所以想把vonic 放到vux的工程里，但报各种错误

!!vue-style-loader!css-loader!./../../../node_modules/vue-loader/lib/style-rewriter?id=data-v-3d0942f6!sass-loader!./../../../node_modules/vux-loader/src/style-loader.js!./../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./arrow.vue

比如这种，貌似是冲突了
感觉无解啊

能像vux那样直接引入components么

npm install 'vonic --save

//alias配置
'vonic-components': 'vonic/src/components/',

//loader配置
{
   test: /vonic.src.*?js$/,
   loader: 'babel'
 }

//引用
import {Alert} from 'vonic-components/popup'

//错误

1.1.js   228 kB       1
2.2.js   737 kB       2
3.3.js  68.5 kB       3
4.4.js  30.9 kB       4
5.5.js  33.1 kB       5
6.6.js     7 kB       6

ERROR in ./~/.0.3.0@vonic/src/components/popup/Alert.vue
Module build failed: TypeError: this._init is not a function
    at Object.Vue (C:\Users\wonders\Desktop\TEST\jtgjw\node_modules\.1.0.28@vue\dist\vue.common.js:9674:8)
 @ ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./~/.0.3.0@vonic/src/components/popup/index.vue 7:13-3
1

axios is not defined

I'm trying to use the 2.0 alpha version, but I can't get it to work =/

I always get the "axios is not defined" error, like the lib isn't included as a dependency.

Do you have any idea on this kind of error?

I'm thinking that's somethin related to the module.exports.externals from the webpack.config, but I don't know how to solve.

Thank you!

建议修改

$storage服务的on监听不起作用，不知道是不是你没有完善这个功能在但页面需要加入以下才起作用
let ls = 'localStorage' in global && global.localStorage ? global.localStorage : stub
let se = document.createEvent("StorageEvent")

if (!isStorageSupported(ls)) {
ls = stub
}

function Accessor(key, value) {
if (arguments.length === 1) {
return get(key)
}
return set(key, value)
}

function dispatch(key, value) {
se.initStorageEvent('storage', false, false, key, ls.getItem(key) || null, JSON.stringify(value) || null, '', '')
window.dispatchEvent(se);
}

function get(key) {
try {
return JSON.parse(ls.getItem(key))
} catch (e) {
return ls.getItem(key)
}
}

function set(key, value) {
try {
dispatch(key, value)
ls.setItem(key, JSON.stringify(value))
return true
} catch (e) {
return false
}
}

function remove(key) {
dispatch(key)
return ls.removeItem(key)
}

function clear() {
return ls.clear()
}

WARNING in ./~/vue/dist/vue.common.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

请问如何处理