Fundamental Vue is a light-weight Vue.js component library for SAP Fiori Fundamentals.
0.0.9-beta
Fundamental Vue is a light-weight set of Vue.js components implementation of SAP Fiori Fundamentals library. SAP Fiori Fundamentals library is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with the SAP look and feel. This will allow you to stay/use Vue.js for your application and get SAP look and feel. Fundamental Vue is open for contribution as long as you follow certain rules/guidelines.
The library is currently in a Beta version and it is under development. The progress can be seen here
To download and use Fundamental Vue library, you first need to install the node package manager. https://www.npmjs.com/get-npm
Some prior knowledge of Vue is required for using this library.
Paste the following snippet in your <head>-tag:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/fiori-fundamentals.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/FundamentalVue.umd.js"></script>Then you can use Fundamental Vue like this:
<body>
<div id="app" />
<script>
Vue.use(FundamentalVue);
new Vue({
name: 'App',
el: '#app',
data: { message: 'Hello Fundamental Vue!' },
template: `
<FdPopover v-margin:large>
<h1 style="margin: 50px;" slot="body">{{ message }}</h1>
</FdPopover>`,
});
</script>
</body>How to install Fundamental Vue via NPM is described below.
To download and use this library, you first need to install the node package manager - npm.
-
Install Fundamental Vue
NPM
$ npm install --save fundamental-vueAfter installing, you will need to import
fundamental-vueand make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project.In your project's
main.js:// ... import FundamentalVue from 'fundamental-vue'; Vue.use(FundamentalVue); // ...Fundamental Vue does not include the 'Fiori Fundamentals' library which is required for styling.
-
Install Fiori Fundamentals
The quickest way to get Fiori Fundamentals styling for your components is to include the compiled and minified Fiori Fundamentals CSS library with the following CDN link in your public
index.htmlfile:<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/fiori-fundamentals.min.css">However, installing the Fiori Fundamentals library with npm (recommended) will give you the flexibility to use individual components and enable advanced customisation options. In this case, you do not need the CDN link as this method uses the SASS/SCSS source.
To install the Fiori Fundamentals SASS/SCSS source:
$ npm install --save fiori-fundamentalsThe following assumes the usage of a module bundler such as webpack. To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - sass-loader and node-sass. To install these packages as development dependencies:
$ npm install sass-loader node-sass --save-devLoading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a known issue.
To rectify this, start by creating a new directory ('scss') in your project's
src. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations.Add the following to the main SCSS file:
$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import $fd-scss-font-path : "../node_modules/fiori-fundamentals/scss/fonts/"; @import "../node_modules/fiori-fundamentals/scss/all.scss";Import the main SCSS file in your
App.jsstyle block to add Fiori Fundamentals styles to your project.<style lang='scss'> ... @import "./scss/main.scss"; ... </style>You can now use the Documentation to browse the components currently available with Fundamental Vue.
To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessarry:
... <FdAlert dismissible> Happy building! 🚀 </FdAlert> ...
There are no known major issues.
If you encounter an issue, you can create a ticket
If you want to contribute, please check the CONTRIBUTING.md documentation for contribution guidelines.
Check out the NEW_COMPONENT.md guide on building a new component for the library and creating the necessary documentation for your new component.
Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent