VerticalComponents

This is the library of the vertical team's UI components.

Installation

npm install @verticalgmbh/components

Getting started

1. Install component library

Install the vertical component library by running the following command:

npm install @verticalgmbh/components

Make sure that you have @angular/cdk, and @angular/material in your dependencies as well because we list these as peer dependencies:

npm install @angular/cdk @angular/material

2. Import theme

Import the theme file by including the followng line in your styles.scss:

@import '@verticalgmbh/components/prebuilt-themes/vertical-light-theme.css';

If you want to use a custom theme, please follow the theming guide.

Make sure that you have installed material icons and the roboto font.

3. Import modules

Import the modules you want to use by adding the following lines to your app.module.ts file:

import { VerticalButtonModule } from '@verticalgmbh/components';
…
@NgModule ({....
  imports: [...,
  VerticalButtonModule,
…]
})

4. Display a component

Add vertical attributes to a html tag in your app.component.html:

<button vertical-contained-button>Button</button>

Demo

You can find a demo of all components here.

Features

| Feature | Documentation | |------------|-----------------| | button | Docs | | checkbox | Docs | | form-field | Docs | | header | Docs | | input | Docs | | tabs | Docs | | --------- | --------------- | | theming | Guide |