0.5.3 • Published 4 years ago
fundconnect-ui v0.5.3
FundConnect UI Library
Installation
1) Use the package manager npm to install foobar.
npm i fundconnect-ui
2) Usage
ES6
package.json
{
"name": "Your project",
"scripts": {
...
"serve": "npm explore fundconnect-ui -- npm run postcss && vue-cli-service serve",
...
},
}
main.js
import fc from '@fundconnect/fundconnect-ui';
...
fc.install(Vue);
router/index.js \ the package has basic paths prepared
import fc from '@fundconnect/fundconnect-ui';
...
const routes = [
// Your routes
...fc.defaultsRoutes,
];
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import fc from 'fundconnect-ui';
Vue.use(Vuex);
export default function makeStore(initialConfig = {}) {
return new Vuex.Store({
...
modules: {
// Your vuex modules
utilities: fc.utilities(initialConfig),
},
});
}
When You want use prepared FcPage
SampleVueComponent.vue \ FcPage is a component made up of smaller elements. \ FcPage have prepared two slot: \ slot="left-side": place for component installed in left side list under logo slot="main-content"
<template>
<div id="app">
<fc-page
:logo="logo"
:routes="routes"
:loader="false"
:modal="modal"
@closeModal="methodExecuteAfterClosingModal"
>
<universes-tree slot="left-side" />
<router-view slot="main-content" />
</fc-page>
</div>
</template>
<script>
const modals = [
// Modal templates list,
];
export default {
methods: {
methodExecuteAfterClosingModal() {
console.log('exit');
}
},
data() {
return {
modal: { // sample modal props
modals,
modalVisibility: false,
modalProperties: {
type: 'ModalTypeName',
title: 'Title 1',
},
},
logo: {
src: '*path to image*',
header: 'text 1',
subheader: 'text 2',
},
routes: [ // routes to show in left sidebar
{
name: 'Home',
icon: 'chart-line',
text: 'Home - page',
condition: true,
},
]
};
},
};
</script>
0.5.3
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.0.5
4 years ago
0.0.37
4 years ago
0.0.30
4 years ago
0.0.31
4 years ago
0.0.32
4 years ago
0.0.33
4 years ago
0.0.22
4 years ago
0.0.34
4 years ago
0.0.23
4 years ago
0.0.35
4 years ago
0.0.24
4 years ago
0.0.36
4 years ago
0.0.25
4 years ago
0.0.26
4 years ago
0.0.27
4 years ago
0.0.28
4 years ago
0.0.29
4 years ago
0.0.21
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago