chatchamp-empty-state
Empty State Component
Intro
- Vue Empty state component
Yet another empty state component. The Basic idea is that you can place the component anywhere in your code and pass in the data object. The component will listen to the data object and when ever it is empty it will show the component conents.
Screenshots
Demo
# clone empty state component
git clone https://github.com/pharzan/chatchamp-empty-state chatchamp-empty-state
# install dependices
yarn
# to run the demo
yarn demo
Locate to http://localhost:4000
# to run the component alone
yarn dev
# to run the tests
yarn test
Instalation and usage
To install the component you can use the following to install it in your project.
npm install --save chatchamp-empty-state
To use the component anywhere in your project, place the source code somewhere in your components folder in your project and use it as a component in the App.vue file.
import EmptyState from 'chatchamp-empty-state'
Vue.component('EmptyState', EmptyState)
Now you can use the tag anywhere in your project and pass in the parameters to control the component
<EmptyState :data="data" v-on:click="counter++"/>
to add the style you need to import the styles from the dist folder.
import 'chatchamp-empty-state/dist/chatchamp-empty-state.css'
API
Component parameters:
-
data: Number, String, Object, Array -
image: String
The image to be displayed
title: String
The Title to be displayed
subTitle: String
The subTitle to be displayed
on-click: Function
params: func ( ...param )
function when the callback button is clicked
Tests
To run the test
npm run test
Future improvments
- use slots and templates to improve re-usability
- add more preset scenarios for different usages with texts and icons ex. search, table, ...