Gmdl Buttons Entities

Dropdown Button

Preview

Usage

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

<DropdownButton/>

// or

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

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

Definition

{
  _style: {
    entity: 'dashed=0;align=center;fontSize=12;shape=rect;fillColor=#ffffff;strokeColor=#cccccc;whiteSpace=wrap;html=1;',
  },
  _width: 100,
  _height: 30,
}

Dropdown Button (Editable)

Preview

Usage

import { DropdownButtonEditable } from '@dinghy/diagrams/entitiesGmdlButtons'

<DropdownButtonEditable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_EDITABLE } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'dashed=0;align=center;fontSize=12;shape=rect;fillColor=#ffffff;strokeColor=#cccccc;',
  },
  _width: 100,
  _height: 40,
}

Dropdown Button (Selected, Editable)

Preview

Usage

import { DropdownButtonSelectedEditable } from '@dinghy/diagrams/entitiesGmdlButtons'

<DropdownButtonSelectedEditable/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_BUTTON_SELECTED_EDITABLE } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'swimlane;shape=rect;strokeColor=#CCCCCC;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;shadow=1;',
  },
  _width: 0,
  _height: 150,
}

Dropdown Menu

Preview

Usage

import { DropdownMenu } from '@dinghy/diagrams/entitiesGmdlButtons'

<DropdownMenu/>

// or

import { extendStyle } from "@dinghy/base-components";
import { DROPDOWN_MENU } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'swimlane;shape=rect;strokeColor=#eeeeee;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;shadow=1;',
  },
  _width: 0,
  _height: 180,
}

Floating Action Button

Preview

Usage

import { FloatingActionButton } from '@dinghy/diagrams/entitiesGmdlButtons'

<FloatingActionButton/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLOATING_ACTION_BUTTON } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;fillColor=#FF4081;strokeColor=none;shadow=1;aspect=fixed;sketch=0;html=1;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;',
  },
  _width: 0,
  _height: 56,
}

Floating Action Button 2

Preview

Usage

import { FloatingActionButton2 } from '@dinghy/diagrams/entitiesGmdlButtons'

<FloatingActionButton2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLOATING_ACTION_BUTTON_2 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;dashed=0;strokeColor=none;shadow=1;fontSize=13;align=center;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;html=1;aspect=fixed;',
  },
  _width: 0,
  _height: 56,
}

Floating action buttons

Preview

Usage

import { FloatingActionButtons } from '@dinghy/diagrams/entitiesGmdlButtons'

<FloatingActionButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLOATING_ACTION_BUTTONS } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#D1D3D4;shadow=1;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 50,
  _height: 156,
}

Floating action buttons 2

Preview

Usage

import { FloatingActionButtons2 } from '@dinghy/diagrams/entitiesGmdlButtons'

<FloatingActionButtons2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLOATING_ACTION_BUTTONS_2 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#FF4081;shadow=1;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 2,
  _height: 156,
}

Floating action buttons 3

Preview

Usage

import { FloatingActionButtons3 } from '@dinghy/diagrams/entitiesGmdlButtons'

<FloatingActionButtons3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { FLOATING_ACTION_BUTTONS_3 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'dashed=0;html=1;shape=mxgraph.gmdl.user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;',
  },
  _width: 50,
  _height: 456,
}

Persistent Footer Buttons

Preview

Usage

import { PersistentFooterButtons } from '@dinghy/diagrams/entitiesGmdlButtons'

<PersistentFooterButtons/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PERSISTENT_FOOTER_BUTTONS } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'swimlane;shape=rect;strokeColor=#EEEEEE;fillColor=#ffffff;fontColor=#2196F3;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: 40,
}

Raised Button (Focused)

Preview

Usage

import { RaisedButtonFocused } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonFocused/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_FOCUSED } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Hover)

Preview

Usage

import { RaisedButtonHover } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonHover/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_HOVER } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#999999;opacity=20;strokeColor=none;fontStyle=1;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Hover) 2

Preview

Usage

import { RaisedButtonHover2 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonHover2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_HOVER_2 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#cccccc;opacity=15;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Normal)

Preview

Usage

import { RaisedButtonNormal } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonNormal/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_NORMAL } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Normal) 2

Preview

Usage

import { RaisedButtonNormal2 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonNormal2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_NORMAL_2 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#2196F3;strokeColor=none;fontStyle=1;shadow=1;fontColor=#ffffff;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Normal) 3

Preview

Usage

import { RaisedButtonNormal3 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonNormal3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_NORMAL_3 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=none;strokeColor=none;fontStyle=1;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Normal) 4

Preview

Usage

import { RaisedButtonNormal4 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonNormal4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_NORMAL_4 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=none;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed)

Preview

Usage

import { RaisedButtonPressed } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#000000;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed) 2

Preview

Usage

import { RaisedButtonPressed2 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED_2 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed) 3

Preview

Usage

import { RaisedButtonPressed3 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED_3 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#999999;opacity=40;strokeColor=none;fontStyle=1;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed) 4

Preview

Usage

import { RaisedButtonPressed4 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed4/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED_4 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;opacity=26;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed) 5

Preview

Usage

import { RaisedButtonPressed5 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed5/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED_5 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=#cccccc;opacity=25;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
  },
  _width: 100,
  _height: 36,
}

Raised Button (Pressed) 6

Preview

Usage

import { RaisedButtonPressed6 } from '@dinghy/diagrams/entitiesGmdlButtons'

<RaisedButtonPressed6/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RAISED_BUTTON_PRESSED_6 } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'whiteSpace=wrap;html=1;dashed=0;align=center;fontSize=12;shape=rect;fillColor=none;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=1;',
  },
  _width: 100,
  _height: 36,
}

Related actions

Preview

Usage

import { RelatedActions } from '@dinghy/diagrams/entitiesGmdlButtons'

<RelatedActions/>

// or

import { extendStyle } from "@dinghy/base-components";
import { RELATED_ACTIONS } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=ellipse;strokeColor=none;fillColor=#ffffff;shadow=1;gradientColor=none;sketch=0;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;html=1;labelPosition=center;verticalLabelPosition=bottom;align=center;verticalAlign=top;',
  },
  _width: 200,
  _height: 40,
}

Toolbar

Preview

Usage

import { Toolbar } from '@dinghy/diagrams/entitiesGmdlButtons'

<Toolbar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { TOOLBAR } from '@dinghy/diagrams/entitiesGmdlButtons'

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

Definition

{
  _style: {
    entity: 'shape=rect;fillColor=#ffffff;strokeColor=none;graientColor=none;sketch=1;hachureGap=4;pointerEvents=0;fontFamily=Architects Daughter;fontSource=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DArchitects%2BDaughter;fontSize=20;',
  },
  _width: 358,
  _height: 64,
}