Gmdl Selection Controls Entities

Checkbox (off, disabled, light))

Preview

Usage

import { CheckboxOffDisabledLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOffDisabledLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_OFF_DISABLED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Checkbox (off, focused or pressed, light))

Preview

Usage

import { CheckboxOffFocusedOrPressedLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOffFocusedOrPressedLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_OFF_FOCUSED_OR_PRESSED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;labelPosition=right;align=left;strokeColor=none;fillColor=#666666;opacity=10;sketch=0;html=1;',
  },
  _width: 0,
  _height: 48,
}

Checkbox (off, hover, dark))

Preview

Usage

import { CheckboxOffHoverDark } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOffHoverDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_OFF_HOVER_DARK } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=#ffffff;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Checkbox (off, hover, light))

Preview

Usage

import { CheckboxOffHoverLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOffHoverLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_OFF_HOVER_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Checkbox (on, disabled, dark))

Preview

Usage

import { CheckboxOnDisabledDark } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOnDisabledDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_ON_DISABLED_DARK } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=none;fillColor=#676767;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Checkbox (on, disabled, focused, light))

Preview

Usage

import { CheckboxOnDisabledFocusedLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOnDisabledFocusedLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_ON_DISABLED_FOCUSED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;labelPosition=right;align=left;strokeColor=none;fillColor=#B0B0B0;opacity=10;sketch=0;html=1;',
  },
  _width: 0,
  _height: 48,
}

Checkbox (on, disabled, light))

Preview

Usage

import { CheckboxOnDisabledLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOnDisabledLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_ON_DISABLED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=none;fillColor=#B0B0B0;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Checkbox (on, focused or pressed))

Preview

Usage

import { CheckboxOnFocusedOrPressed } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOnFocusedOrPressed/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_ON_FOCUSED_OR_PRESSED } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;labelPosition=right;align=left;strokeColor=none;fillColor=#009587;opacity=10;sketch=0;html=1;',
  },
  _width: 0,
  _height: 48,
}

Checkbox (on, hover))

Preview

Usage

import { CheckboxOnHover } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<CheckboxOnHover/>

// or

import { extendStyle } from "@dinghy/base-components";
import { CHECKBOX_ON_HOVER } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.checkbox;strokeColor=none;fillColor=#009587;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (off, disabled, light))

Preview

Usage

import { RadioButtonOffDisabledLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOffDisabledLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_OFF_DISABLED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (off, hover, dark))

Preview

Usage

import { RadioButtonOffHoverDark } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOffHoverDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_OFF_HOVER_DARK } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#ffffff;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (off, hover, light))

Preview

Usage

import { RadioButtonOffHoverLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOffHoverLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_OFF_HOVER_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (on, disabled, dark))

Preview

Usage

import { RadioButtonOnDisabledDark } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOnDisabledDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_ON_DISABLED_DARK } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#676767;fillColor=#676767;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (on, disabled, light))

Preview

Usage

import { RadioButtonOnDisabledLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOnDisabledLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_ON_DISABLED_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#B0B0B0;fillColor=#B0B0B0;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Radio button (on, hover))

Preview

Usage

import { RadioButtonOnHover } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<RadioButtonOnHover/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RADIO_BUTTON_ON_HOVER } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.radiobutton;strokeColor=#009587;fillColor=#009587;strokeWidth=2;aspect=fixed;sketch=0;html=1;',
  },
  _width: 0,
  _height: 16,
}

Switch (off)

Preview

Usage

import { SwitchOff } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<SwitchOff/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH_OFF } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.switch;aspect=fixed;switchState=off;strokeColor=none;fillColor=#0E9D57;sketch=0;html=1;',
  },
  _width: 0,
  _height: 20,
}

Switch (on, dark)

Preview

Usage

import { SwitchOnDark } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<SwitchOnDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH_ON_DARK } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.switch;aspect=fixed;switchState=on;strokeColor=none;fillColor=#80CBC4;sketch=0;html=1;',
  },
  _width: 0,
  _height: 20,
}

Switch (on, light)

Preview

Usage

import { SwitchOnLight } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

<SwitchOnLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SWITCH_ON_LIGHT } from '@dinghy/diagrams/entitiesGmdlSelectionControls'

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

Definition

{
  _style: {
    entity: 'dashed=0;labelPosition=right;align=left;shape=mxgraph.gmdl.switch;aspect=fixed;switchState=on;strokeColor=none;fillColor=#0E9D57;sketch=0;html=1;',
  },
  _width: 0,
  _height: 20,
}