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,
}
Pin
- 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,
}
Share Icon
- 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,
}