Smart Toolbar
References
These packages must be updated in case of a new version:
How to use
Installation
Go to your project, open the terminal and use the following command:
npm i @smartbit4all/toolbar
Then import it in the AppModule:
app.module.ts:
import { SmartToolbarModule } from '@smartbit4all/smart-toolbar';
...
@NgModule({
declarations: [...]
imports: [
...
SmartToolbarModule,
],
...
})
Usage
example.component.html:
<smart-toolbar [toolbar]="toolbar"></smart-toolbar>
example.component.ts:
export class ExampleComponent {
toolbar!: SmartToolbar;
constructor() {
this.toolbar = {
direction: ToolbarDirection.ROW,
buttons: [
{
btnAction: {
execute: this.buttonOneClicked.bind(this),
...
},
label: 'Button 1',
icon: 'add',
style: ToolbarButtonStyle.MAT_RAISED_BUTTON,
color: ToolbarButtonColor.PRIMARY,
disabled: false
},
...
]
};
}
}
Version logs
@smartbit4all/form v1.0.0
Type: Update
The package has been published.
@smartbit4all/smart-toolbar v0.1.4
Type: Feature
In this version the operation of the toolbar has been changed.
Mayor changes:
-
Command inteface modification:
export interface CommandParameter { objectUri?: string; url: string; } export interface Command { parameter?: CommandParameter; execute: (args?: any[]) => void; }
From this version executable calls have to be placed in the execute property. Paramteres for api calls is placed inside the CommandParamter.
-
SmartToolbarService has been removed, because it lost its functionality.
@smartbit4all/smart-toolbar v0.1.3
Type: Feature
This version contain one styling update: Material buttons border setting.
Rounded property set the Material buttons border-radious to 25px.
export interface SmartToolbarButton {
label: string;
icon?: string;
btnAction: Command;
style: ToolbarButtonStyle;
color?: ToolbarButtonColor;
disabled: boolean;
rounded?: boolean;
}
@smartbit4all/smart-toolbar v0.1.1
Type: Feature
Add new feature:
-
Material Color Theme customizable in SmartToolbarButton color property: primary, warn accent
export enum ToolbarButtonColor { PRIMARY = "primary", ACCENT = "accent", WARN = "warn", }
-
Material Button variants customizable in style property:
export enum ToolbarButtonStyle { MAT_RAISED_BUTTON = "MAT_RAISED_BUTTON", MAT_BUTTON = "MAT_BUTTON", MAT_STROKED_BUTTON = "MAT_STROKED_BUTTON", MAT_FLAT_BUTTON = "MAT_FLAT_BUTTON", MAT_ICON_BUTTON = "MAT_ICON_BUTTON", MAT_FAB = "MAT_FAB", MAT_MINI_FAB = "MAT_MINI_FAB" }
-
Add disabled property to SmartToolbarButton.
New SmartToolbarButton interface:
export interface SmartToolbarButton {
label: string;
icon?: string;
btnAction: Command;
style: ToolbarButtonStyle;
color: ToolbarButtonColor;
disabled: boolean;
}
@smartbit4all/smart-toolbar v0.1.0
Type: Feature
Now SmartToolbar can handle navigtion and has default Material UI styling.
Modifications:
-
Add Command interface for the button click action.
export interface Command { objectUri?: string; url: string; commandType: CommandType } export enum CommandType { NAVIGATION = "NAVIGATION" } export enum ToolbarButtonStyle { MAT_RAISED_BUTTON = "MAT_RAISED_BUTTON", MAT_BUTTON = "MAT_BUTTON" }
-
Change SmartToolbarButton btnAction property type from Function to Command
-
Implement command execution in ToolbarService. Available commmand: Navigation
executeCommand(button: SmartToolbarButton) { if (button.btnAction.commandType === CommandType.NAVIGATION) { let params = button.btnAction!.objectUri ? { queryParams: { uri: button.btnAction.objectUri } } : {}; this.router.navigate([button.btnAction.url], params); } }
-
Remove button CSS classes from smart-toolbar.component.css file, add ToolbarButtonStyle
Usage example:
{
direction: ToolbarDirection.ROW,
buttons: [
{
label: 'Új dokumentum adatlap',
icon: 'add',
btnAction: {
url: 'create',
objectUri: 'asdf-232-sdfs34',
commandType: CommandType.NAVIGATION
},
btnStyle: ToolbarButtonStyle.MAT_RAISED_BUTTON
},
{
label: 'Importálás',
icon: 'import_export',
btnAction: {
url: 'fileUpload',
commandType: CommandType.NAVIGATION
},
btnStyle: ToolbarButtonStyle.MAT_RAISED_BUTTON
}
]
}
@smartbit4all/smart-toolbar v0.0.3
Type: Feature
The basic smart toolbar with its features.