1簡介
一個專為移動應(yīng)用程序設(shè)計(jì)的UI框架劫拗，帶有豐富UI組件、遵循原生iOS和Android設(shè)計(jì)標(biāo)準(zhǔn)枯途，即時實(shí)現(xiàn)功能、免費(fèi)使用籍滴，在iOS和Android呈現(xiàn)不同的風(fēng)格酪夷。
2使用方法及注意事項(xiàng)
①引入相關(guān)CSS、JS 文件
原生/JQuery框架
??? <link rel="stylesheet" >
??? <link rel="stylesheet" >
??? <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
vue框架
? 安裝插件包
??? npm install onsenui vue-onsenui
? main.js中引入
??? import 'onsenui/css/onsenui.css';
??? import 'onsenui/css/onsen-css-components.css';
??? import Vue from 'vue';
??? import VueOnsen from 'vue-onsenui';
??? Vue.use(VueOnsen);
②html 結(jié)構(gòu)中使用相關(guān)組件孽惰，格式為ons-**,<ons-button>按鈕</ons-button>? <ons-navigator></ons-navigator> <ons-input></ons-input>
或者使用CSS寫法 <button class="button">按鈕</button><input type="text" class="text-input" placeholder="請輸入">
vue中標(biāo)簽寫法略有區(qū)別 v-ons-**? <v-ons-button @click="clickFun">按鈕</v-ons-button>
同大部分UI框架一樣晚岭，也可以給標(biāo)簽添加不同的class控制同一種標(biāo)簽的不同風(fēng)格
3常用標(biāo)簽(類)
按鈕ons-input,
輸入框ons-button,
導(dǎo)航欄ons-navbar,
底部導(dǎo)航欄ons-toolbar,
tab切換 ons-tabbar,ons-tab
列表 ons-list,ons-list-item,ons-list-header; list-item__thumbnail,list-item__title,list-item__subtitle(Class)
卡片 ons-card
網(wǎng)格布局 ons-row，ons-col灰瞻，
彈框 ons-dialog,ons-modal,ons-popover
