base-ui-components
base Angewandte Component Library
This is a component library developed by and used for projects of the base Angewandte, a collection of applications for the staff and students at the University of Applied Arts Vienna.
Installation and Usage
Install via:
npm i base-ui-components
You can either import each component individually:
main.js
import Vue from 'vue';
// import the components you would like
import { BaseAutcompleteInput, BaseCarousel } from 'base-ui-components';
// import the component css
import 'base-ui-components/dist/base-ui-components.css';
import App from './App';
const components = {
BaseAutcompleteInput,
BaseCarousel,
};
Object.entries(components)
.forEach(([name, component]) => {
Vue.component(name, component);
});
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});or as complete package:
main.js
import Vue from 'vue';
// import the complete components bundle
import * as BaseUiComponents from 'base-ui-components';
// and the css
import 'base-ui-components/dist/base-ui-components.css';
import App from './App';
Object.entries(BaseUiComponents)
.forEach(([name, component]) => {
Vue.component(name, component);
});
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});After adding the components, they can be used in your app globally, like so:
Component.vue
<template>
<BaseAutocompleteInput
label="test"
...
/>
<BaseCarousel
...
/>
</template>
<script>
export default {};
</script>All available components, their usage and demos can be found in our styleguide.
The code base is available at GitHub.
Customization
App color and certain other styles can be customized via css variables. In order to do so you can add the following variables to your main css/scss file:
:root {
--app-color: #FF9800;
--font-color: rgb(0, 0, 0);
--font-color-second: rgb(107, 107, 107);
--button-header-color: rgb(240, 240, 240);
--input-field-color: rgb(200, 200, 200);
--background-color: #f0f0f0;
--box-color: #ffffff;
--uploadbar-color: #999999;
--switch-checked-color: #4d4d4d;
--switch-svg-checked-color: #ffffff;
--graytext-color: rgba(16, 16, 16, 0.3);
}Then in your main.js file import your styles before the base-ui-components file. E.g.:
import './styles/app.scss';
import 'base-ui-components/dist/lib/base-ui-components.css';License
See LICENSE
Support
This open-source project was developed (and more specifically - cross-browser tested) with the support of:
