@syncfusion/ej2-react-layouts
Version:
A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for React
307 lines • 14 kB
JSON
{
"name": "Layouts",
"description": "Layout Components",
"keywords": {
"common": ["splitter", "split-panes", "split-layout", "split-view", "split-area", "resizable-splitter", "split-container","dashboardlayout","panels", "timeline", "ej2-timeline"],
"angular": ["angular-splitter", "ng-splitter", "angular-split-panes", "ng-split-panes", "angular-split-area", "angular-split-layout", "angular-split-view","angular-dashboardlayout", "angular timeline", "ng-timeline"],
"react": ["react-splitter", "react-split-panes", "react-split-area", "react-split-view", "react-split-layout","react-dashboardlayout", "react-timeline"],
"vue": ["vue-splitter", "vue-split-panes", "vue-split-area", "vue-split-view", "vue-split-layout", "vue-dashboardlayout", "vue-timeline"]
},
"repository": {
"type": "git",
"url": "https://github.com/syncfusion/ej2-angular-layouts"
},
"eventInterfaces": ["CreatedEventArgs", "ResizeEventArgs", "ResizingEventArgs", "BeforeExpandEventArgs", "ExpandedEventArgs", "ChangeEventArgs", "DragStartArgs", "DraggedEventArgs", "DragStopArgs", "ResizeArgs", "TimelineRenderingEventArgs"],
"components": [ {
"baseClass": "Splitter",
"directoryName": "splitter",
"type": "container",
"contentSelect": "div",
"preferredTag":"div",
"defaultTag": "<div id='ej2Splitter'></div>",
"twoWays": [],
"blazorPlaceholder": "splitter",
"comment": [
"/**",
" * Represents the Angular Splitter Component",
" * ```html",
" * <ejs-splitter></ejs-splitter>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * Represents the React Splitter Component",
" * ```html",
" * <Splitter></Splitter>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * Represents the VueJS Splitter component",
" * ```html",
" * <ejs-splitter></ejs-splitter>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "panes",
"directiveClassName": "pane",
"propertyName": "paneSettings",
"parentName": "paneSettings",
"directoryName": "splitter",
"baseClass": "PaneProperties",
"twoWays": ["collapsed"],
"isDeprecated": true,
"comment": [
"/**",
" * 'e-panesettings' directive represent a panes of angular splitter ",
" * It must be contained in a Splitter component(`ejs-splitter`). ",
" * ```html",
" * <ejs-splitter id='splitter' > ",
" * <e-panes>",
" * <e-pane size ='150px'></e-pane>",
" * <e-pane size = '20%'></e-pane>",
" * </e-panes>",
" * </ejs-splitter>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * PanesDirective` represent a panes of the react splitter. ",
" * It must be contained in a Splitter component(`SplitterComponent`). ",
" * ```tsx",
" * <SplitterComponent> ",
" * <PaneSettingsDirective>",
" * <PaneDirective size={this.Pane1Size}></PaneDirective>",
" * <PaneDirective size={this.Pane2Size}></PaneDirective>",
" * <PaneSettingsDirective>",
" * </SplitterComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * 'e-pane' directive represent a pane of Vue Splitter ",
" * It must be contained in a Splitter component(`ejs-splitter`). ",
" * ```html",
" * <ejs-splitter id='splitter'> ",
" * <e-panes>",
" * <e-pane size='150px'></e-pane>",
" * <e-pane size='150px'></e-pane>",
" * </e-panes>",
" * </ejs-splitter>",
" * ```",
" */"
],
"templateProperties": [
"content"
],
"blazorContainerTemplates": [ "content:contentTemplate" ]
}
],
"blazorType": "native",
"blazorDependency": [
"ej2-base"
]
},
{
"baseClass": "DashboardLayout",
"directoryName": "dashboard-layout",
"type": "container",
"contentSelect": "div",
"defaultTag": "<div id='layout'></div>",
"preferredTag": "div",
"skipEventPropagation": true,
"twoWays": [],
"blazorPlaceholder": "dashboardlayout",
"comment": [
"/**",
" * Represents the Essential JS 2 Angular DashboardLayout Component.",
" * ```html",
" * <ejs-dashboardlayout></ejs-dashboardlayout>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * Represents the Essential JS 2 React DashboardLayout Component.",
" * ```ts",
" * <DashBoardLayoutComponent></DashBoardLayoutComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * Represents the Essential JS 2 VueJS DashboardLayout Component.",
" * ```html",
" * <ejs-dashboardlayout></ejs-dashboardlayout>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "panels",
"directiveClassName": "panel",
"arrayDirectiveSelector": "ejs-dashboardlayout>e-panels",
"directiveSelector": "e-panels>e-panel",
"propertyName": "panels",
"directoryName": "dashboard-layout",
"baseClass": "Panel",
"comment": [
"/**",
" * 'e-panels' directive represent a panels of angular dashboardlayout ",
" * It must be contained in a dashboardlayout component(`ej-dashboardlayout`). ",
" * ```html",
" * <ejs-dashboardlayout> ",
" * <e-panels>",
" * <e-panel></e-panel>",
" * <e-panel></e-panel>",
" * </e-panels>",
" * </ejs-dashboardlayout>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `PanelsDirective` represent a presets of the react dashboardlayout. ",
" * It must be contained in a dashboardlayout component(`DashBoardLayoutComponent`). ",
" * ```tsx",
" * <DashBoardLayoutComponent> ",
" * <PanelsDirective>",
" * <PanelDirective></PanelDirective>",
" * <PanelDirective></PanelDirective>",
" * </PanelsDirective>",
" * </DashBoardLayoutComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * 'e-panels' directive represent a presets of VueJS dashboardlayout component ",
" * It must be contained in a dashboardlayout component(`ejs-dashboardlayout`). ",
" * ```html",
" * <ejs-dashboardlayout>",
" * <e-panels>",
" * <e-panel></e-panel>",
" * <e-panel></e-panel>",
" * </e-panels>",
" * </ejs-dashboardlayout>",
" * ```",
" */"
],
"templateProperties": [
"header",
"content",
"panels.header",
"panels.content"
],
"ignoreDottedTemplates": true,
"blazorContainerTemplates": [
"header:headerTemplate",
"content:contentTemplate"
],
"isPartialClass": true
}
],
"blazorType": "hybrid"
},
{
"baseClass": "Timeline",
"directoryName": "timeline",
"type": "container",
"defaultTag": "<div id='ej2Timeline'></div>",
"removeDuplicateClassName": true,
"preferredTag": "div",
"contentSelect": "div",
"blazorType": "native",
"blazorPlaceholder": "timeline",
"templateProperties": ["template", "content", "oppositeContent"],
"blazorTemplates":["template", "content", "oppositeContent"],
"comment": [
"/**",
" * Represents the EJ2 Angular Timeline Component.",
" * ```html",
" * <div ejs-timeline [items]='timelineItems'></div>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `TimelineComponent` represents the react Timeline Component.",
" * ```ts",
" * <TimelineComponent items={timelineItems} />",
" * ```",
" */"
],
"vueComment": [
"/**",
" * Represents the Essential JS 2 VueJS Timeline Component.",
" * ```html",
" * <ejs-timeline :items='timelineItems'></ejs-timeline>",
" * ```",
" */"
],
"tagDirective": [
{
"arrayDirectiveClassName": "items",
"directiveClassName": "item",
"propertyName": "items",
"baseClass": "TimelineItem",
"arrayDirectiveSelector": "ejs-timeline>e-items",
"directiveSelector": "ejs-timeline>e-items>e-item",
"directoryName": "timeline",
"aspArrayClassName": "TimelineItem",
"aspCollectionClassName": "Items",
"aspDirectiveSelector": "e-timeline-item",
"aspArrayDirectiveSelector": "e-timeline-items",
"comment": [
"/**",
" * 'e-timelineItem' directive represents a item of the Angular Timeline.",
" * It must be contained in a Timeline component(`ejs-timeline`). ",
" * ```html",
" * <ejs-timeline>",
" * <e-items>",
" * <e-item [dotCss]='e-icons e-folder' [content]='Item 1' />",
" * <e-item [dotCss]='e-icons e-folder' [content]='Item 2' />",
" * </e-items> ",
" * </ejs-timeline>",
" * ```",
" */"
],
"reactComment": [
"/**",
" * `ItemDirective` represents a item of the React Timeline. ",
" * It must be contained in a Timeline component(`TimelineComponent`). ",
" * ```tsx",
" * <TimelineComponent>",
" * <ItemsDirective>",
" * <ItemDirective dotCss= { 'e-icons e-folder' } content= { 'Item 1' } />",
" * <ItemDirective dotCss= { 'e-icons e-folder' } content= { 'Item 2' } />",
" * </ItemsDirective>",
" * </TimelineComponent>",
" * ```",
" */"
],
"vueComment": [
"/**",
" * 'e-timelineItem' directive represents a item of the Vue Timeline ",
" * It must be contained in a Timeline component(`ejs-timeline`). ",
" * ```html",
" * <ejs-timeline>",
" * <e-items>",
" * <e-item :dotCss='e-icons e-folder' :content='Item 1' />",
" * <e-item :dotCss='e-icons e-folder' :content='Item 2' />",
" * </e-items> ",
" * </ejs-timeline>",
" * ```",
" */"
]
}
]
}
]
}