- First install the library using
npm i @yupma/ui-kit
orng add @yupma/ui-kit
- Recommended is
ng add @yupma/ui-kit
: As it will prevent manual dependecies download and all. - Page module standalone is currently not supported. Feel free to create a fork of this repo.
- Recommended is
- Now you can have peerDependencies:
@angular/common
@angular/core
@yupma/ui-styles
- You can check out @yupma/ui-styles documentation of how to use it.
- For basics:
@import '@yupma/ui-styles/lib/scss/yupma_ui'
or@import '@yupma/ui-styles/lib/dist/index.css'
in your global stylesheet as we will be using its classes and styles. - Now in
app.module.ts
add to import statementsYupmaUiKitModule
- If you wanted to use services and wanted to use a singleton intance then add
ServicesModule
to import statement from@yupma/ui-kit
- Also add a
icon.svg
file in yourangular.json
assets like:node_modules/@yupma/ui-kit/src/assets/icon/icon.svg
, where you can place all the icons spirit inside the file- Or add
icon.svg
from lib to your project like:assets/icon/icon.svg
- Or add
- Add
ymResize [breakpoint]="breakpoints.MD" (isInsideBreakpoint)="updatedInsideBreakpoint($event)"
to the body or main tag spanning whole viewport width.updatedInsideBreakpoint(isInsideBreakpoint: boolean) {this.ymUIService.setSidebarCollapsedStat(isInsideBreakpoint)}
- To use toast: Add
<ym-toast></ym-toast>
to main component like app.component.html
This library was generated with Angular CLI version 15.2.0.
Run ng generate component component-name --project ui-kit
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ui-kit
.
Note: Don't forget to add
--project ui-kit
or else it will be added to the default project in yourangular.json
file.
Run ng build ui-kit
to build the project. The build artifacts will be stored in the dist/
directory.
After building your library with ng build ui-kit
, go to the dist folder cd dist/ui-kit
and run npm publish
.
Run ng test ui-kit
to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.