@smartbit4all/expandable-section
v1.1.18
Published
These packages must be updated in case of a new version:
Downloads
18
Keywords
Readme
Smart Expandable Section
References
These packages must be updated in case of a new version:
- There are no references yet
How to use
Installation
Go to your project, open the terminal and use the following command:
npm i @smartbit4all/expandable-section
Then import it in the AppModule:
app.module.ts:
import { SmartExpandableSectionModule } from '@smartbit4all/expandable-section';
...
@NgModule({
declarations: [...]
imports: [
...
SmartExpandableSectionModule
],
...
})
Usage
example-container.component.html:
<smart-expandable-section
#myExpandableSection
[data]="exampleData"
></smart-expandable-section>
example-container.component.ts:
export class ExampleContainerComponent {
@ViewChild("myExpandableSection")
expandableSection: ExpandableSectionComponent;
exampleData: ExpandableSection<any>;
constructor() {
this.expandableSection.stateChange.subscribe(
(sectionData: ExpandableSection<any>) => {
// handle state change
});
}
setExpandableSection(): void {
this.exampleData = {
title: 'Title',
customComponent: ExampleComponent,
data: { ... },
inputName: 'inputName',
// Menu button
button: {
label: '',
icon: 'more_vert',
color: 'primary',
type: ExpandableSectionButtonType.MENU,
menuItemButtons: [
{
label: 'Add',
icon: 'add'
iconPosition: ExpandableSectionButtonIconPosition.POST,
color: 'primary',
type: ExpandableSectionButtonType.MENU_ITEM,
onClick: this.doSomething.bind(this),
args: ['arg', 'data', 123]
}
]
}
// Simple button
button: {
label: 'Example add button',
icon: 'add',
iconPosition: ExpandableSectionButtonIconPosition.POST,
color: 'primary',
type: ExpandableSectionButtonType.BUTTON,
onClick: this.doSomething.bind(this),
args: ['arg', 'data', 123]
}
};
}
doSomething(args: any[]): void { ... }
}
example.component.ts:
export class CreateDocumentFormComponent {
@Input() inputName: T;
}
Version logs
@smartbit4all/expandable-section v1.1.5
Type: Update
The ExpandableSection
got a new stateChanged
property which helps to subscribe to state changes (opened/closed).
export interface ExpandableSection<T> {
...
stateChanged: Subject<ExpandableSectionStateChange<T>>;
}
export interface ExpandableSectionStateChange<T> {
data: T;
isExpanded: boolean;
}
@smartbit4all/expandable-section v1.1.4
Type: Update
@smartbit4all/icon
support.
@smartbit4all/expandable-section v1.1.3
Type: Bugfix
Menu button bugfixes.
@smartbit4all/expandable-section v1.1.1
Type: Update
The ExpandableSectionButton got an update which helps to create a button menu.
export enum ExpandableSectionButtonType {
BUTTON,
MENU,
MENU_ITEM
}
export enum ExpandableSectionButtonIconPosition {
PRE = "Pre",
POST = "Post",
}
export interface ExpandableSectionButton {
label: string;
icon?: string;
iconPosition?: ExpandableSectionButtonIconPosition;
onClick: (args?: any[]) => void;
type: ExpandableSectionButtonType;
color: ThemePalette;
callback?: (...args: any[]) => any;
args?: any[];
menuItemButtons?: ExpandableSectionButton[];
}
@smartbit4all/expandable-section v1.0.7
Type: Update
The SmartExpandableSection got a new property which emits an event on state changes.
@smartbit4all/expandable-section v1.0.6
Type: Update From now expandable can be opened or closed by isExpanded property in the model.
Changes:
export interface ExpandableSection<T> {
title: string;
headerComponent?: any;
customComponent?: any;
button?: ExpandableSectionButton;
data?: T;
headerData?: any;
headerInputName?: string;
inputName?: string;
isExpanded?: boolean; <<=====
}
@smartbit4all/expandable-section v1.0.5
Type: Update
From now expandable-section header can be parameterized by headerComponent property.
How to use:
Add headerComponent, headerData and headerInputName to the model:
export interface ExpandableSection<T> {
title: string;
headerComponent?: any; <-----
customComponent?: any;
button?: ExpandableSectionButton;
data?: T;
headerData?: any; <-----
headerInputName?: string; <-----
inputName?: string;
}
@smartbit4all/expandable-section v1.0.1
Type: Update
The package has been published.
@smartbit4all/expandable-section v0.1.2
Type: Feature
In this version the exapandable-section has been extended with an optional button feature.
Modifications:
ExpandableSection got a new ExpandableSectionButton property:
export interface ExpandableSection {
title: string;
customComponent?: any;
button?: ExpandableSectionButton;
data?: T;
inputName?: string;
}
export interface ExpandableSectionButton {
label: string;
icon?: string;
onClick: (args?: any[]) => void;
}
Html has been modified in order to render the button element by the given ExpandableSectionButton.
If the ExpandableSectionButton is not provided no button appears on the view. NO modification need in applications has the previous version of ExpendableSection.
@smartbit4all/expandable-section v0.0.4
Type: Feature
The basic smart expandable section with its features.