@tp-ui/tp-window NPM

ThingsPro Window

Features

Usages

1. Create a tp-window state config or write a config in template directly.

Example: create a config

const tpStateConfig: TpWindowStateConfig = new TpWindowStateConfig('stateId', 'stateName', 'STATE', 'settings');

Example: write config in template files.

<tp-window-state stateId="demoState" name="{{Demo State}}" type="CONTENT" icon="settings">  
</tp-window-state>

2. Setup tp-window

Notice: tp-window id and tp-window-state config is required.

<tp-window [name]="name" maxStateNumber="3" id="tpDemoId" [optionPortal]="portal" (stateChange)="onStateChange($event)">
  <tp-window-state [config]="tpStateConfig">
    <!-- Your DOM template -->
  <tp-window-state>
</tp-window>

3. Inject `TpWindowService` to manipulate your states.

constructor(public tpWindow: TpWindowService) {}
// Navigate a window to a state
this.tpWindow.navigateTo('windowId.stateId'); // windowId + '.' + stateId

// Show or hide progress bar
this.tpWindow.progressStart('tpDemoId');
this.tpWindow.progressComplete('tpDemoId');

// Show or hide state icon
this.tpWindow.setIcons([{stateUrl: 'tpDemoId.stateId',isShow: false}, {stateUrl: 'tpDemoId.stateId',isShow: false}]);

API Document

tp-window (TpWindowComponent)

Property	Type	Description
*windowId	@Input `string`	The identification for window
name	@Input `string`	The name will be showed on the title of component.
maxStateNumber	@Input `number`	Limit the total number of icons on the tool bar. The rest of icons will be sorted to menu list as the number of icons exceeds it. This setting could be used to RWD.
loading	@Input `Observable<any>`	It Will show a loading bar before observable completed.
optionPortal	@Input `Portal<any>`	Add customized actions or information by using `CdkPortal`
stateChange	@Output `EventEmitter<WindowStateComponent>`	emit clicked state component.

tp-window-state (TpWindowStateComponent)

Property	Type	Description
*config	@input `TpWindowStateConfig`	State config.

TpWindowStateConfig

Property	Type	Description
stateId	`string`	The identification for state.
name	`string`	The name will be showed on the menu item or tooltip.
type	`TpWindowStateType`	`'ACTION'` `'STATE'` `'CONTENT'`
icon	`string`	The name of Angular Material Icon ，please see Icons

TpWindowService

Methods	Description
navigateTo(stateUrl: `string`)	Navigate a state of a window
progress(windowId: `string`, progress: `Observable<any>`)	Show progress bar
progressStart(windowId: `string`)	Show progress bar
progressComplete(windowId: `string`)	Hide progress bar
setIcons(options: `Array<{stateUrl: string, isShow: boolean}>`)	Hide a icon of a state