Mockup Misc Entities

Copyright

Preview
Usage
Definition

import { Copyright } from '@dinghy/diagrams/entitiesMockupMisc'

<Copyright/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COPYRIGHT } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.copyrightIcon;',
  },
  _original_width: 25,
  _original_height: 25,

}

Edit Icon

Preview
Usage
Definition

import { EditIcon } from '@dinghy/diagrams/entitiesMockupMisc'

<EditIcon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { EDIT_ICON } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.editIcon;',
  },
  _original_width: 50,
  _original_height: 50,

}

Help Icon

Preview
Usage
Definition

import { HelpIcon } from '@dinghy/diagrams/entitiesMockupMisc'

<HelpIcon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HELP_ICON } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.help_icon;',
  },
  _original_width: 32,
  _original_height: 32,

}

Horizontal Ruler

Preview
Usage
Definition

import { HorizontalRuler } from '@dinghy/diagrams/entitiesMockupMisc'

<HorizontalRuler/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_RULER } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.misc.ruler2;dx=100;rulerOrient=down;unitSize=10;fontColor=#999999;spacingLeft=96;align=left;verticalAlign=middle;spacingBottom=10;spacingTop=0;spacingRight=0;spacing=0;strokeColor=#999999;',
  },
  _width: 350,
  _height: 30,
}

Horizontal Ruler 2

Preview
Usage
Definition

import { HorizontalRuler2 } from '@dinghy/diagrams/entitiesMockupMisc'

<HorizontalRuler2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_RULER_2 } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.misc.ruler2;dx=100;rulerOrient=up;unitSize=10;fontColor=#999999;spacingLeft=96;align=left;verticalAlign=middle;spacingBottom=0;spacingTop=10;spacingRight=0;spacing=0;strokeColor=#999999;',
  },
  _width: 350,
  _height: 30,
}

Mail

Preview
Usage
Definition

import { Mail } from '@dinghy/diagrams/entitiesMockupMisc'

<Mail/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MAIL } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.mail2;strokeColor=#999999;',
  },
  _width: 100,
  _height: 60,
}

Preview
Usage
Definition

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

<Pin/>

// or

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

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

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

Pin 2

Preview
Usage
Definition

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

<Pin2/>

// or

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

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

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

Pin 3

Preview
Usage
Definition

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

<Pin3/>

// or

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

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

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

Pin 4

Preview
Usage
Definition

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

<Pin4/>

// or

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

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

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

Pin 5

Preview
Usage
Definition

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

<Pin5/>

// or

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

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

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

Playback Controls

Preview
Usage
Definition

import { PlaybackControls } from '@dinghy/diagrams/entitiesMockupMisc'

<PlaybackControls/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PLAYBACK_CONTROLS } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.playbackControls;sketch=0;strokeColor=#999999;fillColor2=#99ddff;strokeColor2=none;fillColor3=#ffffff;strokeColor3=none;',
  },
  _width: 250,
  _height: 30,
}

Print Icon

Preview
Usage
Definition

import { PrintIcon } from '@dinghy/diagrams/entitiesMockupMisc'

<PrintIcon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRINT_ICON } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.printIcon;',
  },
  _original_width: 50,
  _original_height: 50,

}

Progress Bar

Preview
Usage
Definition

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

<ProgressBar/>

// or

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

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.progressBar;fillColor=#cccccc;strokeColor=none;fillColor2=#99ddff;barPos=80;',
  },
  _width: 200,
  _height: 20,
}

Rating

Preview
Usage
Definition

import { Rating } from '@dinghy/diagrams/entitiesMockupMisc'

<Rating/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RATING } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.rating;strokeColor=#999999;fillColor=#ffff00;emptyFillColor=#ffffff;grade=4;ratingScale=5;ratingStyle=star;',
  },
  _width: 225,
  _height: 30,
}

Registered

Preview
Usage
Definition

import { Registered } from '@dinghy/diagrams/entitiesMockupMisc'

<Registered/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REGISTERED } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.registeredIcon;',
  },
  _original_width: 25,
  _original_height: 25,

}

Revision Table

Preview
Usage
Definition

import { RevisionTable } from '@dinghy/diagrams/entitiesMockupMisc'

<RevisionTable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { REVISION_TABLE } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.misc.rrect;rSize=0;strokeColor=#666666;',
  },
  _width: 0,
  _height: 75,
}

Preview
Usage
Definition

import { ShareIcon } from '@dinghy/diagrams/entitiesMockupMisc'

<ShareIcon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SHARE_ICON } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.shareIcon;',
  },
  _original_width: 50,
  _original_height: 50,

}

Shopping Cart

Preview
Usage
Definition

import { ShoppingCart } from '@dinghy/diagrams/entitiesMockupMisc'

<ShoppingCart/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SHOPPING_CART } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.shoppingCart;strokeColor=#999999;',
  },
  _original_width: 50,
  _original_height: 50,

}

Status Bar

Preview
Usage
Definition

import { StatusBar } from '@dinghy/diagrams/entitiesMockupMisc'

<StatusBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STATUS_BAR } from '@dinghy/diagrams/entitiesMockupMisc'

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

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

Trashcan Icon

Preview
Usage
Definition

import { TrashcanIcon } from '@dinghy/diagrams/entitiesMockupMisc'

<TrashcanIcon/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TRASHCAN_ICON } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.trashcanIcon;',
  },
  _original_width: 50,
  _original_height: 50,

}

Vertical Ruler

Preview
Usage
Definition

import { VerticalRuler } from '@dinghy/diagrams/entitiesMockupMisc'

<VerticalRuler/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_RULER } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.misc.ruler2;dx=100;rulerOrient=down;unitSize=10;fontColor=#999999;spacingLeft=96;align=left;verticalAlign=middle;spacingBottom=10;spacingTop=0;spacingRight=0;rotation=-90;spacing=0;strokeColor=#999999;',
  },
  _width: 350,
  _height: 30,
}

Vertical Ruler 2

Preview
Usage
Definition

import { VerticalRuler2 } from '@dinghy/diagrams/entitiesMockupMisc'

<VerticalRuler2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_RULER_2 } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.misc.ruler2;dx=100;rulerOrient=up;unitSize=10;fontColor=#999999;spacingLeft=96;align=left;verticalAlign=middle;spacingBottom=0;spacingTop=10;spacingRight=0;rotation=-90;spacing=0;strokeColor=#999999;',
  },
  _width: 350,
  _height: 30,
}

Volume

Preview
Usage
Definition

import { Volume } from '@dinghy/diagrams/entitiesMockupMisc'

<Volume/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VOLUME } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'strokeColor=#999999;verticalLabelPosition=bottom;shadow=0;dashed=0;verticalAlign=top;strokeWidth=2;html=1;shape=mxgraph.mockup.misc.volumeIcon;',
  },
  _original_width: 25,
  _original_height: 25,

}

Volume Slider

Preview
Usage
Definition

import { VolumeSlider } from '@dinghy/diagrams/entitiesMockupMisc'

<VolumeSlider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VOLUME_SLIDER } from '@dinghy/diagrams/entitiesMockupMisc'

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

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.volumeSlider;barPos=80;fillColor=#cccccc;strokeColor=#999999;fillColor2=#ddeeff;',
  },
  _width: 250,
  _height: 30,
}

Copyright​

Edit Icon​

Help Icon​

Horizontal Ruler​

Horizontal Ruler 2​

Mail​

Pin​

Pin 2​

Pin 3​

Pin 4​

Pin 5​

Playback Controls​

Print Icon​

Progress Bar​

Rating​

Registered​

Revision Table​

Share Icon​

Shopping Cart​

Status Bar​

Trashcan Icon​

Vertical Ruler​

Vertical Ruler 2​

Volume​

Volume Slider​

Copyright

Edit Icon

Help Icon

Horizontal Ruler

Horizontal Ruler 2

Mail

Pin

Pin 2

Pin 3

Pin 4

Pin 5

Playback Controls

Print Icon

Progress Bar

Rating

Registered

Revision Table

Share Icon

Shopping Cart

Status Bar

Trashcan Icon

Vertical Ruler

Vertical Ruler 2

Volume

Volume Slider