Mockup Navigation Entities
Breadcrumb
- Preview
- Usage
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition

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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition

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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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
- Definition
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)}
/>
{
_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,
}