Cause - Design Components Library

Be careful with the usage of this design component library. It is currently in development and has not a stable release yet. The apis might change during the further development.

For more information get in touch with [email protected].

Getting started with evalink cause

This Section explains how to setup the evalink cause design library with an angular project.

Install evalink cause

To install evalink cause, open your terminal and run the following command in your angular root folder:

npm install @evalink/cause

Add the required module

You need to add the cause component's module to the associated angular module class of the used component. For example as showed in the following use of the cause-header directive:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    // The cause-header directive belongs to the CauseLayoutModule
    CauseLayoutModule,
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Then you can use the module in the associated component template app.component.html.

<header cause-header></header>

Add the stylesheet imports

Design Modules

The evalink cause design components library is packed with the following useful modules. Each of them delivers components and directives to ensure a consistent experience through out the evalink ecosystem.

• Cause Module
• Layout Module
• Navigation Module

Cause Module

Pipes

Truncate Pipe

The truncate pipe helps you to shorten strings to a given length and append three dots(...). Use it in views where you need to make sure that the given content not exceed in length.

{{ exampleString | truncate }}
or
{{ exampleString | truncate:45 }}

Layout Module

The layout module helps you with structuring the general layout of an application. It provides components such as header, section and footer, to get a consistent look and feel through the all the public touchpoints.

Compontents

CauseHeader

Add a sticky header to the layout. It includes the evalink logo with a customisable link and a section to add own content, like a navigation menu or search functionality.

CauseSection

Create own meaning full sections with adjustable background color.

CauseFooter

Add a footer to the layout. It includes the Sitasys logo and a section to add own content, like a multi-row navigation menu.

Navigation Module

The navigation modules helps you with providing different kind of navigation menu and navigation elements. It handles also the responsive behaviour automatically.

Components

The navigation module exports the following components for creating navigation menus:

• CauseNavTitle Add a title to navigation menus or lists. For example to display a title in a multi row menu in a website footer.
• CauseDropdownMenu Create dropdown menus with a navigation list. use the CauseDropdownMenu in combination with the CauseNavList to display a proper styled dropdown menu out of the box. - CauseNavList Add a list with navigation items to a CauseDropdownMenu. This component serves as a container for multiple navigation list items.
• CauseNavListItem A single item to add to a CauseNavList.

For more information get in touch with [email protected].