vue-kaiui v0.1.1

Vue component library for KaiOS apps.

• Installation
• Usage
  • Components API
  • Styles
• Status
  • Components
  • Navigation
  • Typography
  • Miscellaneous
• Styling, Colors, Fonts
• Icons
• Contributing

Installation

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')

Usage

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.

Components API

See the Components API docs and the Sample App for usage examples.

Styles

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>

Status

See Contributing.

Components

• 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

Navigation

• List View
• Tab View
• Grid View

Typography

• Fonts
• Ionicons icons

Miscellaneous

• Theming
• Translation
• LargeText
• Portrait/Landscape Mode

Styling, Colors, Fonts

Typography details can be found here.

Standardized stylings, colors and fonts are found in the asset directory.

Icons

Vue KaiUI uses the awesome Ionicons icons.

Icons are found in the asset directory.

Contributing

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).