Gmdl Misc Entities

Background (Dark)

Preview

Usage

import { BackgroundDark } from '@dinghy/diagrams/entitiesGmdlMisc'

<BackgroundDark/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BACKGROUND_DARK } from '@dinghy/diagrams/entitiesGmdlMisc'

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

Definition

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

Background (Light)

Preview

Usage

import { BackgroundLight } from '@dinghy/diagrams/entitiesGmdlMisc'

<BackgroundLight/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BACKGROUND_LIGHT } from '@dinghy/diagrams/entitiesGmdlMisc'

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

Definition

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

Keyboard

Preview

Usage

import { Keyboard } from '@dinghy/diagrams/entitiesGmdlMisc'

<Keyboard/>

// or

import { extendStyle } from "@dinghy/base-components";
import { KEYBOARD } from '@dinghy/diagrams/entitiesGmdlMisc'

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

Definition

{
  _style: {
    entity: 'dashed=0;shape=rect;fillColor=#263238;strokeColor=none;aspect=fixed;',
  },
  _width: 358,
  _height: 224,
}

Snackbar

Preview

Usage

import { Snackbar } from '@dinghy/diagrams/entitiesGmdlMisc'

<Snackbar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { SNACKBAR } from '@dinghy/diagrams/entitiesGmdlMisc'

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

Definition

{
  _style: {
    entity: 'shape=rect;strokeColor=none;fillColor=#333333;fontColor=#FFFFFF;align=left;spacing=16;fontSize=13;spacingLeft=8;whiteSpace=wrap;html=1;',
  },
  _width: 0,
  _height: 48,
}