Gmdl Sliders Entities

Discrete slider (click, dark)

Preview

Usage

import { DiscreteSliderClickDark } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClickDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK_DARK } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=0;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (click, dark) 2

Preview

Usage

import { DiscreteSliderClickDark2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClickDark2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK_DARK_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=60;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (click, dark) 3

Preview

Usage

import { DiscreteSliderClickDark3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClickDark3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK_DARK_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=100;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (click, light)

Preview

Usage

import { DiscreteSliderClickLight } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClickLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK_LIGHT } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=60;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (click, light) 2

Preview

Usage

import { DiscreteSliderClickLight2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClickLight2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK_LIGHT_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=100;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (click)

Preview

Usage

import { DiscreteSliderClick } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderClick/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_CLICK } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscreteDots;barPos=0;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (disabled)

Preview

Usage

import { DiscreteSliderDisabled } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderDisabled/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_DISABLED } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=0;html=1;',
  },
  _width: 200,
  _height: 20,
}

Discrete slider (focused)

Preview

Usage

import { DiscreteSliderFocused } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderFocused/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_FOCUSED } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscrete;barPos=1;strokeColor=#BEBEBE;opacity=100;strokeWidth=2;fillColor=#BEBEBE;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (focused) 2

Preview

Usage

import { DiscreteSliderFocused2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderFocused2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_FOCUSED_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscrete;barPos=60;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (focused) 3

Preview

Usage

import { DiscreteSliderFocused3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderFocused3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_FOCUSED_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDiscrete;barPos=100;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;html=1;',
  },
  _width: 200,
  _height: 45,
}

Discrete slider (normal, dark)

Preview

Usage

import { DiscreteSliderNormalDark } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderNormalDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_NORMAL_DARK } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=0;strokeColor=#ffffff;opacity=100;strokeWidth=2;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Discrete slider (normal, light)

Preview

Usage

import { DiscreteSliderNormalLight } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderNormalLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_NORMAL_LIGHT } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=0;opacity=100;strokeWidth=2;fillColor=#000000;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Discrete slider (normal)

Preview

Usage

import { DiscreteSliderNormal } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderNormal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_NORMAL } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=60;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Discrete slider (normal) 2

Preview

Usage

import { DiscreteSliderNormal2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<DiscreteSliderNormal2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DISCRETE_SLIDER_NORMAL_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=100;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Slider (click)

Preview

Usage

import { SliderClick } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderClick/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_CLICK } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;handleSize=20;shadow=0;html=1;',
  },
  _width: 200,
  _height: 20,
}

Slider (click) 2

Preview

Usage

import { SliderClick2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderClick2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_CLICK_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=20;shadow=0;html=1;',
  },
  _width: 200,
  _height: 20,
}

Slider (click) 3

Preview

Usage

import { SliderClick3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderClick3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_CLICK_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=20;shadow=0;html=1;',
  },
  _width: 200,
  _height: 20,
}

Slider (disabled)

Preview

Usage

import { SliderDisabled } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderDisabled/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_DISABLED } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=none;handleSize=6;shadow=0;hPos=0;html=1;',
  },
  _width: 210,
  _height: 20,
}

Slider (disabled) 2

Preview

Usage

import { SliderDisabled2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderDisabled2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_DISABLED_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=50;html=1;',
  },
  _width: 210,
  _height: 20,
}

Slider (disabled) 3

Preview

Usage

import { SliderDisabled3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderDisabled3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_DISABLED_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=100;html=1;',
  },
  _width: 210,
  _height: 20,
}

Slider (focused)

Preview

Usage

import { SliderFocused } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderFocused/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_FOCUSED } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderFocused;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;handleSize=30;shadow=0;html=1;',
  },
  _width: 200,
  _height: 30,
}

Slider (focused) 2

Preview

Usage

import { SliderFocused2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderFocused2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_FOCUSED_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderFocused;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=30;shadow=0;html=1;',
  },
  _width: 200,
  _height: 30,
}

Slider (focused) 3

Preview

Usage

import { SliderFocused3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderFocused3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_FOCUSED_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.sliderFocused;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=30;shadow=0;html=1;',
  },
  _width: 200,
  _height: 30,
}

Slider (normal)

Preview

Usage

import { SliderNormal } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderNormal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_NORMAL } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Slider (normal) 2

Preview

Usage

import { SliderNormal2 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderNormal2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_NORMAL_2 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}

Slider (normal) 3

Preview

Usage

import { SliderNormal3 } from '@dinghy/diagrams/entitiesGmdlSliders'

<SliderNormal3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SLIDER_NORMAL_3 } from '@dinghy/diagrams/entitiesGmdlSliders'

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

Definition

{
  _style: {
    entity: 'dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;shape=mxgraph.gmdl.slider2;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=10;shadow=0;html=1;',
  },
  _width: 200,
  _height: 10,
}