移动端框架—OnsenUI

Posted 2023-03-15

参考技术A 一个专为移动应用程序设计的UI框架，带有丰富UI组件、遵循原生ios和android设计标准，即时实现功能、免费使用，在iOS和Android呈现不同的风格。

①引入相关CSS、JS 文件

原生/JQuery框架
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <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 结构中使用相关组件，格式为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中标签写法略有区别 v-ons-**  <v-ons-button @click="clickFun">按钮</v-ons-button>
同大部分UI框架一样，也可以给标签添加不同的class控制同一种标签的不同风格

按钮ons-input,
输入框ons-button,
导航栏ons-navbar,
底部导航栏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
网格布局 ons-row，ons-col，
弹框 ons-dialog,ons-modal,ons-popover