kit-collapse

README

Scope

  • Accordions
  • Collapsible menus

Usage

Import KitCollapseModule.

For example you have ui-menu, ui-section component and want to collapse some div inside section.

Provide KitCollapseHostService inside ui-menu and KitCollapseItemService inside ui-section.

<ui-menu>
  <ui-section>
    <div title>Section 1 title</div>
    <div>Section 1 body</div>
  </ui-section>
  <ui-section>
    <div title>Section 2 title</div>
    <div>Section 2 body</div>
  </ui-section>
</ui-menu>
ui-section.component.html
<div (click)="toggle()">
  <ng-content select="[title]"></ng-content>
</div>
<div *kitCollapse>
  <ng-content></ng-content>
</div>

Use KitCollapseItemService for set state of collapse.

ui-section.component.ts
providers: [KitCollapseItemService]
...
constructor(private itemService: KitCollapseItemService) {
}
...
toggle() {
  this.itemService.toggle();
}

Example

API

[class] KitCollapseHostService

@Injectable

Controls set of collapsible items.

Should be provided on component or directive.

Members

SignatureDescription
multiple = false
get activeChanges(): Observable<Set<KitCollapseId>>

Get Observable with activated items.

get active(): Set<KitCollapseId>

Get Set with activated items.

activate(id: KitCollapseId)

Activate item with id.

activateFirst()

Activate first registered item.

addId(id: KitCollapseId)

Add item.

deactivate(id: KitCollapseId)

Deactivate item.

deleteId(id: KitCollapseId)

Delete item.

isActive(id: KitCollapseId): boolean

Is item activated.

toggle(id: KitCollapseId)

Change item activation state.

[class] KitCollapseItemService

@Injectable

Controls state of a collapsible item.

Should be provided on component or directive.

Members

SignatureDescription
get active(): boolean

Is item activated.

set active(active: boolean)

Set activation state.

get id(): KitCollapseId

Get item id.

set id(id: KitCollapseId)

Set item id.

toggle()

Toggle activation state.

[class] KitCollapseModule

@NgModule

Exports:[ KitCollapseDirective, ]

[class] KitCollapseDirective

@Directive

Selector:'[kitCollapse]'

Structure directive that collapsing.

State based on KitCollapseItemService provided on a parent.