almendra-rocket v0.1.15-dev.0
Dependencies
You need Vue.js version 2.6+.
Install via npm
npm install https://cdn.playvox.net/almendra-components/master/1.0.0/almendra-components-1.0.0.tgz
Import and use almendra components
In whatever component what you want to develop, import the component individually, and then include it in vue component option.
// into component.vue
import { AlLink } from 'almendra-components';
export default {
name: 'MyComponentName',
components: {
AlLink
}
};
Or you can use all components as global just register in a plugin.
// almendra-components-plugin.js
import Vue from 'vue';
import almendra from 'almendra-components';
Vue.use(almendra);
It is needed import style separately, can be include it in html tag or adding in config files, i.e. with nuxt.
// in nuxt.config.js
/*
** Global CSS
*/
css: [
'almendra-components/dist/almendra.css'
],
Alternatively, you can use a CDN
Add css stylesheet
<link
rel="stylesheet"
href="https://cdn.playvox.net/almendra-components/master/1.0.0/dist/almendra.css"
/>
And include VueJs before almendra components
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.playvox.net/almendra-components/master/1.0.0/dist/almendra.umd.js"></script>
<script>
Vue.use(almendra.default);
let myVue = new Vue({
el: '#app'
});
</script>
How to use
All components are instance as global components, for this, It doesn't needed to import each one in other components or Vue Object. the simple example below, show a ghost button from almendra components
<div id="app">
It is a ghost button test
<pv-button
text="Add filter"
image="https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg"
is-ghost
is-xs
></pv-button>
</div>
For more examples, view storybook folder
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago