@syncfusion/ej2-navigations
Version:
A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another
337 lines (336 loc) • 10 kB
TypeScript
import { Component } from '@syncfusion/ej2-base';
import { EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { SidebarModel } from './sidebar-model';
/**
* Specifies the Sidebar types.
* ```props
* Slide :- Specifies the animation sliding while opening the sidebar.
* Over :- Specifies the sidebar appearing over the main content.
* Push :- Specifies the sidebar pushing the main content.
* Auto :- Specifies that the sidebar opens automatically.
* ```
*/
export declare type SidebarType = 'Slide' | 'Over' | 'Push' | 'Auto';
/**
* Specifies the Sidebar positions.
* ```props
* Left :- Sidebar positions to the Left in relation to the main content.
* Right :- Sidebar positions to the Right in relation to the main content.
* ```
*/
export declare type SidebarPosition = 'Left' | 'Right';
/**
* Sidebar is an expandable or collapsible
* component that typically act as a side container to place the primary or secondary content alongside of the main content.
* ```html
* <aside id="sidebar">
* </aside>
* ```
* ```typescript
* <script>
* let sidebarObject: Sidebar = new Sidebar();
* sidebarObject.appendTo("#sidebar");
* </script>
* ```
*/
export declare class Sidebar extends Component<HTMLElement> implements INotifyPropertyChanged {
private modal;
private mainContentEle;
private sidebarEle;
private sidebarEleCopy;
protected tabIndex: string;
private windowWidth;
private targetEle;
private firstRender;
private documentClickContext;
/**
* Specifies the size of the Sidebar in dock state.
* > For more details about dockSize refer to
* [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
*
* @default 'auto'
*/
dockSize: string | number;
/**
* Specifies the media query string for resolution, which when met opens the Sidebar.
* ```typescript
* let defaultSidebar: Sidebar = new Sidebar({
* mediaQuery:'(min-width: 600px)'
* });
* ```
* > For more details about mediaQuery refer to
* [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) documentation.
*
* @default null
* @aspType string
*/
mediaQuery: string | MediaQueryList;
/**
* Specifies the docking state of the component.
* > For more details about enableDock refer to
* [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
*
* @default false
*/
enableDock: boolean;
/**
* Enables the expand or collapse while swiping in touch devices.
* This is not a sidebar property.
*
* @default 'en-US'
* @private
*/
locale: string;
/**
* Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
* 1. Position
* 2. Type
*
* @default false
*/
enablePersistence: boolean;
/**
* Enables the expand or collapse while swiping in touch devices.
*
* @default true
*/
enableGestures: boolean;
/**
* Gets or sets the Sidebar component is open or close.
* > When the Sidebar type is set to `Auto`,
* the component will be expanded in the desktop and collapsed in the mobile mode regardless of the isOpen property.
*
* @default false
*/
isOpen: boolean;
/**
* Specifies the Sidebar in RTL mode that displays the content in the right-to-left direction.
*
* @default false
*/
enableRtl: boolean;
/**
* Enable or disable the animation transitions on expanding or collapsing the Sidebar.
*
* @default true
*/
animate: boolean;
/**
* Specifies the height of the Sidebar.
*
* @default 'auto'
* @private
*/
height: string | number;
/**
* Specifies whether the Sidebar need to be closed or not when document area is clicked.
*
* @default false
*/
closeOnDocumentClick: boolean;
/**
* Specifies the position of the Sidebar (Left/Right) corresponding to the main content.
* > For more details about SidebarPosition refer to
* [`position`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#position) documentation.
*
* @default 'Left'
*/
position: SidebarPosition;
/**
* Allows to place the sidebar inside the target element.
* > For more details about target refer to
* [`Custom Context`](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) documentation.
*
* @default null
*/
target: HTMLElement | string;
/**
* Specifies the whether to apply overlay options to main content when the Sidebar is in an open state.
* > For more details about showBackdrop refer to
* [`Backdrop`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#enable-backdrop) documentation.
*
* @default false
*/
showBackdrop: boolean;
/**
* Specifies the expanding types of the Sidebar.
* * `Over` - The sidebar floats over the main content area.
* * `Push` - The sidebar pushes the main content area to appear side-by-side, and shrinks the main content within the screen width.
* * `Slide` - The sidebar translates the x and y positions of main content area based on the sidebar width.
* The main content area will not be adjusted within the screen width.
* * `Auto` - Sidebar with `Over` type in mobile resolution and `Push` type in other higher resolutions.
* > For more details about SidebarType refer to
* [`SidebarType`](../../sidebar/variations/) documentation.
*
* @default 'Auto'
*/
type: SidebarType;
/**
* Specifies the width of the Sidebar. By default, the width of the Sidebar sets based on the size of its content.
* Width can also be set in pixel values.
*
* @default 'auto'
*/
width: string | number;
/**
* Specifies the z-index of the Sidebar. It is applicable only when sidebar act as overlay type.
*
* @default 1000
* @aspType double
*/
zIndex: string | number;
/**
* Triggers when component is created.
*
* @event created
*
*
*/
created: EmitType<Object>;
/**
* Triggers when component is closed.
*
* @event close
*/
close: EmitType<EventArgs>;
/**
* Triggers when component is opened.
*
* @event open
*/
open: EmitType<EventArgs>;
/**
* Triggers when the state(expand/collapse) of the component is changed.
*
* @event change
*/
change: EmitType<ChangeEventArgs>;
/**
* Triggers when component gets destroyed.
*
* @event destroyed
*/
destroyed: EmitType<Object>;
defaultBackdropDiv: HTMLElement;
constructor(options?: SidebarModel, element?: string | HTMLElement);
protected preRender(): void;
protected render(): void;
protected initialize(): void;
private setEnableRTL;
private setTarget;
private getTargetElement;
private setCloseOnDocumentClick;
private setWidth;
private setDimension;
private setZindex;
private addClass;
private checkType;
private transitionEnd;
private destroyBackDrop;
/**
* Hide the Sidebar component, if it is in an open state.
*
* @param {Event} e - The event triggering the hide action.
* @returns {void}
*
*/
hide(e?: Event): void;
private setTimeOut;
/**
* Shows the Sidebar component, if it is in closed state.
*
* @param {Event} e - The optional event triggering the show action.
* @returns {void}
*/
show(e?: Event): void;
private setAnimation;
private triggerChange;
private setDock;
private createBackDrop;
protected getPersistData(): string;
/**
* Returns the current module name.
*
* @returns {string} - returns module name.
* @private
*
*/
protected getModuleName(): string;
/**
* Shows or hides the Sidebar based on the current state.
*
* @returns {void}
*/
toggle(): void;
protected getState(): boolean;
private setMediaQuery;
private checkMediaQuery;
protected resize(): void;
private documentclickHandler;
private enableGestureHandler;
private setEnableGestures;
private wireEvents;
private unWireEvents;
/**
* Called internally if any of the property value changed.
*
* @param {SidebarModel} newProp - specifies newProp value.
* @param {SidebarModel} oldProp - specifies oldProp value.
* @returns {void}
* @private
*
*/
onPropertyChanged(newProp: SidebarModel, oldProp: SidebarModel): void;
protected setType(type?: string): void;
/**
* Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
*
* @returns {void}
*
*/
destroy(): void;
}
/**
*
* Defines the event arguments for the event.
*
* @returns void
*/
export interface ChangeEventArgs {
/**
* Returns event name
*/
name: string;
/**
* Defines the element.
*/
element: HTMLElement;
}
export interface TransitionEvent extends Event {
/**
* Returns event name
*/
propertyName: string;
}
export interface EventArgs {
/**
* Illustrates whether the current action needs to be prevented or not.
*/
cancel?: boolean;
/**
* Defines the Sidebar model.
*/
model?: SidebarModel;
/**
* Defines the element.
*/
element: HTMLElement;
/**
* Defines the boolean that returns true when the Sidebar is closed by user interaction, otherwise returns false.
*/
isInteracted?: boolean;
/**
* Defines the original event arguments.
*/
event?: MouseEvent | Event;
}