A collection of reusable components designed for use in Frank!Framework projects, based on new proposed FF!Doc designs.
| Component | Selector | Description |
|---|---|---|
| Alert | <ff-alert> | Alert the user, useful for forms, documentation or to give a warning for anything. |
| Button | <ff-button> | Buttons that fit the FF style & can have a toggleable active state |
| Chip | <ff-chip> | A stylized border around a word or short text, most likely used for labeling |
| Search | <ff-search> | A search field that works like any other form input but doesn't need to be in a form |
Install the package from NPM (coming soon)
npm install @frankframework/angular-componentsThen import one of the components that you'd like to use or import the LibraryModule into the component(s) that needs to use it.
Import the stylesheet into styles.scss using:
@use '~@frankframework/angular-components';The dark theme is set up to work whenever <body class="ff-dark-theme"> is present on the HTML document.
But if you'd like to have it work under a custom classname then you should add this to your styles.scss:
body.custom-name {
@import '~@frankframework/angular-components/styles/dark_theme';
}See the template description and the Angular CLI documentation for more information.
Run npm run build to build the library project using ng-packagr. The build artifacts will be stored in the dist/angular-components/ directory.
Run npm run watch to automatically build the components and watch for changes, useful when using ng serve or npm start to run the playground application.
Run npm start or ng serve to serve the playground application in which you can test the components artifacts, it's recommended to also use npm run watch as to build any new changes made to the components themselves.
Run npm publish in the dist/angular-components/ directory in order to publish the library to a package registry.