Mockup Containers Entities
Accordion
- Preview
- Usage
- Definition
import { Accordion } from '@dinghy/diagrams/entitiesMockupContainers'
<Accordion/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ACCORDION } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, ACCORDION)}
/>
{
_style: {
entity: 'swimlane;strokeColor=#666666;swimlaneFillColor=#FFFFFF;fillColor=#ffffff;fontColor=#008CFF;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=0;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;whiteSpace=wrap;html=1;fontSize=17;',
},
_width: 0,
_height: 220,
}
Browser Window
- Preview
- Usage
- Definition
import { BrowserWindow } from '@dinghy/diagrams/entitiesMockupContainers'
<BrowserWindow/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BROWSER_WINDOW } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, BROWSER_WINDOW)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.browserWindow;rSize=0;strokeColor=#666666;strokeColor2=#008cff;strokeColor3=#c4c4c4;mainText=,;recursiveResize=0;',
},
_width: 0,
_height: 380,
}
Dialog Box
- Preview
- Usage
- Definition
import { DialogBox } from '@dinghy/diagrams/entitiesMockupContainers'
<DialogBox/>
// or
import { extendStyle } from "@dinghy/base-components";
import { DIALOG_BOX } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, DIALOG_BOX)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.rrect;rSize=0;strokeColor=#666666;fontColor=#666666;fontSize=17;verticalAlign=top;whiteSpace=wrap;fillColor=#ffffff;spacingTop=32;',
},
_width: 250,
_height: 140,
}
Group
- Preview
- Usage
- Definition
import { Group } from '@dinghy/diagrams/entitiesMockupContainers'
<Group/>
// or
import { extendStyle } from "@dinghy/base-components";
import { GROUP } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, GROUP)}
/>
{
_style: {
entity: 'shape=mxgraph.mockup.containers.marginRect;rectMarginTop=10;strokeColor=#666666;strokeWidth=1;dashed=0;rounded=1;arcSize=5;recursiveResize=0;html=1;whiteSpace=wrap;',
},
_width: 0,
_height: 200,
}
Horizontal Tab Bar
- Preview
- Usage
- Definition
import { HorizontalTabBar } from '@dinghy/diagrams/entitiesMockupContainers'
<HorizontalTabBar/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_TAB_BAR } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_TAB_BAR)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.marginRect2;rectMarginTop=32;strokeColor=#666666;gradientColor=none;whiteSpace=wrap;',
},
_width: 0,
_height: 200,
}
User, Female
- Preview
- Usage
- Definition
import { UserFemale } from '@dinghy/diagrams/entitiesMockupContainers'
<UserFemale/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USER_FEMALE } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, USER_FEMALE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.containers.userFemale;strokeColor=#666666;strokeColor2=#008cff;',
},
_original_width: 100,
_original_height: 100,
}
User, Male
- Preview
- Usage
- Definition
import { UserMale } from '@dinghy/diagrams/entitiesMockupContainers'
<UserMale/>
// or
import { extendStyle } from "@dinghy/base-components";
import { USER_MALE } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, USER_MALE)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.containers.userMale;strokeColor=#666666;strokeColor2=#008cff;',
},
_original_width: 100,
_original_height: 100,
}
Vertical Tab Bar
- Preview
- Usage
- Definition
import { VerticalTabBar } from '@dinghy/diagrams/entitiesMockupContainers'
<VerticalTabBar/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_TAB_BAR } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, VERTICAL_TAB_BAR)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.marginRect2;rectMarginLeft=67;strokeColor=#666666;gradientColor=none;whiteSpace=wrap;',
},
_width: 0,
_height: 200,
}
Video Player
- Preview
- Usage
- Definition
import { VideoPlayer } from '@dinghy/diagrams/entitiesMockupContainers'
<VideoPlayer/>
// or
import { extendStyle } from "@dinghy/base-components";
import { VIDEO_PLAYER } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, VIDEO_PLAYER)}
/>
{
_style: {
entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.containers.videoPlayer;strokeColor=#666666;strokeColor2=#008cff;strokeColor3=#c4c4c4;textColor=#666666;fillColor2=#008cff;barHeight=30;barPos=20;',
},
_width: 300,
_height: 200,
}
Window
- Preview
- Usage
- Definition
import { Window } from '@dinghy/diagrams/entitiesMockupContainers'
<Window/>
// or
import { extendStyle } from "@dinghy/base-components";
import { WINDOW } from '@dinghy/diagrams/entitiesMockupContainers'
<Shape
{...props}
_style={extendStyle(props, WINDOW)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.containers.window;align=left;verticalAlign=top;spacingLeft=8;strokeColor2=#008cff;strokeColor3=#c4c4c4;fontColor=#666666;mainText=;fontSize=17;labelBackgroundColor=none;whiteSpace=wrap;',
},
_width: 550,
_height: 380,
}