Mockup Text Entities
Alphanumeric
- Preview
- Usage
- Definition
import { Alphanumeric } from '@dinghy/diagrams/entitiesMockupText'
<Alphanumeric/>
// or
import { extendStyle } from "@dinghy/base-components";
import { ALPHANUMERIC } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, ALPHANUMERIC)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.alphanumeric;linkText=;html=1;fontStyle=4;fontSize=17;fontColor=#0000ff;',
},
_width: 450,
_height: 50,
}
Bulleted List
- Preview
- Usage
- Definition
import { BulletedList } from '@dinghy/diagrams/entitiesMockupText'
<BulletedList/>
// or
import { extendStyle } from "@dinghy/base-components";
import { BULLETED_LIST } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, BULLETED_LIST)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.bulletedList;textColor=#666666;mainText=,,,,;textSize=17;bulletStyle=none;strokeColor=none;fillColor=none;align=left;verticalAlign=top;fontSize=17;fontColor=#666666;',
},
_width: 150,
_height: 135,
}
Callout
- Preview
- Usage
- Definition
import { Callout } from '@dinghy/diagrams/entitiesMockupText'
<Callout/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CALLOUT } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, CALLOUT)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=NW;callStyle=line;fontSize=17;fontColor=#666666;align=left;verticalAlign=top;strokeColor=#666666;',
},
_width: 200,
_height: 100,
}
Callout 2
- Preview
- Usage
- Definition
import { Callout2 } from '@dinghy/diagrams/entitiesMockupText'
<Callout2/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CALLOUT_2 } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, CALLOUT_2)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=NE;callStyle=line;fontSize=17;fontColor=#666666;align=right;verticalAlign=top;strokeColor=#666666;',
},
_width: 200,
_height: 100,
}
Callout 3
- Preview
- Usage
- Definition
import { Callout3 } from '@dinghy/diagrams/entitiesMockupText'
<Callout3/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CALLOUT_3 } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, CALLOUT_3)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=SW;callStyle=line;fontSize=17;fontColor=#666666;align=left;verticalAlign=bottom;strokeColor=#666666;',
},
_width: 200,
_height: 100,
}
Callout 4
- Preview
- Usage
- Definition
import { Callout4 } from '@dinghy/diagrams/entitiesMockupText'
<Callout4/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CALLOUT_4 } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, CALLOUT_4)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.callout;linkText=;textSize=17;textColor=#666666;callDir=SE;callStyle=line;fontSize=17;fontColor=#666666;align=right;verticalAlign=bottom;strokeColor=#666666;',
},
_width: 200,
_height: 100,
}
Captcha
- Preview
- Usage
- Definition
import { Captcha } from '@dinghy/diagrams/entitiesMockupText'
<Captcha/>
// or
import { extendStyle } from "@dinghy/base-components";
import { CAPTCHA } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, CAPTCHA)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.captcha;fontColor=#666666;fontSize=25;strokeColor=#666666;mainText=',
},
_width: 150,
_height: 50,
}
Horizontal Button Bar
- Preview
- Usage
- Definition
import { HorizontalButtonBar } from '@dinghy/diagrams/entitiesMockupText'
<HorizontalButtonBar/>
// or
import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_BUTTON_BAR } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, HORIZONTAL_BUTTON_BAR)}
/>
{
_style: {
entity: 'swimlane;shape=mxgraph.bootstrap.anchor;strokeColor=#666666;fillColor=#ffffff;fontColor=#0000FF;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: 25,
}
Link
- Preview
- Usage
- Definition
import { Link } from '@dinghy/diagrams/entitiesMockupText'
<Link/>
// or
import { extendStyle } from "@dinghy/base-components";
import { LINK } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, LINK)}
/>
{
_style: {
entity: 'shape=rectangle;strokeColor=none;fillColor=none;linkText=;fontSize=17;fontColor=#0000ff;fontStyle=4;html=1;align=center;',
},
_width: 150,
_height: 30,
}
Paragraph of Text
- Preview
- Usage
- Definition
import { ParagraphOfText } from '@dinghy/diagrams/entitiesMockupText'
<ParagraphOfText/>
// or
import { extendStyle } from "@dinghy/base-components";
import { PARAGRAPH_OF_TEXT } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, PARAGRAPH_OF_TEXT)}
/>
{
_style: {
entity: 'text;spacingTop=-5;whiteSpace=wrap;html=1;align=left;fontSize=12;fontFamily=Helvetica;fillColor=none;strokeColor=none;',
},
_width: 250,
_height: 470,
}
Sticky Note
- Preview
- Usage
- Definition
import { StickyNote } from '@dinghy/diagrams/entitiesMockupText'
<StickyNote/>
// or
import { extendStyle } from "@dinghy/base-components";
import { STICKY_NOTE } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, STICKY_NOTE)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.stickyNote2;fontColor=#666666;mainText=;fontSize=17;whiteSpace=wrap;fillColor=#ffffcc;strokeColor=#F62E00;',
},
_original_width: 200,
_original_height: 200,
}
Text Box
- Preview
- Usage
- Definition
import { TextBox } from '@dinghy/diagrams/entitiesMockupText'
<TextBox/>
// or
import { extendStyle } from "@dinghy/base-components";
import { TEXT_BOX } from '@dinghy/diagrams/entitiesMockupText'
<Shape
{...props}
_style={extendStyle(props, TEXT_BOX)}
/>
{
_style: {
entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.text.textBox;fontColor=#666666;align=left;fontSize=17;spacingLeft=4;spacingTop=-3;whiteSpace=wrap;strokeColor=#666666;mainText=',
},
_width: 150,
_height: 30,
}