README
SDS Library
@funnelback/ng-sds
is Bootstrap 4 based library that aims to implement the Squiz Design System specification in Angular.
Demo
Demo and Documentation available at http://docs.sds-angular.funnelback.com
Usage
The SDS library is published via npm. Install it into your project using
npm install @funnelback/ng-sds --save
Dependencies
SDS library version | Angular version |
---|---|
1.4.x (latest) | 12.2.x |
1.3.x | 10.2.x |
1.2.x | 7.2.x |
Angular v12.2.x
Some of SDS components are driven by the third-party dependency ng-bootstrap. If you wish to use any of those components, ng-bootstrap
needs to be installed as a peer dependency:
npm install @ng-bootstrap/ng-bootstrap@^10.0.0 --save
The SDS Icons component depends on material-design-icons. If you wish to use the SDS Icons, these icons need to be installed as a peer dependency:
npm install material-design-icons --save
You will then need to follow the instructions to import the fonts into your project.
The SDS Stepper component builds upon the @angular/cdk. If you wish to use the SDS Stepper component, this will need to be installed as a peer dependency:
npm install @angular/cdk@^12.2.12 --save
Angular v10.2.x
npm install @ng-bootstrap/ng-bootstrap@^10.0.0 --save
npm install material-design-icons --save
npm install @angular/cdk@^10.2.7 --save
Angular v7.2.x
npm install @ng-bootstrap/ng-bootstrap@^4.0.0 --save
npm install material-design-icons --save
npm install @angular/cdk@^7.2.0 --save
Styling
Import the following stylesheet globally:
node_modules/@funnelback/ng-sds/funnelback-sds.scss
Components
In your typescript import main module with all SDS components:
import { SdsModule } from '@funnelback/ng-sds';
@NgModule({
imports: [SdsModule, ...],
})
export class AppModule(){}
Alternatively, import only the modules with SDS components that you need:
import { Sds<ComponentYouNeed>Module } from '@funnelback/ng-sds';
@NgModule({
imports: [Sds<ComponentYouNeed>Module, ...],
})
export class AppModule(){}