Gmdl Steppers Entities

Mobile step (text)

Preview

Usage

import { MobileStepText } from '@dinghy/diagrams/entitiesGmdlSteppers'

<MobileStepText/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MOBILE_STEP_TEXT } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'dashed=0;shape=rect;fillColor=#BDBDBD;strokeColor=none;',
  },
  _width: 358,
  _height: 642,
}

Mobile vertical stepper

Preview

Usage

import { MobileVerticalStepper } from '@dinghy/diagrams/entitiesGmdlSteppers'

<MobileVerticalStepper/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MOBILE_VERTICAL_STEPPER } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'dashed=0;shape=rect;fillColor=#ffffff;strokeColor=none;',
  },
  _width: 358,
  _height: 642,
}

Stepper

Preview

Usage

import { Stepper } from '@dinghy/diagrams/entitiesGmdlSteppers'

<Stepper/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=#ffffff;',
  },
  _width: 704,
  _height: 478,
}

Stepper with alternative label placing

Preview

Usage

import { StepperWithAlternativeLabelPlacing } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;align=center;verticalAlign=middle;html=1;',
  },
  _width: 404,
  _height: 50,
}

Stepper with alternative label placing 2

Preview

Usage

import { StepperWithAlternativeLabelPlacing2 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING_2 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;html=1;',
  },
  _width: 1,
  _height: 50,
}

Stepper with alternative label placing 3

Preview

Usage

import { StepperWithAlternativeLabelPlacing3 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING_3 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=line;strokeColor=#b3b3b3;',
  },
  _width: 2,
  _height: 50,
}

Stepper with alternative label placing 4

Preview

Usage

import { StepperWithAlternativeLabelPlacing4 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING_4 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;align=center;verticalAlign=middle;html=1;',
  },
  _width: 3,
  _height: 50,
}

Stepper with alternative label placing 5

Preview

Usage

import { StepperWithAlternativeLabelPlacing5 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING_5 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;html=1;',
  },
  _width: 6,
  _height: 50,
}

Stepper with alternative label placing 6

Preview

Usage

import { StepperWithAlternativeLabelPlacing6 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeLabelPlacing6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_LABEL_PLACING_6 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;html=1;',
  },
  _width: 7,
  _height: 50,
}

Stepper with alternative optional label placing

Preview

Usage

import { StepperWithAlternativeOptionalLabelPlacing } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeOptionalLabelPlacing/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_OPTIONAL_LABEL_PLACING } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;fontSize=12;align=center;verticalAlign=middle;html=1;',
  },
  _width: 404,
  _height: 50,
}

Stepper with alternative optional label placing 2

Preview

Usage

import { StepperWithAlternativeOptionalLabelPlacing2 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeOptionalLabelPlacing2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_OPTIONAL_LABEL_PLACING_2 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;fontSize=12;align=center;verticalAlign=middle;html=1;',
  },
  _width: 3,
  _height: 50,
}

Stepper with alternative optional label placing 3

Preview

Usage

import { StepperWithAlternativeOptionalLabelPlacing3 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeOptionalLabelPlacing3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_OPTIONAL_LABEL_PLACING_3 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=none;html=1;verticalAlign=top;fontColor=#4d4d4dlfontSize=13;spacingTop=-4;',
  },
  _width: 4,
  _height: 50,
}

Stepper with alternative optional label placing 4

Preview

Usage

import { StepperWithAlternativeOptionalLabelPlacing4 } from '@dinghy/diagrams/entitiesGmdlSteppers'

<StepperWithAlternativeOptionalLabelPlacing4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEPPER_WITH_ALTERNATIVE_OPTIONAL_LABEL_PLACING_4 } from '@dinghy/diagrams/entitiesGmdlSteppers'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 6,
  _height: 50,
}