Mockup Forms Entities

Calendar

Preview
Usage
Definition

import { Calendar } from '@dinghy/diagrams/entitiesMockupForms'

<Calendar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CALENDAR } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, CALENDAR)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;',
  },
  _width: 160,
  _height: 175,
}

Checkbox

Preview
Usage
Definition

import { Checkbox } from '@dinghy/diagrams/entitiesMockupForms'

<Checkbox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOX)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=0;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;align=left;spacingLeft=4;fontSize=17;fontColor=#666666;labelPosition=right;',
  },
  _original_width: 15,
  _original_height: 15,

}

Checkboxes

Preview
Usage
Definition

import { Checkboxes } from '@dinghy/diagrams/entitiesMockupForms'

<Checkboxes/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOXES } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, CHECKBOXES)}
  />

{
  _style: {
    entity: 'swimlane;strokeColor=#999999;swimlaneFillColor=#FFFFFF;fillColor=#ffffff;fontColor=#666666;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=0;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;whiteSpace=wrap;html=1;',
  },
  _width: 0,
  _height: 120,
}

Color Picker

Preview
Usage
Definition

import { ColorPicker } from '@dinghy/diagrams/entitiesMockupForms'

<ColorPicker/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COLOR_PICKER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, COLOR_PICKER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.forms.colorPicker;chosenColor=#aaddff;',
  },
  _original_width: 40,
  _original_height: 40,

}

Combo Box

Preview
Usage
Definition

import { ComboBox } from '@dinghy/diagrams/entitiesMockupForms'

<ComboBox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMBO_BOX } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, COMBO_BOX)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.comboBox;strokeColor=#999999;fillColor=#ddeeff;align=left;fillColor2=#aaddff;mainText=;fontColor=#666666;fontSize=17;spacingLeft=3;',
  },
  _width: 150,
  _height: 30,
}

Email

Preview
Usage
Definition

import { Email } from '@dinghy/diagrams/entitiesMockupForms'

<Email/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EMAIL } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, EMAIL)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.anchor;align=right;spacingRight=2;fontColor=#666666;',
  },
  _width: 400,
  _height: 300,
}

Email 2

Preview
Usage
Definition

import { Email2 } from '@dinghy/diagrams/entitiesMockupForms'

<Email2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EMAIL_2 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, EMAIL_2)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;fillColor=#ffffff;rSize=0;fontColor=#666666;align=left;spacingLeft=3;strokeColor=#999999;',
  },
  _width: 1,
  _height: 300,
}

Email 3

Preview
Usage
Definition

import { Email3 } from '@dinghy/diagrams/entitiesMockupForms'

<Email3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EMAIL_3 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, EMAIL_3)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;fillColor=#ffffff;rSize=0;fontColor=#666666;align=left;spacingLeft=3;strokeColor=#999999;verticalAlign=top;whiteSpace=wrap;',
  },
  _width: 10,
  _height: 300,
}

Preview
Usage
Definition

import { FormattingToolbar1 } from '@dinghy/diagrams/entitiesMockupForms'

<FormattingToolbar1/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORMATTING_TOOLBAR_1 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, FORMATTING_TOOLBAR_1)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.menus_and_buttons.font_style_selector_1;',
  },
  _width: 136,
  _height: 31,
}

Preview
Usage
Definition

import { FormattingToolbar2 } from '@dinghy/diagrams/entitiesMockupForms'

<FormattingToolbar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORMATTING_TOOLBAR_2 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, FORMATTING_TOOLBAR_2)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.menus_and_buttons.font_style_selector_2;',
  },
  _width: 235,
  _height: 31,
}

Preview
Usage
Definition

import { FormattingToolbar3 } from '@dinghy/diagrams/entitiesMockupForms'

<FormattingToolbar3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORMATTING_TOOLBAR_3 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, FORMATTING_TOOLBAR_3)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.menus_and_buttons.font_style_selector_3;',
  },
  _width: 176,
  _height: 38,
}

Horizontal Slider

Preview
Usage
Definition

import { HorizontalSlider } from '@dinghy/diagrams/entitiesMockupForms'

<HorizontalSlider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_SLIDER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, HORIZONTAL_SLIDER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.forms.horSlider;strokeColor=#999999;sliderStyle=basic;sliderPos=20;handleStyle=circle;fillColor2=#ddeeff;',
  },
  _width: 150,
  _height: 30,
}

Horizontal Splitter

Preview
Usage
Definition

import { HorizontalSplitter } from '@dinghy/diagrams/entitiesMockupForms'

<HorizontalSplitter/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_SPLITTER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, HORIZONTAL_SPLITTER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.forms.splitter;strokeColor=#999999;',
  },
  _width: 350,
  _height: 10,
}

List Box

Preview
Usage
Definition

import { ListBox } from '@dinghy/diagrams/entitiesMockupForms'

<ListBox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_BOX } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, LIST_BOX)}
  />

{
  _style: {
    entity: 'swimlane;strokeColor=#999999;swimlaneFillColor=#FFFFFF;fillColor=#ffffff;fontColor=#008CFF;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;whiteSpace=wrap;html=1;fontSize=17;',
  },
  _width: 0,
  _height: 120,
}

Preview
Usage
Definition

import { MenuBar } from '@dinghy/diagrams/entitiesMockupForms'

<MenuBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MENU_BAR } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, MENU_BAR)}
  />

{
  _style: {
    entity: 'swimlane;shape=mxgraph.bootstrap.anchor;strokeColor=#999999;fillColor=#ffffff;fontColor=#666666;childLayout=stackLayout;horizontal=0;startSize=0;horizontalStack=1;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;whiteSpace=wrap;html=1;',
  },
  _width: 0,
  _height: 30,
}

Password Field

Preview
Usage
Definition

import { PasswordField } from '@dinghy/diagrams/entitiesMockupForms'

<PasswordField/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PASSWORD_FIELD } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, PASSWORD_FIELD)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.pwField;strokeColor=#999999;mainText=;align=left;fontColor=#666666;fontSize=17;spacingLeft=3;',
  },
  _width: 150,
  _height: 30,
}

Radiobutton

Preview
Usage
Definition

import { Radiobutton } from '@dinghy/diagrams/entitiesMockupForms'

<Radiobutton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIOBUTTON } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, RADIOBUTTON)}
  />

{
  _style: {
    entity: 'shape=ellipse;fillColor=#eeeeee;strokeColor=#999999;gradientColor=#cccccc;html=1;align=left;spacingLeft=4;fontSize=17;fontColor=#666666;labelPosition=right;shadow=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Preview
Usage
Definition

import { SearchBox } from '@dinghy/diagrams/entitiesMockupForms'

<SearchBox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SEARCH_BOX } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, SEARCH_BOX)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.searchBox;strokeColor=#999999;mainText=;strokeColor2=#008cff;fontColor=#666666;fontSize=17;align=left;spacingLeft=3;whiteSpace=wrap;',
  },
  _width: 150,
  _height: 30,
}

Preview
Usage
Definition

import { SignIn } from '@dinghy/diagrams/entitiesMockupForms'

<SignIn/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SIGN_IN } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, SIGN_IN)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.rrect;rSize=0;strokeColor=#999999;fillColor=#ffffff;',
  },
  _width: 200,
  _height: 300,
}

Spinner

Preview
Usage
Definition

import { Spinner } from '@dinghy/diagrams/entitiesMockupForms'

<Spinner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SPINNER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, SPINNER)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.spinner;strokeColor=#999999;spinLayout=right;spinStyle=normal;adjStyle=triangle;fillColor=#aaddff;fontSize=17;fontColor=#666666;mainText=;html=1;overflow=fill;',
  },
  _width: 150,
  _height: 60,
}

Vertical Slider

Preview
Usage
Definition

import { VerticalSlider } from '@dinghy/diagrams/entitiesMockupForms'

<VerticalSlider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_SLIDER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, VERTICAL_SLIDER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.forms.horSlider;strokeColor=#999999;sliderStyle=basic;sliderPos=20;handleStyle=circle;fillColor2=#ddeeff;direction=north;',
  },
  _width: 30,
  _height: 150,
}

Vertical Splitter

Preview
Usage
Definition

import { VerticalSplitter } from '@dinghy/diagrams/entitiesMockupForms'

<VerticalSplitter/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_SPLITTER } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, VERTICAL_SPLITTER)}
  />

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.forms.splitter;strokeColor=#999999;direction=north;',
  },
  _width: 10,
  _height: 350,
}

Wedge Bar

Preview
Usage
Definition

import { WedgeBar } from '@dinghy/diagrams/entitiesMockupForms'

<WedgeBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WEDGE_BAR } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, WEDGE_BAR)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.uRect;fontSize=17;fontColor=#666666;align=left;spacingLeft=5;strokeColor=#666666;',
  },
  _width: 0,
  _height: 30,
}

Wedge Bar 2

Preview
Usage
Definition

import { WedgeBar2 } from '@dinghy/diagrams/entitiesMockupForms'

<WedgeBar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WEDGE_BAR_2 } from '@dinghy/diagrams/entitiesMockupForms'

<Shape 
  {...props}
  _style={extendStyle(props, WEDGE_BAR_2)}
  />

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.forms.uRect;fontSize=17;fontColor=#ffffff;align=left;spacingLeft=5;strokeColor=#008cff;fillColor=#008cff;',
  },
  _width: 1,
  _height: 30,
}

Calendar​

Checkbox​

Checkboxes​

Color Picker​

Combo Box​

Email​

Email 2​

Email 3​

Formatting Toolbar 1​

Formatting Toolbar 2​

Formatting Toolbar 3​

Horizontal Slider​

Horizontal Splitter​

List Box​

Menu Bar​

Password Field​

Radiobutton​

Search Box​

Sign In​

Spinner​

Vertical Slider​

Vertical Splitter​

Wedge Bar​

Wedge Bar 2​

Calendar

Checkbox

Checkboxes

Color Picker

Combo Box

Email

Email 2

Email 3

Formatting Toolbar 1

Formatting Toolbar 2

Formatting Toolbar 3

Horizontal Slider

Horizontal Splitter

List Box

Menu Bar

Password Field

Radiobutton

Search Box

Sign In

Spinner

Vertical Slider

Vertical Splitter

Wedge Bar

Wedge Bar 2