Mockup Containers Entities

Accordion

Preview

Usage

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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

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)}
  />

Definition

{
  _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,
}