Fundamental NGX

Description

The fundamental-ngx library is a set of Angular components built using SAP Fundamental Styles.

The SAP Fundamental Styles library is a design system and HTML/CSS component library used to build modern product user experiences with the SAP look and feel.

API Reference

See Component Documentation for examples and API details.

Requirements

To download and use Fundamental NGX, you will first need to install the node package manager.

Fundamental NGX is intended for use with Angular 5 or newer.

Prior knowledge of Angular is recommended.

Getting Started

For an existing Angular application,

1. Install Fundamental-ngx and Fundamental Styles.

   npm install --save fundamental-styles fundamental-ngx
   

2. Include Fundamental Styles CSS in the styles array of the angular.json file.

   "node_modules/fundamental-styles/dist/fundamental-styles.min.css"
   

   Note the path may be different if your CLI configuration is not in the root of your project directory.

3. Configure your animations.

   Install angular animations by running the following.

   npm install @angular/animations
   

   Once the above package is installed, import BrowserAnimationsModule to enable the animations.

   import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   
   @NgModule({
     ...
     imports: [BrowserAnimationsModule],
     ...
   })
   export class DemoModule { }

   Alternatively, you can disable the animations by importing NoopAnimationsModule instead.

4. Import the modules you want to use.

   To add the entire library, add the following import to your main application module.

   import { FundamentalNgxModule } from 'fundamental-ngx';
   
   @NgModule({
       ...
       imports: [FundamentalNgxModule],
   })
   export class DemoModule { }

   To include an individual Angular Fundamental component in your application, you only need to import the relevant module.

   For example, to use Toggles, add the following import to your main application module.

   import { ToggleModule } from 'fundamental-ngx';
   
   @NgModule({
       ...
       imports: [ToggleModule],
   })
    export class DemoModule { }

5. Add the component to your HTML.

   <fd-toggle [size]="'l'" [(checked)]="checked">Large Toggle</fd-toggle>

Tests

Fundamental NGX makes use of Jasmine and Karma for its unit tests.

Run ng test fundamental-ngx. Append --code-coverage to generate code coverage documentation.

Versioning

The fundamental-ngx library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

Merges to the master branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

Known Issues

Please see Issues.

Support

If you encounter an issue, you can create a ticket.

Contributing

If you want to contribute, please check the CONTRIBUTING.md documentation for contribution guidelines. Please follow the Angular commit message 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.

License

Copyright (c) 2019 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.

Similar Projects

Fundamental-react - React implementation of SAP Fiori Fundamentals

Fundamental-vue - Vue implementation of SAP Fiori Fundamentals