Vue component library for KaiOS apps.
npm install vue-kaiui
In your main.js add
import Vue from 'vue'
import App from './App.vue'
import VueKaiUI from "vue-kaiui"; // !
Vue.use(VueKaiUI) // !
new Vue({
render: h => h(App),
}).$mount('#app')Most importantly, put all the components in the <kaiui-content> root so that KaiUI can manage all the Softkeys and Header design elements for you.
See the Components API docs and the Sample App for usage examples.
You can simply override CSS variables in your styles using the :root scope. All theme CSS variables are found here.
<style>
:root{
--primary-color: red;
--primary-dark-color: darkred;
...
--tabbar-tabs-selected-color: blue;
...
}
</style>See Contributing.
- Header
- Tab
- Software Key
- List Item
- Separator
- Checkbox
- Button
- Input
- Multiple-line Input
- Toast
- Radio Button (Group)
- Progress
- Slider (update Design!)
- Date/Time Value Selector
- Dialog / Value Selector / Option Menu
- Notice
- List View
- Tab View
- Grid View
- Fonts
- Ionicons icons
Typography details can be found here.
Standardized stylings, colors and fonts are found in the asset directory.
Vue KaiUI uses the awesome Ionicons icons.
Icons are found in the asset directory.
There's much work to be done on building out more UI components, writing tests, etc...
Please look at currently open issues and our Contributing Guide.
To build & test the project run:
npm install
npm run build
To build the project and create API docs run:
npm run release
Thanks Adrian Machado for the inspiration. Check out his awesome KaiUI (React component library for KaiOS apps).