Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kmhgmbh/vue-md-kmh-components
Commonly used VueJS components using material design
https://github.com/kmhgmbh/vue-md-kmh-components
Last synced: 8 days ago
JSON representation
Commonly used VueJS components using material design
- Host: GitHub
- URL: https://github.com/kmhgmbh/vue-md-kmh-components
- Owner: kmhgmbh
- Created: 2018-01-24T10:26:30.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T04:06:09.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T21:31:44.003Z (17 days ago)
- Language: Vue
- Size: 3.71 MB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 26
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Vue Material Design KMH Components
> A Vue.js 2.0 Component Collection
## Development
### Prerequisites
- Vue
```bash
$ npm i vue
```
- Vue Material ^1.0.0-beta-7
```bash
$ yarn add vue-material@beta
```
## Usage
### Installation
```bash
$ npm install vue-md-kmh-components
```
```bash
$ yarn add vue-md-kmh-components
```
### Use component
- add material design icons to html
```html
```
- add to components:
```javascript
import {
dataTable,
...
} from 'vue-md-kmh-components';
...
components: {
dataTable,
...
},
```
- add Vue Material lib to Vue init script:
```javascript
import VueMaterial from 'vue-material';
require('vue-material/dist/vue-material.css');
Vue.use(VueMaterial);
```
- in template:
```html
```
- data and headData in parent component
```javascript
birds: [
{
name: 'Birdy',
variety: 'Eagle',
size: 330,
wingCount: 1.5,
},
{
name: 'Rosa',
variety: 'Peacock',
size: 630,
wingCount: 2,
},
],
birdsHeadData: [
{
key: 'name',
name: 'Birds Name',
}, {
key: 'variety',
name: 'Birds variety',
}, {
key: 'size',
name: 'Size of Bird',
format: (value) => { // dynamically change format
if (value) {
return `${value} mm`;
}
return '';
},
}, {
key: 'wingCount',
name: 'Number of wings',
},
],
```
- vue slots in table columns
```javascript
birdsHeadData: [
...
{
key: 'comment',
name: 'Comment',
type: 'slot'
}
...
],
```
slotname must be named; columnname + underscore + row index
```html
Comment
```
! Attention ! Please make sure every row in the table data has a unique id