core-ui 12.0.1-next.4
Install from the command line:
Learn more about npm packages
$ npm install @dlr-eoc/core-ui@12.0.1-next.4
Install via package.json:
"@dlr-eoc/core-ui": "12.0.1-next.4"
About this version
This project includes some schematics to add the base UKIS-Layout to an angular application. The Layout is based on Clarity so add this first!
ng add @dlr-eoc/core-ui
options:
--project=string // the project in the angular workspace (default 'defaultProject')
--routing=boolean // sets up angular routing (default false)
--addClr=boolean // run's @clr/angular:ng-add (default false)
The following are not implemented right now!
--addMap=boolean // adds a map component (default false)
--auth=boolean // default false, adjusts the app for authentication and user login
The UKIS core-ui (created by the the schematics) is based on the Clarity Application Layout.
It uses the angular components from Clarity to get a responsive navigation.
Use a basic layout like the following, containing the router-outlet which then shows route components as the Clarity content-container
.
<clr-main-container>
<ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
<ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
<ukis-header [ukis-title]="title">
...
</ukis-header>
<router-outlet></router-outlet>
</clr-main-container>
Replace the router-outlet with a view component which also adds the Clarity content-container
class as HostBinding.
<clr-main-container>
<ukis-global-alert *ngIf="ui.alert" [(alert)]="ui.alert"></ukis-global-alert>
<ukis-global-progress *ngIf="ui.progress" [(progress)]="ui.progress"></ukis-global-progress>
<ukis-header [ukis-title]="title">
...
</ukis-header>
<app-example-view></app-example-view>
</clr-main-container>
- A css class
floating
on thecontent-container
(which is mostly placed in your route components) makes the Clarity Vertical Nav floating above thecontent-container
so it takes less space. For this, however, you have to worry about the placement of the elements in thecontent-container
if thevertical-nav
is expanded. - The
global-alert
andglobal-progress
can be activated with their responsible services which you can inject in your components. - For more doku about the
ukis-header
see the header README
Always check that yout layout structure is like following (with direct childs):
main-container
content-container
content-area
and keep in mind that the router is placing the routes outside of the router-outlet (so they are not children)
main-container
router-outlet
route-component
...
due to this you must add the class content-container
as HostBinding to each 'route-component'.
The basic layout of a route or view component (see below) is the same so you can easily change it if you decide later to switch between routing or not.
<main class="content-area">
<p>This is the content-area</p>
</main>
<clr-vertical-nav class="right">
</clr-vertical-nav>
<nav class="sidenav">
<a href="">Test link</a>
</nav>
<section class="footer ukis-footer">
</section>
-
The route or view component uses the
content-container
class like described before, so you should normally be able to put everything in there which is shown in the documentation of Clarity Application Layout. -
The
content-area
is the place where we put the map normally. If you like to do this ad the classmap-view
(content-area map-view
) to remove the padding from thecontent-area
. -
As Aside we mostly use the
vertical-nav
. The default placement is on the left side like in the Clarity Layout, but with the classright
the navigation will stick to the right side. There are also some styles for thelayer-control
inside avertical-nav
, so this is the place where we put thelayer-control
. -
A section with the class
footer
will get you a footer element independent for each route. If it should be the same for all routes, you can add it in themain-container
. For an example with the footer see thedemo-maps
route 'route-example-layout'. -
Use the
sidenav
if you don't want the navigation collapsible, but we have no style for alayer-control
inside it. -
All our styles (ukis-theme) are in the styles folder and get imported in the main styles.scss. For app over all styles you can use the styles.scss, otherwise use the style files of your components to write custom styles.
Assets
- core-ui-12.0.1-next.4.tgz
Download activity
- Total downloads 0
- Last 30 days 0
- Last week 0
- Today 0