Mockup Buttons Entities

Button

Preview

Usage

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

<Button/>

// or

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

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.buttons.button;strokeColor=#666666;fontColor=#ffffff;mainText=;buttonStyle=round;fontSize=17;fontStyle=1;fillColor=#008cff;whiteSpace=wrap;',
  },
  _width: 150,
  _height: 50,
}

Formatted Button

Preview

Usage

import { FormattedButton } from '@dinghy/diagrams/entitiesMockupButtons'

<FormattedButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORMATTED_BUTTON } from '@dinghy/diagrams/entitiesMockupButtons'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.buttons.multiButton;fillColor=#008cff;strokeColor=#666666;mainText=;subText=;',
  },
  _width: 0,
  _height: 50,
}

Horizontal Button Bar

Preview

Usage

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

<HorizontalButtonBar/>

// or

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

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

Definition

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

On-off button

Preview

Usage

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

<OnOffButton/>

// or

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

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.buttons.onOffButton;gradientColor=none;strokeColor=#999999;buttonState=on;fillColor2=#008cff;fontColor=#ffffff;fontSize=17;mainText=;spacingRight=40;fontStyle=1;whiteSpace=wrap;',
  },
  _width: 150,
  _height: 50,
}

Vertical Button Bar

Preview

Usage

import { VerticalButtonBar } from '@dinghy/diagrams/entitiesMockupButtons'

<VerticalButtonBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_BUTTON_BAR } from '@dinghy/diagrams/entitiesMockupButtons'

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

Definition

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