iOS iOS7 UI Entities

Action Dialog

Preview
Usage
Definition

import { ActionDialog } from '@dinghy/diagrams/entitiesIos7Ui'

<ActionDialog/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACTION_DIALOG } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;fillColor=#a0a0a0;strokeColor=none;shadow=0;',
  },
  _width: 0,
  _height: 60,
}

Action Sheet

Preview
Usage
Definition

import { ActionSheet } from '@dinghy/diagrams/entitiesIos7Ui'

<ActionSheet/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACTION_SHEET } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;rSize=3;strokeColor=none;fillColor=#D2D3D5;gradientColor=none;shadow=0;html=1;',
  },
  _width: 164,
  _height: 115,
}

Action Sheet 2

Preview
Usage
Definition

import { ActionSheet2 } from '@dinghy/diagrams/entitiesIos7Ui'

<ActionSheet2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ACTION_SHEET_2 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;rSize=3;strokeColor=none;fillColor=#D2D3D5;gradientColor=none;shadow=0;',
  },
  _width: 164,
  _height: 115,
}

Add

Preview
Usage
Definition

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

<Add/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.add;fillColor=#00dd00;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Adjust

Preview
Usage
Definition

import { Adjust } from '@dinghy/diagrams/entitiesIos7Ui'

<Adjust/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ADJUST } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.adjust;gradientColor=none;sketch=0;',
  },
  _width: 80,
  _height: 20,
}

Alert

Preview
Usage
Definition

import { Alert } from '@dinghy/diagrams/entitiesIos7Ui'

<Alert/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;rounded=1;strokeColor=none;fillColor=#F6F6F8;gradientColor=none;shadow=0;glass=0;dashed=1;fontFamily=Helvetica;fontSize=7;fontColor=#333333;align=center;html=1;verticalAlign=top;whiteSpace=wrap;spacing=8;spacingTop=0;',
  },
  _width: 0,
  _height: 70,
}

App Bar (landscape)

Preview
Usage
Definition

import { AppBarLandscape } from '@dinghy/diagrams/entitiesIos7Ui'

<AppBarLandscape/>

// or

import { extendStyle } from "@dinghy/base-components";
import { APP_BAR_LANDSCAPE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7ui.appBar;fillColor=#ffffff;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 280,
  _height: 15,
}

App Bar (portrait)

Preview
Usage
Definition

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

<AppBarPortrait/>

// or

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

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7ui.appBar;fillColor=#ffffff;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;',
  },
  _width: 175,
  _height: 15,
}

Bluetooth

Preview
Usage
Definition

import { Bluetooth } from '@dinghy/diagrams/entitiesIos7Ui'

<Bluetooth/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BLUETOOTH } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.bluetooth;fillColor=#007AFF;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Broadcast

Preview
Usage
Definition

import { Broadcast } from '@dinghy/diagrams/entitiesIos7Ui'

<Broadcast/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BROADCAST } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.broadcast;fillColor=#4CDA64;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Call Pad

Preview
Usage
Definition

import { CallPad } from '@dinghy/diagrams/entitiesIos7Ui'

<CallPad/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CALL_PAD } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.call_pad;sketch=0;',
  },
  _width: 140,
  _height: 160,
}

Cell list

Preview
Usage
Definition

import { CellList } from '@dinghy/diagrams/entitiesIos7Ui'

<CellList/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CELL_LIST } from '@dinghy/diagrams/entitiesIos7Ui'

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

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

Check

Preview
Usage
Definition

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

<Check/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.check;strokeColor=#0080f0;',
  },
  _width: 10,
  _height: 8,
}

Circle

Preview
Usage
Definition

import { Circle } from '@dinghy/diagrams/entitiesIos7Ui'

<Circle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CIRCLE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.circle;strokeColor=#222222;fillColor=none;',
  },
  _original_width: 12,
  _original_height: 12,

}

Contacts Bar

Preview
Usage
Definition

import { ContactsBar } from '@dinghy/diagrams/entitiesIos7Ui'

<ContactsBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CONTACTS_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.contacts_bar;strokeColor=#0080F0;fillColor=#e0e0e0',
  },
  _width: 175,
  _height: 28.000000000000004,
}

Current Location

Preview
Usage
Definition

import { CurrentLocation } from '@dinghy/diagrams/entitiesIos7Ui'

<CurrentLocation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CURRENT_LOCATION } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.current_location;strokeColor=#ffffff;fillColor=#0080F0;sketch=0;',
  },
  _original_width: 60,
  _original_height: 60,

}

Delete

Preview
Usage
Definition

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

<Delete/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.delete;fillColor=#ff0000;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Dialog

Preview
Usage
Definition

import { Dialog } from '@dinghy/diagrams/entitiesIos7Ui'

<Dialog/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DIALOG } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;rounded=1;strokeColor=none;fillColor=#F6F6F8;gradientColor=none;shadow=0;glass=0;dashed=1;fontFamily=Helvetica;fontSize=8;fontColor=#333333;align=center;html=1;verticalAlign=top;whiteSpace=wrap;spacing=2;spacingTop=0;',
  },
  _width: 120,
  _height: 70,
}

Down

Preview
Usage
Definition

import { Down } from '@dinghy/diagrams/entitiesIos7Ui'

<Down/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DOWN } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.down;strokeColor=#0080f0;',
  },
  _width: 12,
  _height: 6,
}

Download bar

Preview
Usage
Definition

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

<DownloadBar/>

// or

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

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7ui.downloadBar;verticalAlign=middle;fontSize=8;buttonText=;barPos=30;fillColor=#aaaaaa;strokeColor=#0080f0;align=center;',
  },
  _width: 150,
  _height: 30,
}

Edit Bar

Preview
Usage
Definition

import { EditBar } from '@dinghy/diagrams/entitiesIos7Ui'

<EditBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EDIT_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.edit_bar;strokeColor=#0080F0;fillColor=#e0e0e0',
  },
  _width: 175,
  _height: 28.000000000000004,
}

Expand

Preview
Usage
Definition

import { Expand } from '@dinghy/diagrams/entitiesIos7Ui'

<Expand/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EXPAND } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.expand;fillColor=#c0c0c0;',
  },
  _width: 24,
  _height: 6,
}

Flagged

Preview
Usage
Definition

import { Flagged } from '@dinghy/diagrams/entitiesIos7Ui'

<Flagged/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLAGGED } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.flagged;strokeColor=#0080f0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Horizontal button bar

Preview
Usage
Definition

import { HorizontalButtonBar } from '@dinghy/diagrams/entitiesIos7Ui'

<HorizontalButtonBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_BUTTON_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

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

Icon

Preview
Usage
Definition

import { Icon } from '@dinghy/diagrams/entitiesIos7Ui'

<Icon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ICON } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7ui.icon;fontSize=8;fontColor=#ffffff;buttonText=;whiteSpace=wrap;align=center;',
  },
  _width: 40,
  _height: 36,
}

Icon grid

Preview
Usage
Definition

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

<IconGrid/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7ui.iconGrid;fillColor=#c0c0c0;gridSize=3,3;',
  },
  _width: 175,
  _height: 280,
}

Increase

Preview
Usage
Definition

import { Increase } from '@dinghy/diagrams/entitiesIos7Ui'

<Increase/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INCREASE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.increase;strokeColor=#0080f0;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Info

Preview
Usage
Definition

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

<Info/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.info;strokeColor=#0080f0;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

iPad (10'')

Preview
Usage
Definition

import { Ipad10 } from '@dinghy/diagrams/entitiesIos7Ui'

<Ipad10/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_10 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7.misc.ipad10inch;strokeColor=#c0c0c0;',
  },
  _width: 488,
  _height: 693,
}

iPad (13'')

Preview
Usage
Definition

import { Ipad13 } from '@dinghy/diagrams/entitiesIos7Ui'

<Ipad13/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_13 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7.misc.ipad13inch;strokeColor=#c0c0c0;',
  },
  _width: 572,
  _height: 813.0000000000001,
}

iPad (7'')

Preview
Usage
Definition

import { Ipad7 } from '@dinghy/diagrams/entitiesIos7Ui'

<Ipad7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPAD_7 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7.misc.ipad7inch;strokeColor=#c0c0c0;',
  },
  _width: 366,
  _height: 549,
}

iPhone (Portrait)

Preview
Usage
Definition

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

<IphonePortrait/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7.misc.iphone;strokeColor=#c0c0c0;',
  },
  _width: 200,
  _height: 400,
}

iPhone Keyboard (letters)

Preview
Usage
Definition

import { IphoneKeyboardLetters } from '@dinghy/diagrams/entitiesIos7Ui'

<IphoneKeyboardLetters/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPHONE_KEYBOARD_LETTERS } from '@dinghy/diagrams/entitiesIos7Ui'

<Shape 
  {...props}
  _style={extendStyle(props, IPHONE_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,
}

iPhone Keyboard (numbers)

Preview
Usage
Definition

import { IphoneKeyboardNumbers } from '@dinghy/diagrams/entitiesIos7Ui'

<IphoneKeyboardNumbers/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPHONE_KEYBOARD_NUMBERS } from '@dinghy/diagrams/entitiesIos7Ui'

<Shape 
  {...props}
  _style={extendStyle(props, IPHONE_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,
}

iPhone Keyboard (symbols)

Preview
Usage
Definition

import { IphoneKeyboardSymbols } from '@dinghy/diagrams/entitiesIos7Ui'

<IphoneKeyboardSymbols/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IPHONE_KEYBOARD_SYMBOLS } from '@dinghy/diagrams/entitiesIos7Ui'

<Shape 
  {...props}
  _style={extendStyle(props, IPHONE_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,
}

Keyboard

Preview
Usage
Definition

import { Keyboard } from '@dinghy/diagrams/entitiesIos7Ui'

<Keyboard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { KEYBOARD } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.keyboard_(letters);sketch=0;',
  },
  _width: 175,
  _height: 120,
}

Labels

Preview
Usage
Definition

import { Labels } from '@dinghy/diagrams/entitiesIos7Ui'

<Labels/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LABELS } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;fillColor=#F6F6F8;strokeColor=none;',
  },
  _width: 0,
  _height: 20,
}

Left

Preview
Usage
Definition

import { Left } from '@dinghy/diagrams/entitiesIos7Ui'

<Left/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LEFT } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.left;strokeColor=#0080f0;',
  },
  _width: 6,
  _height: 12,
}

Link

Preview
Usage
Definition

import { Link } from '@dinghy/diagrams/entitiesIos7Ui'

<Link/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LINK } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.link;fillColor=#4CDA64;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Loading Circle

Preview
Usage
Definition

import { LoadingCircle } from '@dinghy/diagrams/entitiesIos7Ui'

<LoadingCircle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LOADING_CIRCLE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.loading_circle;',
  },
  _original_width: 40,
  _original_height: 40,

}

Message

Preview
Usage
Definition

import { Message } from '@dinghy/diagrams/entitiesIos7Ui'

<Message/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;fillColor=#F7F7F7;strokeColor=none;',
  },
  _width: 164,
  _height: 20,
}

Message 2

Preview
Usage
Definition

import { Message2 } from '@dinghy/diagrams/entitiesIos7Ui'

<Message2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE_2 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=default;gradientColor=none;shadow=0;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 164,
  _height: 35,
}

Message 3

Preview
Usage
Definition

import { Message3 } from '@dinghy/diagrams/entitiesIos7Ui'

<Message3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE_3 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=#ffffff;gradientColor=none;shadow=0;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 164,
  _height: 100,
}

Message Bar

Preview
Usage
Definition

import { MessageBar } from '@dinghy/diagrams/entitiesIos7Ui'

<MessageBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MESSAGE_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.message_bar;strokeColor=#0080F0;fillColor=#e0e0e0',
  },
  _width: 175,
  _height: 28.000000000000004,
}

Misc Bar

Preview
Usage
Definition

import { MiscBar } from '@dinghy/diagrams/entitiesIos7Ui'

<MiscBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MISC_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.misc_bar;strokeColor=#0080F0;fillColor=#e0e0e0',
  },
  _width: 175,
  _height: 28.000000000000004,
}

Preview
Usage
Definition

import { More } from '@dinghy/diagrams/entitiesIos7Ui'

<More/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MORE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.more;strokeColor=#a0a0a0;',
  },
  _width: 5,
  _height: 8,
}

More 2

Preview
Usage
Definition

import { More2 } from '@dinghy/diagrams/entitiesIos7Ui'

<More2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MORE_2 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.more_2;strokeColor=#a0a0a0;',
  },
  _width: 6,
  _height: 8,
}

Night

Preview
Usage
Definition

import { Night } from '@dinghy/diagrams/entitiesIos7Ui'

<Night/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NIGHT } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.night;fillColor=#5855D6;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Notification

Preview
Usage
Definition

import { Notification } from '@dinghy/diagrams/entitiesIos7Ui'

<Notification/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NOTIFICATION } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.notification;fillColor=#FF3B2F;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Number Pad

Preview
Usage
Definition

import { NumberPad } from '@dinghy/diagrams/entitiesIos7Ui'

<NumberPad/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NUMBER_PAD } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.number_pad;strokeWidth=1;',
  },
  _width: 140,
  _height: 160,
}

On-off button (Off)

Preview
Usage
Definition

import { OnOffButtonOff } from '@dinghy/diagrams/entitiesIos7Ui'

<OnOffButtonOff/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ON_OFF_BUTTON_OFF } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7ui.onOffButton;buttonState=off;strokeColor=#38D145;strokeColor2=#aaaaaa;fillColor=#38D145;fillColor2=#ffffff;',
  },
  _width: 43.5,
  _height: 15,
}

On-off button (On)

Preview
Usage
Definition

import { OnOffButtonOn } from '@dinghy/diagrams/entitiesIos7Ui'

<OnOffButtonOn/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ON_OFF_BUTTON_ON } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7ui.onOffButton;buttonState=on;strokeColor=#38D145;strokeColor2=#aaaaaa;fillColor=#38D145;fillColor2=#ffffff;',
  },
  _width: 43.5,
  _height: 15,
}

Options

Preview
Usage
Definition

import { Options } from '@dinghy/diagrams/entitiesIos7Ui'

<Options/>

// or

import { extendStyle } from "@dinghy/base-components";
import { OPTIONS } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.options;fillColor=#222222;sketch=0;',
  },
  _width: 12,
  _height: 6,
}

Page control

Preview
Usage
Definition

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

<PageControl/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7ui.pageControl;fillColor=#222222;strokeColor=#aaaaaa;sketch=0;',
  },
  _width: 50,
  _height: 5,
}

Pause

Preview
Usage
Definition

import { Pause } from '@dinghy/diagrams/entitiesIos7Ui'

<Pause/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PAUSE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.pause;strokeColor=#0080f0;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Picker

Preview
Usage
Definition

import { Picker } from '@dinghy/diagrams/entitiesIos7Ui'

<Picker/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PICKER } from '@dinghy/diagrams/entitiesIos7Ui'

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

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

Remove

Preview
Usage
Definition

import { Remove } from '@dinghy/diagrams/entitiesIos7Ui'

<Remove/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REMOVE } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.remove;fillColor=#0080f0;strokeColor=#ffffff;sketch=0;',
  },
  _width: 16,
  _height: 12,
}

Right

Preview
Usage
Definition

import { Right } from '@dinghy/diagrams/entitiesIos7Ui'

<Right/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RIGHT } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.right;strokeColor=#0080f0;',
  },
  _width: 6,
  _height: 12,
}

Scroll (Horizontal)

Preview
Usage
Definition

import { ScrollHorizontal } from '@dinghy/diagrams/entitiesIos7Ui'

<ScrollHorizontal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCROLL_HORIZONTAL } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.scroll_(horizontal);fillColor=#a0a0a0;',
  },
  _width: 80,
  _height: 6,
}

Scroll (Vertical)

Preview
Usage
Definition

import { ScrollVertical } from '@dinghy/diagrams/entitiesIos7Ui'

<ScrollVertical/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCROLL_VERTICAL } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.scroll_(vertical);fillColor=#a0a0a0;',
  },
  _width: 6,
  _height: 80,
}

Preview
Usage
Definition

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

<SearchBox/>

// or

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

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

{
  _style: {
    entity: 'shape=rect;fillColor=#e0e0e0;strokeColor=none;',
  },
  _width: 0,
  _height: 20,
}

Preview
Usage
Definition

import { SearchBox2 } from '@dinghy/diagrams/entitiesIos7Ui'

<SearchBox2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SEARCH_BOX_2 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;fillColor=#F6F6F6;strokeColor=none;',
  },
  _width: 0,
  _height: 20,
}

Select

Preview
Usage
Definition

import { Select } from '@dinghy/diagrams/entitiesIos7Ui'

<Select/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SELECT } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.select;fillColor=#0080f0;strokeColor=#ffffff;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Select Bar

Preview
Usage
Definition

import { SelectBar } from '@dinghy/diagrams/entitiesIos7Ui'

<SelectBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SELECT_BAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=2;shadow=0;dashed=0;shape=mxgraph.ios7ui.selectBar;dx=120;dy=5;dx2=75;size=5;strokeColor=#ffffff;fillColor=#222222;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 165,
  _height: 27,
}

Select Bar 2

Preview
Usage
Definition

import { SelectBar2 } from '@dinghy/diagrams/entitiesIos7Ui'

<SelectBar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SELECT_BAR_2 } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=2;shadow=0;dashed=0;shape=mxgraph.ios7ui.selectBar;dx=120;dy=5;dx2=50;size=5;strokeColor=#ffffff;fillColor=#222222;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 165,
  _height: 27,
}

Settings

Preview
Usage
Definition

import { Settings } from '@dinghy/diagrams/entitiesIos7Ui'

<Settings/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SETTINGS } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.settings;fillColor=#8F8E94;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Slider

Preview
Usage
Definition

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

<Slider/>

// or

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

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.ios7ui.slider;barPos=20;strokeColor=#0080f0;strokeColor2=#a0a0a0;',
  },
  _width: 150,
  _height: 15,
}

Star

Preview
Usage
Definition

import { Star } from '@dinghy/diagrams/entitiesIos7Ui'

<Star/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STAR } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.star;fillColor=#0080f0;strokeColor=none;sketch=0;',
  },
  _original_width: 12,
  _original_height: 12,

}

Switch

Preview
Usage
Definition

import { Switch } from '@dinghy/diagrams/entitiesIos7Ui'

<Switch/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.switch;fillColor=#8F8E94;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.text_size;fillColor=#007AFF;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Travel

Preview
Usage
Definition

import { Travel } from '@dinghy/diagrams/entitiesIos7Ui'

<Travel/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRAVEL } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.travel;fillColor=#FF9501;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Up

Preview
Usage
Definition

import { Up } from '@dinghy/diagrams/entitiesIos7Ui'

<Up/>

// or

import { extendStyle } from "@dinghy/base-components";
import { UP } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;shadow=0;dashed=0;strokeWidth=2;shape=mxgraph.ios7.misc.up;strokeColor=#0080f0;',
  },
  _width: 12,
  _height: 6,
}

URL

Preview
Usage
Definition

import { Url } from '@dinghy/diagrams/entitiesIos7Ui'

<Url/>

// or

import { extendStyle } from "@dinghy/base-components";
import { URL } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7ui.url;fillColor=#e0e0e0;strokeColor=#c0c0c0;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;spacingTop=2;align=center;whiteSpace=wrap;',
  },
  _width: 165,
  _height: 12.5,
}

Volume Control

Preview
Usage
Definition

import { VolumeControl } from '@dinghy/diagrams/entitiesIos7Ui'

<VolumeControl/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VOLUME_CONTROL } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=none;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;',
  },
  _width: 160,
  _height: 14,
}

VPN

Preview
Usage
Definition

import { Vpn } from '@dinghy/diagrams/entitiesIos7Ui'

<Vpn/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VPN } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.vpn;fillColor=#007AFF;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

WiFi

Preview
Usage
Definition

import { Wifi } from '@dinghy/diagrams/entitiesIos7Ui'

<Wifi/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WIFI } from '@dinghy/diagrams/entitiesIos7Ui'

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

{
  _style: {
    entity: 'html=1;strokeWidth=1;shadow=0;dashed=0;shape=mxgraph.ios7.misc.wifi;fillColor=#007AFF;strokeColor=none;buttonText=;strokeColor2=#222222;fontColor=#222222;fontSize=8;verticalLabelPosition=bottom;verticalAlign=top;align=center;sketch=0;',
  },
  _original_width: 15,
  _original_height: 15,

}

Action Dialog​

Action Sheet​

Action Sheet 2​

Add​

Adjust​

Alert​

App Bar (landscape)​

App Bar (portrait)​

Bluetooth​

Broadcast​

Call Pad​

Cell list​

Check​

Circle​

Contacts Bar​

Current Location​

Delete​

Dialog​

Down​

Download bar​

Edit Bar​

Expand​

Flagged​

Horizontal button bar​

Icon​

Icon grid​

Increase​

Info​

iPad (10'')​

iPad (13'')​

iPad (7'')​

iPhone (Portrait)​

iPhone Keyboard (letters)​

iPhone Keyboard (numbers)​

iPhone Keyboard (symbols)​

Keyboard​

Labels​

Left​

Link​

Loading Circle​

Message​

Message 2​

Message 3​

Message Bar​

Misc Bar​

More​

More 2​

Night​

Notification​

Number Pad​

On-off button (Off)​

On-off button (On)​

Options​

Page control​

Pause​

Picker​

Remove​

Right​

Scroll (Horizontal)​

Scroll (Vertical)​

Search Box​

Search Box 2​

Select​

Select Bar​

Select Bar 2​

Settings​

Slider​

Star​

Switch​

Text Size​

Travel​

Up​

URL​

Volume Control​

VPN​

WiFi​

Action Dialog

Action Sheet

Action Sheet 2

Add

Adjust

Alert

App Bar (landscape)

App Bar (portrait)

Bluetooth

Broadcast

Call Pad

Cell list

Check

Circle

Contacts Bar

Current Location

Delete

Dialog

Down

Download bar

Edit Bar

Expand

Flagged

Horizontal button bar

Icon

Icon grid

Increase

Info

iPad (10'')

iPad (13'')

iPad (7'')

iPhone (Portrait)

iPhone Keyboard (letters)

iPhone Keyboard (numbers)

iPhone Keyboard (symbols)

Keyboard

Labels

Left

Link

Loading Circle

Message

Message 2

Message 3

Message Bar

Misc Bar

More

More 2

Night

Notification

Number Pad

On-off button (Off)

On-off button (On)

Options

Page control

Pause

Picker

Remove

Right

Scroll (Horizontal)

Scroll (Vertical)

Search Box

Search Box 2

Select

Select Bar

Select Bar 2

Settings

Slider

Star

Switch

Text Size

Travel

Up

URL

Volume Control

VPN

WiFi