浏览 134
分享
TerminalTerminal is a text based user interface. Enter "date" to display the current date.
Documentation
Import
import {TerminalModule} from 'primeng/terminal';
Getting Started
Commands are processed using observables via the TerminalService. Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function.
import {Component} from '@angular/core';
import {TerminalService} from 'primeng/components/terminal/terminalservice';
@Component({
template: '<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>',
providers: [TerminalService]
})
export class TerminalDemo {
constructor(private terminalService: TerminalService) {
this.terminalService.commandHandler.subscribe(command => {
let response = (command === 'date') ? new Date().toDateString() : 'Unknown command: ' + command;
this.terminalService.sendResponse(response);
});
}
}
Properties
Name | Type | Default | Description |
---|---|---|---|
welcomeMessage | string | null | Initial text to display on terminal. |
prompt | string | null | Prompt text for each command. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-terminal | Container element. |
ui-terminal-content | Content of terminal. |
ui-terminal-content-prompt | Prompt text. |
ui-terminal-input | Input element to enter commands. |
Dependencies
None.
Source
<p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $"></p-terminal>
import {Component} from '@angular/core';
import {TerminalService} from 'primeng/components/terminal/terminalservice';
import {Subscription} from 'rxjs/Subscription';
@Component({
templateUrl: './terminaldemo.html',
providers: [TerminalService]
})
export class TerminalDemo {
subscription: Subscription;
constructor(private terminalService: TerminalService) {
this.terminalService.commandHandler.subscribe(command => {
let response = (command === 'date') ? new Date().toDateString() : 'Unknown command: ' + command;
this.terminalService.sendResponse(response);
});
}
ngOnDestroy() {
if(this.subscription) {
this.subscription.unsubscribe();
}
}
}
评论列表