Software Bootstrap Entities

Alert

Preview
Usage
Definition

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

<Alert/>

// or

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

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#B8DCFE;strokeWidth=1;fillColor=#CCE7FE;fontColor=#004583;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 2

Preview
Usage
Definition

import { Alert2 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#D6D8DB;strokeWidth=1;fillColor=#E2E3E5;fontColor=#383D41;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 3

Preview
Usage
Definition

import { Alert3 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 4

Preview
Usage
Definition

import { Alert4 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#F4C5CB;strokeWidth=1;fillColor=#F8D6DA;fontColor=#711623;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 5

Preview
Usage
Definition

import { Alert5 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#FFECBC;strokeWidth=1;fillColor=#FFF1CF;fontColor=#856110;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 6

Preview
Usage
Definition

import { Alert6 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_6 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#BFE6EB;strokeWidth=1;fillColor=#D1EDF1;fontColor=#0E5560;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 7

Preview
Usage
Definition

import { Alert7 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_7 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#FDFDFE;strokeWidth=1;fillColor=#FEFEFE;fontColor=#818182;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 8

Preview
Usage
Definition

import { Alert8 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_8 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#C6C8CA;strokeWidth=1;fillColor=#D6D8D9;fontColor=#1B1E21;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;',
  },
  _width: 800,
  _height: 40,
}

Alert 9

Preview
Usage
Definition

import { Alert9 } from '@dinghy/diagrams/entitiesBootstrap'

<Alert9/>

// or

import { extendStyle } from "@dinghy/base-components";
import { ALERT_9 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E0F0D6;fontColor=#59B958;whiteSpace=wrap;align=left;verticalAlign=middle;spacing=20;',
  },
  _width: 800,
  _height: 210,
}

Badge

Preview
Usage
Definition

import { Badge } from '@dinghy/diagrams/entitiesBootstrap'

<Badge/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=1;fontSize=18;',
  },
  _width: 60,
  _height: 40,
}

Badge 2

Preview
Usage
Definition

import { Badge2 } from '@dinghy/diagrams/entitiesBootstrap'

<Badge2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontStyle=0;fontSize=14;',
  },
  _width: 0,
  _height: 40,
}

Badge, danger

Preview
Usage
Definition

import { BadgeDanger } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeDanger/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_DANGER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 60,
  _height: 20,
}

Badge, dark

Preview
Usage
Definition

import { BadgeDark } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_DARK } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 40,
  _height: 20,
}

Badge, info

Preview
Usage
Definition

import { BadgeInfo } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeInfo/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_INFO } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 35,
  _height: 20,
}

Badge, light

Preview
Usage
Definition

import { BadgeLight } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_LIGHT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 45,
  _height: 20,
}

Badge, primary

Preview
Usage
Definition

import { BadgePrimary } from '@dinghy/diagrams/entitiesBootstrap'

<BadgePrimary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_PRIMARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 60,
  _height: 20,
}

Badge, secondary

Preview
Usage
Definition

import { BadgeSecondary } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeSecondary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_SECONDARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 80,
  _height: 20,
}

Badge, success

Preview
Usage
Definition

import { BadgeSuccess } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeSuccess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_SUCCESS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 65,
  _height: 20,
}

Badge, warning

Preview
Usage
Definition

import { BadgeWarning } from '@dinghy/diagrams/entitiesBootstrap'

<BadgeWarning/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BADGE_WARNING } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=5;',
  },
  _width: 65,
  _height: 20,
}

Basic input group

Preview
Usage
Definition

import { BasicInputGroup } from '@dinghy/diagrams/entitiesBootstrap'

<BasicInputGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BASIC_INPUT_GROUP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=40;fontSize=14;',
  },
  _width: 0,
  _height: 330,
}

Basic input group 2

Preview
Usage
Definition

import { BasicInputGroup2 } from '@dinghy/diagrams/entitiesBootstrap'

<BasicInputGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BASIC_INPUT_GROUP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=none;fontColor=#212529;align=left;spacingLeft=0;fontSize=14;',
  },
  _width: 2,
  _height: 330,
}

Border spinner

Preview
Usage
Definition

import { BorderSpinner } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#0085FC;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 2

Preview
Usage
Definition

import { BorderSpinner2 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#6C767D;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 3

Preview
Usage
Definition

import { BorderSpinner3 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#34A64D;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 4

Preview
Usage
Definition

import { BorderSpinner4 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#DB2843;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 5

Preview
Usage
Definition

import { BorderSpinner5 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#FFBC26;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 6

Preview
Usage
Definition

import { BorderSpinner6 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_6 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#1CA5B8;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 7

Preview
Usage
Definition

import { BorderSpinner7 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_7 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#F8F9FA;',
  },
  _original_width: 30,
  _original_height: 30,

}

Border spinner 8

Preview
Usage
Definition

import { BorderSpinner8 } from '@dinghy/diagrams/entitiesBootstrap'

<BorderSpinner8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BORDER_SPINNER_8 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.basic.arc;startAngle=0.25;endAngle=1;strokeWidth=4;strokeColor=#343A40;',
  },
  _original_width: 30,
  _original_height: 30,

}

Preview
Usage
Definition

import { BreadcrumbOneLevel } from '@dinghy/diagrams/entitiesBootstrap'

<BreadcrumbOneLevel/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BREADCRUMB_ONE_LEVEL } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#E9ECEF;fontColor=#6C757D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=14;spacing=10;',
  },
  _width: 800,
  _height: 40,
}

Button group, horizontal

Preview
Usage
Definition

import { ButtonGroupHorizontal } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonGroupHorizontal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUP_HORIZONTAL } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Button group, vertical

Preview
Usage
Definition

import { ButtonGroupVertical } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonGroupVertical/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_GROUP_VERTICAL } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Button with spinner

Preview
Usage
Definition

import { ButtonWithSpinner } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonWithSpinner/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_WITH_SPINNER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;',
  },
  _width: 0,
  _height: 40,
}

Button with spinner 2

Preview
Usage
Definition

import { ButtonWithSpinner2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonWithSpinner2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_WITH_SPINNER_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#59AFFD;fontColor=#ffffff;align=right;spacing=10;',
  },
  _width: 0,
  _height: 40,
}

Button, danger

Preview
Usage
Definition

import { ButtonDanger } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonDanger/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DANGER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 80,
  _height: 40,
}

Button, danger 2

Preview
Usage
Definition

import { ButtonDanger2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonDanger2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DANGER_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DB2843;strokeWidth=1;fillColor=none;fontColor=#DB2843;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 80,
  _height: 40,
}

Button, dark

Preview
Usage
Definition

import { ButtonDark } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DARK } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 60,
  _height: 40,
}

Button, dark 2

Preview
Usage
Definition

import { ButtonDark2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonDark2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_DARK_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#343A40;strokeWidth=1;fillColor=none;fontColor=#343A40;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 60,
  _height: 40,
}

Button, info

Preview
Usage
Definition

import { ButtonInfo } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonInfo/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_INFO } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _original_width: 50,
  _original_height: 40,

}

Button, info 2

Preview
Usage
Definition

import { ButtonInfo2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonInfo2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_INFO_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#1CA5B8;strokeWidth=1;fillColor=none;fontColor=#1CA5B8;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _original_width: 50,
  _original_height: 40,

}

Button, light

Preview
Usage
Definition

import { ButtonLight } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LIGHT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 60,
  _height: 40,
}

Button, light 2

Preview
Usage
Definition

import { ButtonLight2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonLight2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LIGHT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#F8F9FA;strokeWidth=1;fillColor=none;fontColor=#F8F9FA;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 60,
  _height: 40,
}

Button, link

Preview
Usage
Definition

import { ButtonLink } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonLink/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_LINK } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 60,
  _height: 40,
}

Button, primary

Preview
Usage
Definition

import { ButtonPrimary } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonPrimary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 80,
  _height: 40,
}

Button, primary 2

Preview
Usage
Definition

import { ButtonPrimary2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonPrimary2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_PRIMARY_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#0085FC;strokeWidth=1;fillColor=none;fontColor=#0085FC;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 80,
  _height: 40,
}

Button, secondary

Preview
Usage
Definition

import { ButtonSecondary } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonSecondary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SECONDARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 100,
  _height: 40,
}

Button, secondary 2

Preview
Usage
Definition

import { ButtonSecondary2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonSecondary2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SECONDARY_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#6C767D;strokeWidth=1;fillColor=none;fontColor=#6C767D;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 100,
  _height: 40,
}

Button, success

Preview
Usage
Definition

import { ButtonSuccess } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonSuccess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SUCCESS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 90,
  _height: 40,
}

Button, success 2

Preview
Usage
Definition

import { ButtonSuccess2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonSuccess2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_SUCCESS_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#33A64C;strokeWidth=1;fillColor=none;fontColor=#33A64C;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 90,
  _height: 40,
}

Button, warning

Preview
Usage
Definition

import { ButtonWarning } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonWarning/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_WARNING } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#FFFFFF;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 90,
  _height: 40,
}

Button, warning 2

Preview
Usage
Definition

import { ButtonWarning2 } from '@dinghy/diagrams/entitiesBootstrap'

<ButtonWarning2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BUTTON_WARNING_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#FFBC26;strokeWidth=1;fillColor=none;fontColor=#FFBC26;whiteSpace=wrap;align=center;verticalAlign=middle;spacingLeft=0;fontStyle=0;fontSize=16;spacing=5;',
  },
  _width: 90,
  _height: 40,
}

Card

Preview
Usage
Definition

import { Card } from '@dinghy/diagrams/entitiesBootstrap'

<Card/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=50;fontSize=14;',
  },
  _width: 0,
  _height: 350,
}

Card 2

Preview
Usage
Definition

import { Card2 } from '@dinghy/diagrams/entitiesBootstrap'

<Card2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;',
  },
  _width: 0,
  _height: 190,
}

Card 3

Preview
Usage
Definition

import { Card3 } from '@dinghy/diagrams/entitiesBootstrap'

<Card3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;spacingBottom=130;fontSize=14;',
  },
  _width: 0,
  _height: 450,
}

Card 4

Preview
Usage
Definition

import { Card4 } from '@dinghy/diagrams/entitiesBootstrap'

<Card4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#2D3338;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#ffffff;verticalAlign=middle;align=center;spacing=20;fontSize=60;',
  },
  _width: 0,
  _height: 280,
}

Card 5

Preview
Usage
Definition

import { Card5 } from '@dinghy/diagrams/entitiesBootstrap'

<Card5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;fontSize=14;spacingLeft=170;',
  },
  _width: 0,
  _height: 240,
}

Card group

Preview
Usage
Definition

import { CardGroup } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;',
  },
  _width: 0,
  _height: 360,
}

Card group 2

Preview
Usage
Definition

import { CardGroup2 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=160;',
  },
  _width: 0,
  _height: 360,
}

Card group 3

Preview
Usage
Definition

import { CardGroup3 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=30;spacingBottom=0;fontSize=14;spacingTop=0;',
  },
  _width: 1,
  _height: 600,
}

Card group 4

Preview
Usage
Definition

import { CardGroup4 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#0085FC;fontColor=#FFFFFF;verticalAlign=top;align=center;spacing=10;fontSize=14;',
  },
  _width: 3,
  _height: 600,
}

Card group 5

Preview
Usage
Definition

import { CardGroup5 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=center;spacing=10;spacingBottom=0;fontSize=14;spacingTop=0;',
  },
  _width: 4,
  _height: 600,
}

Card group 6

Preview
Usage
Definition

import { CardGroup6 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_6 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;verticalAlign=middle;align=center;spacing=10;spacingBottom=0;fontSize=14;spacingTop=0;',
  },
  _width: 5,
  _height: 600,
}

Card group 7

Preview
Usage
Definition

import { CardGroup7 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_7 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=right;spacing=30;spacingBottom=0;fontSize=14;spacingTop=0;',
  },
  _width: 6,
  _height: 600,
}

Card group 8

Preview
Usage
Definition

import { CardGroup8 } from '@dinghy/diagrams/entitiesBootstrap'

<CardGroup8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_GROUP_8 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=top;align=left;spacing=20;spacingBottom=0;fontSize=14;spacingTop=0;',
  },
  _width: 7,
  _height: 600,
}

Card with header and footer

Preview
Usage
Definition

import { CardWithHeaderAndFooter } from '@dinghy/diagrams/entitiesBootstrap'

<CardWithHeaderAndFooter/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CARD_WITH_HEADER_AND_FOOTER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;',
  },
  _width: 0,
  _height: 190,
}

Carousel

Preview
Usage
Definition

import { Carousel } from '@dinghy/diagrams/entitiesBootstrap'

<Carousel/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CAROUSEL } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;strokeColor=none;strokeWidth=1;fillColor=#777777;fontColor=#555555;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=40;',
  },
  _width: 800,
  _height: 300,
}

Checkbox without label

Preview
Usage
Definition

import { CheckboxWithoutLabel } from '@dinghy/diagrams/entitiesBootstrap'

<CheckboxWithoutLabel/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_WITHOUT_LABEL } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _original_width: 10,
  _original_height: 10,

}

Custom input group

Preview
Usage
Definition

import { CustomInputGroup } from '@dinghy/diagrams/entitiesBootstrap'

<CustomInputGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CUSTOM_INPUT_GROUP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=80;spacing=15;fontSize=14;',
  },
  _width: 0,
  _height: 40,
}

Custom input group 2

Preview
Usage
Definition

import { CustomInputGroup2 } from '@dinghy/diagrams/entitiesBootstrap'

<CustomInputGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CUSTOM_INPUT_GROUP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;fontSize=14;',
  },
  _width: 0,
  _height: 40,
}

Custom input group 3

Preview
Usage
Definition

import { CustomInputGroup3 } from '@dinghy/diagrams/entitiesBootstrap'

<CustomInputGroup3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CUSTOM_INPUT_GROUP_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacing=15;spacingLeft=80;fontSize=14;',
  },
  _width: 0,
  _height: 40,
}

Danger card

Preview
Usage
Definition

import { DangerCard } from '@dinghy/diagrams/entitiesBootstrap'

<DangerCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DANGER_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#BA2239;html=1;whiteSpace=wrap;fillColor=#DB2843;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Danger card 2

Preview
Usage
Definition

import { DangerCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<DangerCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DANGER_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DB2843;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#DB2843;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Dark card

Preview
Usage
Definition

import { DarkCard } from '@dinghy/diagrams/entitiesBootstrap'

<DarkCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DARK_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#2C3136;html=1;whiteSpace=wrap;fillColor=#343A40;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Dark card 2

Preview
Usage
Definition

import { DarkCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<DarkCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DARK_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#6C767D;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Preview
Usage
Definition

import { DefaultSizeDropdownButton } from '@dinghy/diagrams/entitiesBootstrap'

<DefaultSizeDropdownButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DEFAULT_SIZE_DROPDOWN_BUTTON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=0;spacing=17;',
  },
  _width: 0,
  _height: 40,
}

Preview
Usage
Definition

import { DropdownButton } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=20;',
  },
  _width: 0,
  _height: 40,
}

Preview
Usage
Definition

import { DropdownButton2 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownButton4 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#006AC9;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownButton5 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownButton7 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton7/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_7 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownButton8 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton8/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_8 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownButton9 } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownButton9/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_9 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;',
  },
  _width: 0,
  _height: 153,
}

Preview
Usage
Definition

import { DropdownWithRightAlignedMenu } from '@dinghy/diagrams/entitiesBootstrap'

<DropdownWithRightAlignedMenu/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_WITH_RIGHT_ALIGNED_MENU } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingLeft=10;spacingRight=20;',
  },
  _width: 0,
  _height: 153,
}

Dropleft button

Preview
Usage
Definition

import { DropleftButton } from '@dinghy/diagrams/entitiesBootstrap'

<DropleftButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPLEFT_BUTTON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#ffffff;whiteSpace=wrap;align=right;verticalAlign=middle;fontStyle=0;fontSize=14;spacingRight=10;',
  },
  _width: 0,
  _height: 40,
}

File browser

Preview
Usage
Definition

import { FileBrowser } from '@dinghy/diagrams/entitiesBootstrap'

<FileBrowser/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FILE_BROWSER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#7D868C;align=left;spacingLeft=0;spacing=15;fontSize=14;',
  },
  _width: 0,
  _height: 30,
}

File input form

Preview
Usage
Definition

import { FileInputForm } from '@dinghy/diagrams/entitiesBootstrap'

<FileInputForm/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FILE_INPUT_FORM } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=#FEFEFE;strokeColor=#AAAAAA;fontSize=14;gradientColor=#F0F0F0;',
  },
  _width: 1,
  _height: 70,
}

File input form 2

Preview
Usage
Definition

import { FileInputForm2 } from '@dinghy/diagrams/entitiesBootstrap'

<FileInputForm2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FILE_INPUT_FORM_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=14;spacing=5;',
  },
  _width: 2,
  _height: 70,
}

Form

Preview
Usage
Definition

import { Form } from '@dinghy/diagrams/entitiesBootstrap'

<Form/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=14;',
  },
  _width: 0,
  _height: 500,
}

Form 2

Preview
Usage
Definition

import { Form2 } from '@dinghy/diagrams/entitiesBootstrap'

<Form2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;',
  },
  _width: 1,
  _height: 500,
}

Form 3

Preview
Usage
Definition

import { Form3 } from '@dinghy/diagrams/entitiesBootstrap'

<Form3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;spacing=2;fontSize=12;fontColor=#999999;',
  },
  _width: 2,
  _height: 500,
}

Form 4

Preview
Usage
Definition

import { Form4 } from '@dinghy/diagrams/entitiesBootstrap'

<Form4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=2;fillColor=#EDEDED;strokeColor=#999999;align=left;fontSize=14;fontColor=#000000;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=5;spacingTop=-2;gradientColor=#DEDEDE;',
  },
  _width: 5,
  _height: 500,
}

Form 5

Preview
Usage
Definition

import { Form5 } from '@dinghy/diagrams/entitiesBootstrap'

<Form5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;',
  },
  _width: 6,
  _height: 500,
}

Form groups

Preview
Usage
Definition

import { FormGroups } from '@dinghy/diagrams/entitiesBootstrap'

<FormGroups/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FORM_GROUPS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#212529;',
  },
  _width: 0,
  _height: 150,
}

Grid layout

Preview
Usage
Definition

import { GridLayout } from '@dinghy/diagrams/entitiesBootstrap'

<GridLayout/>

// or

import { extendStyle } from "@dinghy/base-components";
import { GRID_LAYOUT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;strokeColor=#999999;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 14,
  _height: 360,
}

Help text

Preview
Usage
Definition

import { HelpText } from '@dinghy/diagrams/entitiesBootstrap'

<HelpText/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HELP_TEXT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#E9ECEF;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;',
  },
  _width: 1,
  _height: 240,
}

Help text 2

Preview
Usage
Definition

import { HelpText2 } from '@dinghy/diagrams/entitiesBootstrap'

<HelpText2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HELP_TEXT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 4,
  _height: 240,
}

Help text 3

Preview
Usage
Definition

import { HelpText3 } from '@dinghy/diagrams/entitiesBootstrap'

<HelpText3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HELP_TEXT_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacing=15;fontSize=14;fontColor=#6C767D;',
  },
  _width: 1,
  _height: 240,
}

Help text 4

Preview
Usage
Definition

import { HelpText4 } from '@dinghy/diagrams/entitiesBootstrap'

<HelpText4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HELP_TEXT_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#ffffff;strokeColor=#CED4DA;align=left;spacingLeft=50;fontSize=14;fontColor=#6C767D;',
  },
  _width: 5,
  _height: 240,
}

Horizontal form

Preview
Usage
Definition

import { HorizontalForm } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalForm/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=1;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 5,
  _height: 200,
}

Horizontal form 2

Preview
Usage
Definition

import { HorizontalForm2 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalForm2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=0;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 6,
  _height: 200,
}

Horizontal form 3

Preview
Usage
Definition

import { HorizontalForm3 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalForm3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#D2D2D2;checked=0;spacing=5;fontColor=#7D868C;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 7,
  _height: 200,
}

Horizontal form 4

Preview
Usage
Definition

import { HorizontalForm4 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalForm4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#666666;checked=1;spacing=5;fontColor=#212529;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 9,
  _height: 200,
}

Horizontal form 5

Preview
Usage
Definition

import { HorizontalForm5 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalForm5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;fontSize=14;fontColor=#FFFFFF;sketch=0;',
  },
  _width: 10,
  _height: 200,
}

Horizontal form label sizing

Preview
Usage
Definition

import { HorizontalFormLabelSizing } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalFormLabelSizing/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_LABEL_SIZING } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=12;fontColor=#212529;',
  },
  _width: 0,
  _height: 110,
}

Horizontal form label sizing 2

Preview
Usage
Definition

import { HorizontalFormLabelSizing2 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalFormLabelSizing2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_LABEL_SIZING_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=12;fontColor=#6C767D;',
  },
  _width: 1,
  _height: 110,
}

Horizontal form label sizing 3

Preview
Usage
Definition

import { HorizontalFormLabelSizing3 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalFormLabelSizing3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_LABEL_SIZING_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=16;fontColor=#212529;',
  },
  _width: 4,
  _height: 110,
}

Horizontal form label sizing 4

Preview
Usage
Definition

import { HorizontalFormLabelSizing4 } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalFormLabelSizing4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_FORM_LABEL_SIZING_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=none;strokeColor=#999999;align=left;spacing=15;fontSize=16;fontColor=#6C767D;',
  },
  _width: 5,
  _height: 110,
}

Preview
Usage
Definition

import { HorizontalNavigation } from '@dinghy/diagrams/entitiesBootstrap'

<HorizontalNavigation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_NAVIGATION } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Image

Preview
Usage
Definition

import { Image } from '@dinghy/diagrams/entitiesBootstrap'

<Image/>

// or

import { extendStyle } from "@dinghy/base-components";
import { IMAGE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#000000;verticalAlign=bottom;align=left;spacing=20;fontSize=14;',
  },
  _width: 0,
  _height: 260,
}

Info card

Preview
Usage
Definition

import { InfoCard } from '@dinghy/diagrams/entitiesBootstrap'

<InfoCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFO_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#188C9C;html=1;whiteSpace=wrap;fillColor=#1CA5B8;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Info card 2

Preview
Usage
Definition

import { InfoCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<InfoCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INFO_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#1CA5B8;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#1CA5B8;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Inline checkboxes

Preview
Usage
Definition

import { InlineCheckboxes } from '@dinghy/diagrams/entitiesBootstrap'

<InlineCheckboxes/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_CHECKBOXES } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 0,
  _height: 10,
}

Inline checkboxes 2

Preview
Usage
Definition

import { InlineCheckboxes2 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineCheckboxes2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_CHECKBOXES_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;strokeColor=#D0D0D0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 2,
  _height: 10,
}

Inline form

Preview
Usage
Definition

import { InlineForm } from '@dinghy/diagrams/entitiesBootstrap'

<InlineForm/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_FORM } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;align=left;spacing=15;fontSize=14;fontColor=#6C767D;',
  },
  _width: 0,
  _height: 30,
}

Inline form 2

Preview
Usage
Definition

import { InlineForm2 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineForm2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_FORM_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;align=left;spacingLeft=50;fontSize=14;fontColor=#6C767D;',
  },
  _width: 1,
  _height: 30,
}

Inline form 3

Preview
Usage
Definition

import { InlineForm3 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineForm3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_FORM_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;strokeColor=#A6A6A6;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 2,
  _height: 30,
}

Inline form 4

Preview
Usage
Definition

import { InlineForm4 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineForm4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_FORM_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;',
  },
  _width: 3,
  _height: 30,
}

Inline form 5

Preview
Usage
Definition

import { InlineForm5 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineForm5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_FORM_5 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#0085FC;strokeColor=none;align=center;spacing=15;fontSize=14;fontColor=#ffffff;sketch=0;',
  },
  _width: 2,
  _height: 30,
}

Inline radio buttons

Preview
Usage
Definition

import { InlineRadioButtons } from '@dinghy/diagrams/entitiesBootstrap'

<InlineRadioButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_RADIO_BUTTONS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 0,
  _height: 10,
}

Inline radio buttons 2

Preview
Usage
Definition

import { InlineRadioButtons2 } from '@dinghy/diagrams/entitiesBootstrap'

<InlineRadioButtons2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { INLINE_RADIO_BUTTONS_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;strokeColor=#D0D0D0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;',
  },
  _width: 2,
  _height: 10,
}

Jumbotron

Preview
Usage
Definition

import { Jumbotron } from '@dinghy/diagrams/entitiesBootstrap'

<Jumbotron/>

// or

import { extendStyle } from "@dinghy/base-components";
import { JUMBOTRON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;html=1;whiteSpace=wrap;fillColor=#E9ECEF;fontColor=#474E4F;align=left;spacing=15;fontSize=14;verticalAlign=top;spacingTop=40;',
  },
  _width: 0,
  _height: 300,
}

Preview
Usage
Definition

import { LargeDropdownButton } from '@dinghy/diagrams/entitiesBootstrap'

<LargeDropdownButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LARGE_DROPDOWN_BUTTON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=18;spacing=20;',
  },
  _width: 0,
  _height: 50,
}

Light card

Preview
Usage
Definition

import { LightCard } from '@dinghy/diagrams/entitiesBootstrap'

<LightCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIGHT_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#D2D3D4;html=1;whiteSpace=wrap;fillColor=#F8F9FA;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Light card 2

Preview
Usage
Definition

import { LightCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<LightCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIGHT_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#F8F9FA;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#212529;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

List Group

Preview
Usage
Definition

import { ListGroup } from '@dinghy/diagrams/entitiesBootstrap'

<ListGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_GROUP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=0;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;whiteSpace=wrap;html=1;strokeColor=none;fillColor=none;',
  },
  _width: 0,
  _height: 120,
}

List group 2

Preview
Usage
Definition

import { ListGroup2 } from '@dinghy/diagrams/entitiesBootstrap'

<ListGroup2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_GROUP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;',
  },
  _width: 1,
  _height: 120,
}

List Group, horizontal

Preview
Usage
Definition

import { ListGroupHorizontal } from '@dinghy/diagrams/entitiesBootstrap'

<ListGroupHorizontal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_GROUP_HORIZONTAL } from '@dinghy/diagrams/entitiesBootstrap'

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

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

List with divider

Preview
Usage
Definition

import { ListWithDivider } from '@dinghy/diagrams/entitiesBootstrap'

<ListWithDivider/>

// or

import { extendStyle } from "@dinghy/base-components";
import { LIST_WITH_DIVIDER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#ffffff;strokeColor=#999999;',
  },
  _width: 0,
  _height: 345,
}

Media object

Preview
Usage
Definition

import { MediaObject } from '@dinghy/diagrams/entitiesBootstrap'

<MediaObject/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MEDIA_OBJECT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;html=1;whiteSpace=wrap;fillColor=#868E96;fontColor=#DEE2E6;',
  },
  _width: 0,
  _height: 90,
}

Media object 2

Preview
Usage
Definition

import { MediaObject2 } from '@dinghy/diagrams/entitiesBootstrap'

<MediaObject2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MEDIA_OBJECT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontColor=#000000;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=left;spacing=2;fontSize=14;verticalAlign=top;html=1;',
  },
  _width: 1,
  _height: 90,
}

Preview
Usage
Definition

import { ModalTitle } from '@dinghy/diagrams/entitiesBootstrap'

<ModalTitle/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MODAL_TITLE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;html=1;strokeColor=#C8C8C8;fillColor=#ffffff;whiteSpace=wrap;verticalAlign=top;align=left;fontSize=18;spacing=15;spacingTop=-5;',
  },
  _width: 0,
  _height: 200,
}

Nav with list-group

Preview
Usage
Definition

import { NavWithListGroup } from '@dinghy/diagrams/entitiesBootstrap'

<NavWithListGroup/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAV_WITH_LIST_GROUP } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Preview
Usage
Definition

import { Navbar } from '@dinghy/diagrams/entitiesBootstrap'

<Navbar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarBlue } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarBlue/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_BLUE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#0085FC;strokeColor=none;fontSize=16;fontColor=#ffffff;align=left;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarDark } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_DARK } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#343A40;strokeColor=none;fontSize=16;fontColor=#ffffff;align=left;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarLight } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_LIGHT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#E3F3FD;strokeColor=none;fontSize=16;fontColor=#ffffff;align=left;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarWithImage } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarWithImage/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_WITH_IMAGE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#181819;align=left;spacing=2;spacingLeft=55;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarWithInlineElement } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarWithInlineElement/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_WITH_INLINE_ELEMENT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#7C7C7D;align=left;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { NavbarWithText } from '@dinghy/diagrams/entitiesBootstrap'

<NavbarWithText/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NAVBAR_WITH_TEXT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;fillColor=#F8F9FA;strokeColor=none;fontSize=16;fontColor=#7C7C7D;align=right;spacing=15;',
  },
  _width: 0,
  _height: 60,
}

Nested nav

Preview
Usage
Definition

import { NestedNav } from '@dinghy/diagrams/entitiesBootstrap'

<NestedNav/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NESTED_NAV } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=#F8F9FA;strokeColor=none;align=left;fontSize=14;fontColor=#323232;',
  },
  _width: 0,
  _height: 330,
}

Nested nav 2

Preview
Usage
Definition

import { NestedNav2 } from '@dinghy/diagrams/entitiesBootstrap'

<NestedNav2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { NESTED_NAV_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;align=left;fontSize=14;fontColor=#323232;html=1;whiteSpace=wrap;verticalAlign=top;spacingRight=25;',
  },
  _width: 1,
  _height: 330,
}

Pagination

Preview
Usage
Definition

import { Pagination } from '@dinghy/diagrams/entitiesBootstrap'

<Pagination/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PAGINATION } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Pill badge, danger

Preview
Usage
Definition

import { PillBadgeDanger } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeDanger/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_DANGER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#DB2843;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 65,
  _height: 20,
}

Pill badge, dark

Preview
Usage
Definition

import { PillBadgeDark } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_DARK } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#343A40;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 50,
  _height: 20,
}

Pill badge, info

Preview
Usage
Definition

import { PillBadgeInfo } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeInfo/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_INFO } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#1CA5B8;fontColor=#ffffff;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 45,
  _height: 20,
}

Pill badge, light

Preview
Usage
Definition

import { PillBadgeLight } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_LIGHT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#F8F9FA;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 55,
  _height: 20,
}

Pill badge, primary

Preview
Usage
Definition

import { PillBadgePrimary } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgePrimary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_PRIMARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#0085FC;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 70,
  _height: 20,
}

Pill badge, secondary

Preview
Usage
Definition

import { PillBadgeSecondary } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeSecondary/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_SECONDARY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#6C767D;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 90,
  _height: 20,
}

Pill badge, success

Preview
Usage
Definition

import { PillBadgeSuccess } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeSuccess/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_SUCCESS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#33A64C;fontColor=#FFFFFF;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 75,
  _height: 20,
}

Pill badge, warning

Preview
Usage
Definition

import { PillBadgeWarning } from '@dinghy/diagrams/entitiesBootstrap'

<PillBadgeWarning/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PILL_BADGE_WARNING } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'rounded=1;whiteSpace=wrap;html=1;arcSize=50;strokeColor=none;strokeWidth=1;fillColor=#FFBC26;fontColor=#000000;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=0;fontStyle=1;fontSize=14;spacing=10;',
  },
  _width: 75,
  _height: 20,
}

Preview
Usage
Definition

import { Popover } from '@dinghy/diagrams/entitiesBootstrap'

<Popover/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POPOVER } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#ffffff;strokeColor=#CCCCCC;dx=35;dy=5;rSize=5;direction=south;whiteSpace=wrap;verticalAlign=bottom;spacing=5;fontSize=10;spacingLeft=5;align=left;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { PopoverOnTop } from '@dinghy/diagrams/entitiesBootstrap'

<PopoverOnTop/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POPOVER_ON_TOP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#ffffff;strokeColor=#CCCCCC;dx=100;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=10;spacingLeft=0;align=left;spacingTop=-5;',
  },
  _width: 0,
  _height: 80,
}

Preview
Usage
Definition

import { PopoverOnTop2 } from '@dinghy/diagrams/entitiesBootstrap'

<PopoverOnTop2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { POPOVER_ON_TOP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;',
  },
  _width: 1,
  _height: 80,
}

Primary card

Preview
Usage
Definition

import { PrimaryCard } from '@dinghy/diagrams/entitiesBootstrap'

<PrimaryCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRIMARY_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#0071D5;html=1;whiteSpace=wrap;fillColor=#0085FC;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Primary card 2

Preview
Usage
Definition

import { PrimaryCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<PrimaryCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PRIMARY_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#0085FC;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#0085FC;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Progress bar

Preview
Usage
Definition

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

<ProgressBar/>

// or

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

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#E9ECEF;strokeColor=none;',
  },
  _width: 0,
  _height: 20,
}

Progress bar, striped, blue

Preview
Usage
Definition

import { ProgressBarStripedBlue } from '@dinghy/diagrams/entitiesBootstrap'

<ProgressBarStripedBlue/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PROGRESS_BAR_STRIPED_BLUE } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;fillColor=#f6f6f6;whiteSpace=wrap;',
  },
  _width: 0,
  _height: 20,
}

Range input

Preview
Usage
Definition

import { RangeInput } from '@dinghy/diagrams/entitiesBootstrap'

<RangeInput/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RANGE_INPUT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rangeInput;dx=0.78;strokeColor=#9D968E;fillColor=#E3DDD8;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=bottom;fontStyle=0;fontSize=14;labelPosition=center;verticalLabelPosition=top;gradientColor=#F4F2EF;gradientDirection=north;rangeStyle=rect;handleStyle=rect;',
  },
  _width: 800,
  _height: 20,
}

Range input 2

Preview
Usage
Definition

import { RangeInput2 } from '@dinghy/diagrams/entitiesBootstrap'

<RangeInput2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RANGE_INPUT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rangeInput;dx=0.6;strokeColor=#0085FC;fillColor=#DEE2E6;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=bottom;fontStyle=0;fontSize=14;labelPosition=center;verticalLabelPosition=top;',
  },
  _width: 800,
  _height: 20,
}

Readonly input

Preview
Usage
Definition

import { ReadonlyInput } from '@dinghy/diagrams/entitiesBootstrap'

<ReadonlyInput/>

// or

import { extendStyle } from "@dinghy/base-components";
import { READONLY_INPUT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#CED4DA;strokeWidth=1;fillColor=#E9ECEF;fontColor=#505050;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontSize=14;',
  },
  _width: 800,
  _height: 40,
}

Readonly plain text

Preview
Usage
Definition

import { ReadonlyPlainText } from '@dinghy/diagrams/entitiesBootstrap'

<ReadonlyPlainText/>

// or

import { extendStyle } from "@dinghy/base-components";
import { READONLY_PLAIN_TEXT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;',
  },
  _width: 0,
  _height: 90,
}

Readonly plain text 2

Preview
Usage
Definition

import { ReadonlyPlainText2 } from '@dinghy/diagrams/entitiesBootstrap'

<ReadonlyPlainText2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { READONLY_PLAIN_TEXT_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;',
  },
  _width: 1,
  _height: 90,
}

Readonly plain text 3

Preview
Usage
Definition

import { ReadonlyPlainText3 } from '@dinghy/diagrams/entitiesBootstrap'

<ReadonlyPlainText3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { READONLY_PLAIN_TEXT_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#999999;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=15;',
  },
  _width: 3,
  _height: 90,
}

Readonly plain text 4

Preview
Usage
Definition

import { ReadonlyPlainText4 } from '@dinghy/diagrams/entitiesBootstrap'

<ReadonlyPlainText4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { READONLY_PLAIN_TEXT_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=none;fillColor=#0085FC;fontColor=#ffffff;whiteSpace=wrap;align=center;verticalAlign=middle;fontStyle=0;fontSize=14;spacing=14;',
  },
  _width: 2,
  _height: 40,
}

Scrollspy

Preview
Usage
Definition

import { Scrollspy } from '@dinghy/diagrams/entitiesBootstrap'

<Scrollspy/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCROLLSPY } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=#F8F9FA;strokeColor=none;align=left;fontSize=14;spacing=10;',
  },
  _width: 0,
  _height: 300,
}

Scrollspy 2

Preview
Usage
Definition

import { Scrollspy2 } from '@dinghy/diagrams/entitiesBootstrap'

<Scrollspy2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SCROLLSPY_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'fillColor=none;strokeColor=none;perimeter=none;whiteSpace=wrap;fontColor=#212529;html=1;align=left;verticalAlign=top;spacingRight=25;',
  },
  _width: 1,
  _height: 300,
}

Secondary card

Preview
Usage
Definition

import { SecondaryCard } from '@dinghy/diagrams/entitiesBootstrap'

<SecondaryCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SECONDARY_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#5B646A;html=1;whiteSpace=wrap;fillColor=#6C767D;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Secondary card 2

Preview
Usage
Definition

import { SecondaryCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<SecondaryCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SECONDARY_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#6C767D;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#6C767D;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Preview
Usage
Definition

import { SmallDropdownButton } from '@dinghy/diagrams/entitiesBootstrap'

<SmallDropdownButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SMALL_DROPDOWN_BUTTON } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#505050;strokeWidth=1;fillColor=#ffffff;fontColor=#777777;whiteSpace=wrap;align=left;verticalAlign=middle;fontStyle=0;fontSize=12;spacing=15;',
  },
  _width: 0,
  _height: 30,
}

Stacked checkboxes

Preview
Usage
Definition

import { StackedCheckboxes } from '@dinghy/diagrams/entitiesBootstrap'

<StackedCheckboxes/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STACKED_CHECKBOXES } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=1;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 0,
  _height: 30,
}

Stacked checkboxes 2

Preview
Usage
Definition

import { StackedCheckboxes2 } from '@dinghy/diagrams/entitiesBootstrap'

<StackedCheckboxes2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STACKED_CHECKBOXES_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.checkbox2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 1,
  _height: 30,
}

Stacked radio buttons

Preview
Usage
Definition

import { StackedRadioButtons } from '@dinghy/diagrams/entitiesBootstrap'

<StackedRadioButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STACKED_RADIO_BUTTONS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=1;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 0,
  _height: 50,
}

Stacked radio buttons 2

Preview
Usage
Definition

import { StackedRadioButtons2 } from '@dinghy/diagrams/entitiesBootstrap'

<StackedRadioButtons2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STACKED_RADIO_BUTTONS_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 1,
  _height: 50,
}

Stacked radio buttons 3

Preview
Usage
Definition

import { StackedRadioButtons3 } from '@dinghy/diagrams/entitiesBootstrap'

<StackedRadioButtons3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STACKED_RADIO_BUTTONS_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.radioButton2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;gradientColor=#DEDEDE;fillColor=#EDEDED;checked=0;spacing=5;fontColor=#6C767D;checkedFill=#0085FC;checkedStroke=#ffffff;sketch=0;',
  },
  _width: 2,
  _height: 50,
}

Success card

Preview
Usage
Definition

import { SuccessCard } from '@dinghy/diagrams/entitiesBootstrap'

<SuccessCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUCCESS_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#2B8D40;html=1;whiteSpace=wrap;fillColor=#33A64C;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Success card 2

Preview
Usage
Definition

import { SuccessCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<SuccessCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SUCCESS_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#33A64C;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#33A64C;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Switch

Preview
Usage
Definition

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

<Switch/>

// or

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

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.switch;strokeColor=#ADB6BD;strokeWidth=1;fillColor=#ffffff;fontColor=#212529;onStrokeColor=#ffffff;onFillColor=#0085FC;align=left;verticalAlign=middle;spacingLeft=10;labelPosition=right;verticalLabelPosition=middle;buttonState=0;sketch=0;',
  },
  _width: 20,
  _height: 10,
}

Switch 2

Preview
Usage
Definition

import { Switch2 } from '@dinghy/diagrams/entitiesBootstrap'

<Switch2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.switch;strokeColor=#ADB6BD;strokeWidth=1;fillColor=#E9ECEF;fontColor=#7D868C;onStrokeColor=#ffffff;onFillColor=#0085FC;align=left;verticalAlign=middle;spacingLeft=10;labelPosition=right;verticalLabelPosition=middle;buttonState=0;sketch=0;',
  },
  _width: 20,
  _height: 10,
}

Tabs

Preview
Usage
Definition

import { Tabs } from '@dinghy/diagrams/entitiesBootstrap'

<Tabs/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.tabTop;strokeColor=#DFDFDF;fillColor=#ffffff;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#4B5259;',
  },
  _width: 0,
  _height: 45,
}

Tabs 2

Preview
Usage
Definition

import { Tabs2 } from '@dinghy/diagrams/entitiesBootstrap'

<Tabs2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;',
  },
  _width: 1,
  _height: 45,
}

Tabs 3

Preview
Usage
Definition

import { Tabs3 } from '@dinghy/diagrams/entitiesBootstrap'

<Tabs3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS_3 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;fontColor=#4B5259;',
  },
  _width: 3,
  _height: 45,
}

Tabs 4

Preview
Usage
Definition

import { Tabs4 } from '@dinghy/diagrams/entitiesBootstrap'

<Tabs4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS_4 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'shape=line;strokeColor=#dddddd;',
  },
  _width: 4,
  _height: 45,
}

Tabs with description

Preview
Usage
Definition

import { TabsWithDescription } from '@dinghy/diagrams/entitiesBootstrap'

<TabsWithDescription/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS_WITH_DESCRIPTION } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;whiteSpace=wrap;html=1;align=left;verticalAlign=top;fontSize=14;',
  },
  _width: 4,
  _height: 135,
}

Preview
Usage
Definition

import { TabsWithDropdown } from '@dinghy/diagrams/entitiesBootstrap'

<TabsWithDropdown/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TABS_WITH_DROPDOWN } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'strokeColor=none;fillColor=none;rSize=5;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=20;fontSize=14;fontColor=#0085FC;spacingRight=10;',
  },
  _width: 1,
  _height: 45,
}

Text

Preview
Usage
Definition

import { Text } from '@dinghy/diagrams/entitiesBootstrap'

<Text/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TEXT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#999999;strokeWidth=1;fillColor=#FFFFFF;fontColor=#6C767D;whiteSpace=wrap;align=left;verticalAlign=middle;spacingLeft=10;fontSize=14;spacing=10;',
  },
  _width: 170,
  _height: 160,
}

Toast

Preview
Usage
Definition

import { Toast } from '@dinghy/diagrams/entitiesBootstrap'

<Toast/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOAST } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFE0E0;html=1;whiteSpace=wrap;fillColor=#FEFEFE;fontColor=#212529;align=left;spacing=15;verticalAlign=bottom;',
  },
  _width: 0,
  _height: 80,
}

Preview
Usage
Definition

import { TooltipOnBottom } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipOnBottom/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_ON_BOTTOM } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#1A1A1A;strokeColor=none;dx=55;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-5;fontColor=#FFFFFF;direction=west;spacingBottom=0;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { TooltipOnLeft } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipOnLeft/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_ON_LEFT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#1A1A1A;strokeColor=none;dx=12;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;direction=north;spacingRight=5;',
  },
  _width: 0,
  _height: 30,
}

Preview
Usage
Definition

import { TooltipOnRight } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipOnRight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_ON_RIGHT } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#1A1A1A;strokeColor=none;dx=12;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;direction=south;spacingLeft=5;',
  },
  _width: 0,
  _height: 30,
}

Preview
Usage
Definition

import { TooltipOnTop } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipOnTop/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_ON_TOP } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#1A1A1A;strokeColor=none;dx=45;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;',
  },
  _width: 0,
  _height: 60,
}

Preview
Usage
Definition

import { TooltipOnTop2 } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipOnTop2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_ON_TOP_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;fillColor=#6C767D;strokeColor=none;perimeter=none;whiteSpace=wrap;resizeWidth=1;align=center;spacing=5;fontColor=#FFFFFF;fontSize=14;',
  },
  _width: 1,
  _height: 60,
}

Preview
Usage
Definition

import { TooltipWithHtml } from '@dinghy/diagrams/entitiesBootstrap'

<TooltipWithHtml/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLTIP_WITH_HTML } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.popover;fillColor=#1A1A1A;strokeColor=none;dx=60;dy=5;rSize=5;whiteSpace=wrap;verticalAlign=top;spacing=10;fontSize=12;spacingLeft=0;align=center;spacingTop=-10;fontColor=#FFFFFF;',
  },
  _width: 0,
  _height: 60,
}

Two cards

Preview
Usage
Definition

import { TwoCards } from '@dinghy/diagrams/entitiesBootstrap'

<TwoCards/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TWO_CARDS } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#DFDFDF;html=1;whiteSpace=wrap;fillColor=#FFFFFF;fontColor=#000000;align=left;verticalAlign=top;spacing=20;fontSize=14;',
  },
  _width: 0,
  _height: 190,
}

Preview
Usage
Definition

import { VerticalNavigation } from '@dinghy/diagrams/entitiesBootstrap'

<VerticalNavigation/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_NAVIGATION } from '@dinghy/diagrams/entitiesBootstrap'

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

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

Warning card

Preview
Usage
Definition

import { WarningCard } from '@dinghy/diagrams/entitiesBootstrap'

<WarningCard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WARNING_CARD } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#D89F20;html=1;whiteSpace=wrap;fillColor=#FFBC26;fontColor=#ffffff;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Warning card 2

Preview
Usage
Definition

import { WarningCard2 } from '@dinghy/diagrams/entitiesBootstrap'

<WarningCard2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WARNING_CARD_2 } from '@dinghy/diagrams/entitiesBootstrap'

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

{
  _style: {
    entity: 'html=1;shadow=0;dashed=0;shape=mxgraph.bootstrap.rrect;rSize=5;strokeColor=#FFBC26;html=1;whiteSpace=wrap;fillColor=#ffffff;fontColor=#FFBC26;verticalAlign=bottom;align=left;spacing=20;spacingBottom=0;fontSize=14;',
  },
  _width: 0,
  _height: 180,
}

Alert​

Alert 2​

Alert 3​

Alert 4​

Alert 5​

Alert 6​

Alert 7​

Alert 8​

Alert 9​

Badge​

Badge 2​

Badge, danger​

Badge, dark​

Badge, info​

Badge, light​

Badge, primary​

Badge, secondary​

Badge, success​

Badge, warning​

Basic input group​

Basic input group 2​

Border spinner​

Border spinner 2​

Border spinner 3​

Border spinner 4​

Border spinner 5​

Border spinner 6​

Border spinner 7​

Border spinner 8​

Breadcrumb, one level​

Button group, horizontal​

Button group, vertical​

Button with spinner​

Button with spinner 2​

Button, danger​

Button, danger 2​

Button, dark​

Button, dark 2​

Button, info​

Button, info 2​

Button, light​

Button, light 2​

Button, link​

Button, primary​

Button, primary 2​

Button, secondary​

Button, secondary 2​

Button, success​

Button, success 2​

Button, warning​

Button, warning 2​

Card​

Card 2​

Card 3​

Card 4​

Card 5​

Card group​

Card group 2​

Card group 3​

Card group 4​

Card group 5​

Card group 6​

Card group 7​

Card group 8​

Card with header and footer​

Carousel​

Checkbox without label​

Custom input group​

Custom input group 2​

Custom input group 3​

Danger card​

Danger card 2​

Dark card​

Dark card 2​

Default size dropdown button​

Dropdown button​

Dropdown button 2​

Dropdown button 4​

Dropdown button 5​

Dropdown button 7​

Alert

Alert 2

Alert 3

Alert 4

Alert 5

Alert 6

Alert 7

Alert 8

Alert 9

Badge

Badge 2

Badge, danger

Badge, dark

Badge, info

Badge, light

Badge, primary

Badge, secondary

Badge, success

Badge, warning

Basic input group

Basic input group 2

Border spinner

Border spinner 2

Border spinner 3

Border spinner 4

Border spinner 5

Border spinner 6

Border spinner 7

Border spinner 8

Breadcrumb, one level

Button group, horizontal

Button group, vertical

Button with spinner

Button with spinner 2

Button, danger

Button, danger 2

Button, dark

Button, dark 2

Button, info

Button, info 2

Button, light

Button, light 2

Button, link

Button, primary

Button, primary 2

Button, secondary

Button, secondary 2

Button, success

Button, success 2

Button, warning

Button, warning 2

Card

Card 2

Card 3

Card 4

Card 5

Card group

Card group 2

Card group 3

Card group 4

Card group 5

Card group 6

Card group 7

Card group 8

Card with header and footer

Carousel

Checkbox without label

Custom input group

Custom input group 2

Custom input group 3

Danger card

Danger card 2

Dark card

Dark card 2

Default size dropdown button

Dropdown button

Dropdown button 2

Dropdown button 4

Dropdown button 5

Dropdown button 7