iOS iOS6 Entities

Add

Preview
Usage
Definition

import { Add } from '@dinghy/diagrams/entitiesIos6'

<Add/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ADD } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iAddIcon;fillColor=#7AdF78;fillColor2=#1A9917;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Alert Box

Preview
Usage
Definition

import { AlertBox } from '@dinghy/diagrams/entitiesIos6'

<AlertBox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_BOX } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.fancyRRect;rSize=8;strokeColor=#dddddd;fillColor=#497198;gradientColor=#193168;opacity=80;fontColor=#ffffff;fontSize=8;whiteSpace=wrap;align=center;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Helvetica;',
  },
  _width: 150,
  _height: 100,
}

Alphabet list

Preview
Usage
Definition

import { AlphabetList } from '@dinghy/diagrams/entitiesIos6'

<AlphabetList/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALPHABET_LIST } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iAlphaList;fontSize=7.5;',
  },
  _width: 15,
  _height: 225,
}

App bar (portrait)

Preview
Usage
Definition

import { AppBarPortrait } from '@dinghy/diagrams/entitiesIos6'

<AppBarPortrait/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APP_BAR_PORTRAIT } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.iAppBar;strokeWidth=1;sketch=0;',
  },
  _width: 0,
  _height: 15,
}

Arrow

Preview
Usage
Definition

import { Arrow } from '@dinghy/diagrams/entitiesIos6'

<Arrow/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ARROW } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iArrowIcon;fillColor=#8BbEff;fillColor2=#135Ec8;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Back button

Preview
Usage
Definition

import { BackButton } from '@dinghy/diagrams/entitiesIos6'

<BackButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BACK_BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iButtonBack;strokeColor=#444444;fontColor=#ffffff;buttonText=;fontSize=8;fillColor=#dddddd;fillColor2=#3D5565;spacingLeft=10;whiteSpace=wrap;align=center;sketch=0;',
  },
  _width: 43.5,
  _height: 15,
}

Button

Preview
Usage
Definition

import { Button } from '@dinghy/diagrams/entitiesIos6'

<Button/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iButton;strokeColor=#444444;fontColor=#ffffff;buttonText=;fontSize=8;fillColor=#dddddd;fillColor2=#3D5565;whiteSpace=wrap;align=center;sketch=0;',
  },
  _width: 43.5,
  _height: 15,
}

Button bar

Preview
Usage
Definition

import { ButtonBar } from '@dinghy/diagrams/entitiesIos6'

<ButtonBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'swimlane;shape=mxgraph.bootstrap.anchor;strokeColor=#C4C4C4;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: 50,
}

Button bar 2

Preview
Usage
Definition

import { ButtonBar2 } from '@dinghy/diagrams/entitiesIos6'

<ButtonBar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_BAR_2 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'swimlane;shape=mxgraph.bootstrap.anchor;strokeColor=#C4C4C4;fillColor=#ffffff;fontColor=#999999;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: 80,
}

Button group, horizontal

Preview
Usage
Definition

import { ButtonGroupHorizontal } from '@dinghy/diagrams/entitiesIos6'

<ButtonGroupHorizontal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUP_HORIZONTAL } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'swimlane;shape=mxgraph.bootstrap.anchor;strokeColor=#444444;fillColor=#ffffff;fontColor=#999999;fontStyle=0;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: 12.5,
}

Call buttons

Preview
Usage
Definition

import { CallButtons } from '@dinghy/diagrams/entitiesIos6'

<CallButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CALL_BUTTONS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iCallButtons;',
  },
  _width: 174,
  _height: 229.99999999999997,
}

Call Dialog

Preview
Usage
Definition

import { CallDialog } from '@dinghy/diagrams/entitiesIos6'

<CallDialog/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CALL_DIALOG } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iCallDialog;sketch=0;',
  },
  _width: 150,
  _height: 125,
}

Check

Preview
Usage
Definition

import { Check } from '@dinghy/diagrams/entitiesIos6'

<Check/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECK } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iCheckIcon;fillColor=#e8878E;fillColor2=#BD1421;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Cloud progress bar

Preview
Usage
Definition

import { CloudProgressBar } from '@dinghy/diagrams/entitiesIos6'

<CloudProgressBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CLOUD_PROGRESS_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iCloudProgressBar;barPos=20;',
  },
  _width: 150,
  _height: 10,
}

Combobox

Preview
Usage
Definition

import { Combobox } from '@dinghy/diagrams/entitiesIos6'

<Combobox/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COMBOBOX } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iComboBox;spacingTop=2;spacingLeft=2;align=left;strokeColor=#444444;fontColor=#666666;buttonText=;fontSize=8;fillColor=#dddddd;fillColor2=#3D5565;sketch=0;whiteSpace=wrap;',
  },
  _width: 57.99999999999999,
  _height: 15,
}

Copy

Preview
Usage
Definition

import { Copy } from '@dinghy/diagrams/entitiesIos6'

<Copy/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COPY } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iCopy;fillColor=#000000;buttonText=;fontColor=#ffffff;spacingBottom=6;fontSize=9;fillColor2=#000000;fillColor3=#ffffff;align=center;sketch=0;whiteSpace=wrap;',
  },
  _width: 40,
  _height: 27.500000000000004,
}

Copy Area

Preview
Usage
Definition

import { CopyArea } from '@dinghy/diagrams/entitiesIos6'

<CopyArea/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COPY_AREA } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.iCopy;fillColor=#000000;buttonText=;fontColor=#ffffff;spacingBottom=6;fontSize=9;fillColor2=#000000;fillColor3=#ffffff;align=center;sketch=0;whiteSpace=wrap;',
  },
  _width: 0,
  _height: 80,
}

Copy Area 2

Preview
Usage
Definition

import { CopyArea2 } from '@dinghy/diagrams/entitiesIos6'

<CopyArea2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COPY_AREA_2 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.rect;fillColor=#2266ff;strokeColor=none;opacity=30;sketch=0;',
  },
  _width: 1,
  _height: 80,
}

Delete

Preview
Usage
Definition

import { Delete } from '@dinghy/diagrams/entitiesIos6'

<Delete/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DELETE } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iDeleteIcon;fillColor=#e8878E;fillColor2=#BD1421;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Delete app

Preview
Usage
Definition

import { DeleteApp } from '@dinghy/diagrams/entitiesIos6'

<DeleteApp/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DELETE_APP } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iDeleteApp;fillColor=#cccccc;fillColor2=#000000;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Direction

Preview
Usage
Definition

import { Direction } from '@dinghy/diagrams/entitiesIos6'

<Direction/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIRECTION } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iDir;',
  },
  _original_width: 100,
  _original_height: 100,

}

Download bar

Preview
Usage
Definition

import { DownloadBar } from '@dinghy/diagrams/entitiesIos6'

<DownloadBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOWNLOAD_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iDownloadBar;verticalAlign=top;spacingTop=-4;fontSize=8;fontColor=#ffffff;buttonText=;barPos=30;align=center;sketch=0;whiteSpace=wrap;',
  },
  _width: 174,
  _height: 30,
}

Forward button

Preview
Usage
Definition

import { ForwardButton } from '@dinghy/diagrams/entitiesIos6'

<ForwardButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORWARD_BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iButtonFw;strokeColor=#444444;fontColor=#ffffff;buttonText=;fontSize=8;fillColor=#dddddd;fillColor2=#3D5565;spacingRight=10;whiteSpace=wrap;align=center;sketch=0;',
  },
  _width: 43.5,
  _height: 15,
}

Home page control

Preview
Usage
Definition

import { HomePageControl } from '@dinghy/diagrams/entitiesIos6'

<HomePageControl/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HOME_PAGE_CONTROL } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iHomePageControl;fillColor=#666666;strokeColor=#cccccc;sketch=0;',
  },
  _width: 50,
  _height: 5,
}

Icon grid

Preview
Usage
Definition

import { IconGrid } from '@dinghy/diagrams/entitiesIos6'

<IconGrid/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ICON_GRID } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iIconGrid;gridSize=3,3;',
  },
  _original_width: 150,
  _original_height: 150,

}

Info

Preview
Usage
Definition

import { Info } from '@dinghy/diagrams/entitiesIos6'

<Info/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFO } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iInfoIcon;fillColor=#8BbEff;fillColor2=#135Ec8;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

iPad (landscape)

Preview
Usage
Definition

import { IpadLandscape } from '@dinghy/diagrams/entitiesIos6'

<IpadLandscape/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_LANDSCAPE } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPad;direction=north;bgStyle=bgGreen;fillColor=#aaaaaa;sketch=0;',
  },
  _width: 625,
  _height: 484.99999999999994,
}

iPad (portrait)

Preview
Usage
Definition

import { IpadPortrait } from '@dinghy/diagrams/entitiesIos6'

<IpadPortrait/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_PORTRAIT } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPad;bgStyle=bgGreen;fillColor=#aaaaaa;sketch=0;',
  },
  _width: 484.99999999999994,
  _height: 625,
}

iPad background (gray)

Preview
Usage
Definition

import { IpadBackgroundGray } from '@dinghy/diagrams/entitiesIos6'

<IpadBackgroundGray/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_BACKGROUND_GRAY } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iBgFlat;strokeColor=#18211b;fillColor=#dddddd;',
  },
  _width: 175,
  _height: 280,
}

iPad background (green)

Preview
Usage
Definition

import { IpadBackgroundGreen } from '@dinghy/diagrams/entitiesIos6'

<IpadBackgroundGreen/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_BACKGROUND_GREEN } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iBgFlat;strokeColor=#18211b;fillColor=#1f2923;',
  },
  _width: 175,
  _height: 280,
}

iPad background (map)

Preview
Usage
Definition

import { IpadBackgroundMap } from '@dinghy/diagrams/entitiesIos6'

<IpadBackgroundMap/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_BACKGROUND_MAP } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iBgMap;strokeColor=#18211b;strokeColor2=#008cff;fillColor2=#96D1FF;',
  },
  _width: 175,
  _height: 280,
}

iPad background (striped)

Preview
Usage
Definition

import { IpadBackgroundStriped } from '@dinghy/diagrams/entitiesIos6'

<IpadBackgroundStriped/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_BACKGROUND_STRIPED } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iBgStriped;strokeColor=#18211b;fillColor=#5D7585;strokeColor2=#657E8F;',
  },
  _width: 175,
  _height: 280,
}

iPad background (white)

Preview
Usage
Definition

import { IpadBackgroundWhite } from '@dinghy/diagrams/entitiesIos6'

<IpadBackgroundWhite/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_BACKGROUND_WHITE } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iBgFlat;strokeColor=#18211b;',
  },
  _width: 175,
  _height: 280,
}

iPhone (landscape)

Preview
Usage
Definition

import { IphoneLandscape } from '@dinghy/diagrams/entitiesIos6'

<IphoneLandscape/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPHONE_LANDSCAPE } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPhone;direction=north;bgStyle=bgGreen;fillColor=#aaaaaa;sketch=0;',
  },
  _width: 400,
  _height: 200,
}

iPhone (portrait)

Preview
Usage
Definition

import { IphonePortrait } from '@dinghy/diagrams/entitiesIos6'

<IphonePortrait/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPHONE_PORTRAIT } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPhone;bgStyle=bgGreen;fillColor=#aaaaaa;sketch=0;',
  },
  _width: 200,
  _height: 400,
}

Keyboard (letters)

Preview
Usage
Definition

import { KeyboardLetters } from '@dinghy/diagrams/entitiesIos6'

<KeyboardLetters/>

// or

import { extendStyle } from "@dinghy/base-components";
import { KEYBOARD_LETTERS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iKeybLett;sketch=0;',
  },
  _width: 174,
  _height: 100,
}

Keyboard (numbers)

Preview
Usage
Definition

import { KeyboardNumbers } from '@dinghy/diagrams/entitiesIos6'

<KeyboardNumbers/>

// or

import { extendStyle } from "@dinghy/base-components";
import { KEYBOARD_NUMBERS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iKeybNumb;sketch=0;',
  },
  _width: 174,
  _height: 100,
}

Keyboard (symbols)

Preview
Usage
Definition

import { KeyboardSymbols } from '@dinghy/diagrams/entitiesIos6'

<KeyboardSymbols/>

// or

import { extendStyle } from "@dinghy/base-components";
import { KEYBOARD_SYMBOLS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iKeybSymb;sketch=0;',
  },
  _width: 174,
  _height: 100,
}

Location bar

Preview
Usage
Definition

import { LocationBar } from '@dinghy/diagrams/entitiesIos6'

<LocationBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOCATION_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iLocBar;align=left;spacingLeft=4;spacingBottom=4;fontColor=#ffffff;fontSize=10;barPos=80;pointerPos=bottom;buttonText=5th Street Music Store',
  },
  _width: 155,
  _height: 32.5,
}

Lock button

Preview
Usage
Definition

import { LockButton } from '@dinghy/diagrams/entitiesIos6'

<LockButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOCK_BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iLockButton;fontColor=#cccccc;fontSize=13;mainText=;spacingLeft=50;spacingRight=10;align=center;sketch=0;whiteSpace=wrap;',
  },
  _width: 174,
  _height: 50,
}

On-off button

Preview
Usage
Definition

import { OnOffButton } from '@dinghy/diagrams/entitiesIos6'

<OnOffButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ON_OFF_BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iOnOffButton;mainText=;strokeColor=#444444;fontSize=9;fontColor=#ffffff;spacingRight=14;buttonState=on;sketch=0;',
  },
  _width: 43.5,
  _height: 15,
}

Option

Preview
Usage
Definition

import { Option } from '@dinghy/diagrams/entitiesIos6'

<Option/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OPTION } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iOption;barPos=80;pointerPos=bottom;buttonText=Option;fontSize=10;fontColor=#ffffff;spacingBottom=6;',
  },
  _width: 75,
  _height: 27.500000000000004,
}

Page control

Preview
Usage
Definition

import { PageControl } from '@dinghy/diagrams/entitiesIos6'

<PageControl/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PAGE_CONTROL } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPageControl;fillColor=#666666;strokeColor=#cccccc;sketch=0;',
  },
  _width: 50,
  _height: 5,
}

Password field

Preview
Usage
Definition

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

<PasswordField/>

// or

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

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iTextInput;strokeColor=#444444;align=left;buttonText=;fontSize=8;whiteSpace=wrap;',
  },
  _width: 43.5,
  _height: 15,
}

Preview
Usage
Definition

import { Pin } from '@dinghy/diagrams/entitiesIos6'

<Pin/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIN } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=top;html=1;shadow=0;dashed=0;verticalAlign=bottom;strokeWidth=1;shape=mxgraph.ios.iPin;fillColor2=#00dd00;fillColor3=#004400;strokeColor=#006600;',
  },
  _width: 10,
  _height: 25,
}

Pin 2

Preview
Usage
Definition

import { Pin2 } from '@dinghy/diagrams/entitiesIos6'

<Pin2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIN_2 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=top;html=1;shadow=0;dashed=0;verticalAlign=bottom;strokeWidth=1;shape=mxgraph.ios.iPin;fillColor2=#dd0000;fillColor3=#440000;strokeColor=#660000;',
  },
  _width: 10,
  _height: 25,
}

Pin 3

Preview
Usage
Definition

import { Pin3 } from '@dinghy/diagrams/entitiesIos6'

<Pin3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIN_3 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=top;html=1;shadow=0;dashed=0;verticalAlign=bottom;strokeWidth=1;shape=mxgraph.ios.iPin;fillColor2=#ccccff;fillColor3=#0000ff;strokeColor=#000066;',
  },
  _width: 10,
  _height: 25,
}

Pin 4

Preview
Usage
Definition

import { Pin4 } from '@dinghy/diagrams/entitiesIos6'

<Pin4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIN_4 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=top;html=1;shadow=0;dashed=0;verticalAlign=bottom;strokeWidth=1;shape=mxgraph.ios.iPin;fillColor2=#ffff00;fillColor3=#888800;strokeColor=#999900;',
  },
  _width: 10,
  _height: 25,
}

Pin 5

Preview
Usage
Definition

import { Pin5 } from '@dinghy/diagrams/entitiesIos6'

<Pin5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PIN_5 } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=top;html=1;shadow=0;dashed=0;verticalAlign=bottom;strokeWidth=1;shape=mxgraph.ios.iPin;fillColor2=#ffa500;fillColor3=#885000;strokeColor=#997000;',
  },
  _width: 10,
  _height: 25,
}

Prev/next button

Preview
Usage
Definition

import { PrevNextButton } from '@dinghy/diagrams/entitiesIos6'

<PrevNextButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PREV_NEXT_BUTTON } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iPrevNext;strokeColor=#444444;fillColor=#dddddd;fillColor2=#3D5565;fillColor3=#ffffff;align=center;sketch=0;',
  },
  _width: 43.5,
  _height: 15,
}

Progress bar

Preview
Usage
Definition

import { ProgressBar } from '@dinghy/diagrams/entitiesIos6'

<ProgressBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iProgressBar;barPos=40;',
  },
  _width: 150,
  _height: 10,
}

Radio buttons

Preview
Usage
Definition

import { RadioButtons } from '@dinghy/diagrams/entitiesIos6'

<RadioButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTONS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'swimlane;shape=mxgraph.bootstrap.rrect;rSize=3;strokeColor=#666666;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: 50,
}

Screen name bar

Preview
Usage
Definition

import { ScreenNameBar } from '@dinghy/diagrams/entitiesIos6'

<ScreenNameBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCREEN_NAME_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iScreenNameBar;fillColor2=#000000;fillColor3=#ffffff;buttonText=;fontColor=#ffffff;fontSize=10;whiteSpace=wrap;align=center;sketch=0;',
  },
  _width: 174,
  _height: 25,
}

Slider

Preview
Usage
Definition

import { Slider } from '@dinghy/diagrams/entitiesIos6'

<Slider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iSlider;barPos=20;',
  },
  _width: 150,
  _height: 10,
}

Sort/find

Preview
Usage
Definition

import { SortFind } from '@dinghy/diagrams/entitiesIos6'

<SortFind/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SORT_FIND } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iSortFindIcon;fillColor=#8BbEff;fillColor2=#135Ec8;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Text input

Preview
Usage
Definition

import { TextInput } from '@dinghy/diagrams/entitiesIos6'

<TextInput/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT_INPUT } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'strokeWidth=1;html=1;shadow=0;dashed=0;shape=mxgraph.ios.iTextInput;strokeColor=#444444;buttonText=;fontSize=8;whiteSpace=wrap;align=left;',
  },
  _width: 43.5,
  _height: 15,
}

Top bar

Preview
Usage
Definition

import { TopBar } from '@dinghy/diagrams/entitiesIos6'

<TopBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOP_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.iTopBar2;opacity=50;fillColor=#999999;strokeColor=#cccccc;strokeWidth=1;sketch=0;',
  },
  _width: 0,
  _height: 15,
}

Top bar locked

Preview
Usage
Definition

import { TopBarLocked } from '@dinghy/diagrams/entitiesIos6'

<TopBarLocked/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOP_BAR_LOCKED } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.iTopBarLocked;strokeWidth=1;sketch=0;',
  },
  _width: 0,
  _height: 15,
}

URL bar

Preview
Usage
Definition

import { UrlBar } from '@dinghy/diagrams/entitiesIos6'

<UrlBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { URL_BAR } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.ios.iURLBar;verticalAlign=top;fontSize=8;spacingTop=-5;align=center;sketch=0;whiteSpace=wrap;',
  },
  _width: 0,
  _height: 30,
}

Video controls

Preview
Usage
Definition

import { VideoControls } from '@dinghy/diagrams/entitiesIos6'

<VideoControls/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VIDEO_CONTROLS } from '@dinghy/diagrams/entitiesIos6'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios.iVideoControls;barPos=20;sketch=0;',
  },
  _width: 174,
  _height: 50,
}

Add​

Alert Box​

Alphabet list​

App bar (portrait)​

Arrow​

Back button​

Button​

Button bar​

Button bar 2​

Button group, horizontal​

Call buttons​

Call Dialog​

Check​

Cloud progress bar​

Combobox​

Copy​

Copy Area​

Copy Area 2​

Delete​

Delete app​

Direction​

Download bar​

Forward button​

Home page control​

Icon grid​

Info​

iPad (landscape)​

iPad (portrait)​

iPad background (gray)​

iPad background (green)​

iPad background (map)​

iPad background (striped)​

iPad background (white)​

iPhone (landscape)​

iPhone (portrait)​

Keyboard (letters)​

Keyboard (numbers)​

Keyboard (symbols)​

Location bar​

Lock button​

On-off button​

Option​

Page control​

Password field​

Pin​

Pin 2​

Pin 3​

Pin 4​

Pin 5​

Prev/next button​

Progress bar​

Radio buttons​

Screen name bar​

Slider​

Sort/find​

Text input​

Top bar​

Top bar locked​

URL bar​

Video controls​

Add

Alert Box

Alphabet list

App bar (portrait)

Arrow

Back button

Button

Button bar

Button bar 2

Button group, horizontal

Call buttons

Call Dialog

Check

Cloud progress bar

Combobox

Copy

Copy Area

Copy Area 2

Delete

Delete app

Direction

Download bar

Forward button

Home page control

Icon grid

Info

iPad (landscape)

iPad (portrait)

iPad background (gray)

iPad background (green)

iPad background (map)

iPad background (striped)

iPad background (white)

iPhone (landscape)

iPhone (portrait)

Keyboard (letters)

Keyboard (numbers)

Keyboard (symbols)

Location bar

Lock button

On-off button

Option

Page control

Password field

Pin

Pin 2

Pin 3

Pin 4

Pin 5

Prev/next button

Progress bar

Radio buttons

Screen name bar

Slider

Sort/find

Text input

Top bar

Top bar locked

URL bar

Video controls