API | Clarity Design System

Angular Components

ClrSignpost

A lightweight convenient way to show contextual help without taking the user out of the current context.

Selector & Basic Usage

<clr-signpost>
  <clr-signpost-content>
    <h3>Contextual Information</h3>
    <p>Position: right-middle</p>
    <p>Right-middle opens on the right side of the trigger and centered vertically on the trigger.</p>
  </clr-signpost-content>
</clr-signpost>

ClrSignpostContent

When using ClrSignpost it can be optimized with the CLrIfOpen structural directive. When ClrIfOpen is used the ClrSignpostCOntent elements are only created when a user opens the content and they are destroyed when the user closes the sign post content.

Selector & Basic Usage

<clr-signpost>
  <clr-signpost-content *clrIfOpen>
    <h3>Contextual Information</h3>
    <p>Position: left-middle</p>
    <p>Right-middle opens on the left side of the trigger and centered vertically on the trigger.</p>
  </clr-signpost-content>
</clr-signpost>

Bindings

Binding	Type	Options	Default	Description
[clrPosition]	input		right-middle	top-left, top-middle, top-right, right-top, right-middle, right-bottom, bottom-right, bottom-middle, bottom-left, left-bottom, left-middle, left-top

Methods

close():void

A method call that will close the popover content.

Returns void

Angular Directives

ClrSignpostTrigger

There is a default trigger that is used if the application does not supply one. Sometimes applications need to use a specific element for the trigger. This directive will mark that element as the signpost trigger.

Selector & Basic Usage

ClrIfOpen

Selector & Basic Usage

Bindings

Binding	Type	Options	Default	Description
[(clrIfOpen)]	two-way	true, false	false	Set the open / close state of element it is applied to.