Mockup Navigation Entities

Breadcrumb

Preview

Usage

import { Breadcrumb } from '@dinghy/diagrams/entitiesMockupNavigation'

<Breadcrumb/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BREADCRUMB } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.anchor;fontSize=17;fontColor=#666666;fontStyle=1;',
  },
  _width: 300,
  _height: 30,
}

Breadcrumb 2

Preview

Usage

import { Breadcrumb2 } from '@dinghy/diagrams/entitiesMockupNavigation'

<Breadcrumb2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BREADCRUMB_2 } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.anchor;fontSize=24;fontColor=#aaaaaa;fontStyle=1;',
  },
  _width: 1,
  _height: 30,
}

Breadcrumb 3

Preview

Usage

import { Breadcrumb3 } from '@dinghy/diagrams/entitiesMockupNavigation'

<Breadcrumb3/>

// or

import { extendStyle } from "@dinghy/base-components";
import { BREADCRUMB_3 } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.anchor;fontSize=17;fontColor=#008cff;fontStyle=1;',
  },
  _width: 6,
  _height: 30,
}

Cover Flow

Preview

Usage

import { CoverFlow } from '@dinghy/diagrams/entitiesMockupNavigation'

<CoverFlow/>

// or

import { extendStyle } from "@dinghy/base-components";
import { COVER_FLOW } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.navigation.coverFlow;strokeColor=#999999;',
  },
  _width: 400,
  _height: 200,
}

Horizontal Scroll Bar

Preview

Usage

import { HorizontalScrollBar } from '@dinghy/diagrams/entitiesMockupNavigation'

<HorizontalScrollBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { HORIZONTAL_SCROLL_BAR } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.navigation.scrollBar;strokeColor=#999999;barPos=20;fillColor2=#99ddff;strokeColor2=none;',
  },
  _width: 200,
  _height: 20,
}

Map Navigator

Preview

Usage

import { MapNavigator } from '@dinghy/diagrams/entitiesMockupNavigation'

<MapNavigator/>

// or

import { extendStyle } from "@dinghy/base-components";
import { MAP_NAVIGATOR } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.navigation.mapNavigator;fillColor2=#99ddff;strokeColor2=none;strokeColor3=#ffffff;strokeColor=#999999;',
  },
  _width: 60,
  _height: 100,
}

Page Control

Preview

Usage

import { PageControl } from '@dinghy/diagrams/entitiesMockupNavigation'

<PageControl/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PAGE_CONTROL } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.navigation.pageControl;fillColor=#999999;strokeColor=#ddeeff;',
  },
  _width: 100,
  _height: 30,
}

Pagination

Preview

Usage

import { Pagination } from '@dinghy/diagrams/entitiesMockupNavigation'

<Pagination/>

// or

import { extendStyle } from "@dinghy/base-components";
import { PAGINATION } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.pagination;linkText=;fontSize=17;fontColor=#0000ff;fontStyle=4;',
  },
  _width: 350,
  _height: 30,
}

Step Bar

Preview

Usage

import { StepBar } from '@dinghy/diagrams/entitiesMockupNavigation'

<StepBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEP_BAR } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.stepBar;strokeColor=#c4c4c4;textColor=#666666;textColor2=#008cff;mainText=,,+,;textSize=17;fillColor=#666666;overflow=fill;fontSize=17;fontColor=#666666;',
  },
  _width: 300,
  _height: 50,
}

Step Bar 2

Preview

Usage

import { StepBar2 } from '@dinghy/diagrams/entitiesMockupNavigation'

<StepBar2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { STEP_BAR_2 } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'strokeWidth=1;shadow=0;dashed=0;align=center;html=1;shape=mxgraph.mockup.navigation.stepBar;strokeColor=#c4c4c4;textColor=#666666;textColor2=#008cff;mainText=Layer 1,Layer 2,+Layer 3,Layer 4;textSize=17;fillColor=#666666;overflow=fill;fontSize=17;fontColor=#666666;',
  },
  _width: 300,
  _height: 50,
}

Vertical Scroll Bar

Preview

Usage

import { VerticalScrollBar } from '@dinghy/diagrams/entitiesMockupNavigation'

<VerticalScrollBar/>

// or

import { extendStyle } from "@dinghy/base-components";
import { VERTICAL_SCROLL_BAR } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.navigation.scrollBar;strokeColor=#999999;barPos=20;fillColor2=#99ddff;strokeColor2=none;direction=north;',
  },
  _width: 20,
  _height: 200,
}

Wheel Throbber 1

Preview

Usage

import { WheelThrobber1 } from '@dinghy/diagrams/entitiesMockupNavigation'

<WheelThrobber1/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WHEEL_THROBBER_1 } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.loading_circle_1;pointerEvents=1',
  },
  _original_width: 90,
  _original_height: 90,

}

Wheel Throbber 2

Preview

Usage

import { WheelThrobber2 } from '@dinghy/diagrams/entitiesMockupNavigation'

<WheelThrobber2/>

// or

import { extendStyle } from "@dinghy/base-components";
import { WHEEL_THROBBER_2 } from '@dinghy/diagrams/entitiesMockupNavigation'

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

Definition

{
  _style: {
    entity: 'verticalLabelPosition=bottom;shadow=0;dashed=0;align=center;html=1;verticalAlign=top;strokeWidth=1;shape=mxgraph.mockup.misc.loading_circle_2;pointerEvents=1',
  },
  _original_width: 90,
  _original_height: 90,

}