Angular VectorMap - controlBar
Configures the control bar.
Users can use the pan control and zoom bar in the control bar panel to navigate the map.
The following code shows how to use the controlBar object to move the control bar to the right side of the map:
jQuery
$(function() { $("#vectorMapContainer").dxVectorMap({ // ... controlBar: { horizontalAlignment: "right" } }); });
Angular
<dx-vector-map ... > <dxo-control-bar horizontalAlignment="right"> </dxo-control-bar> </dx-vector-map>
// ... import { DxVectorMapModule } from 'devextreme-angular'; @NgModule({ imports: [ // ... DxVectorMapModule ], // ... }) export class AppModule { }
Vue
<template> <DxVectorMap ... > <DxControlBar horizontal-alignment="right" /> </DxVectorMap> </template> <script> import { DxVectorMap, DxControlBar } from 'devextreme-vue/vector-map'; export default { components: { DxVectorMap, DxControlBar }, // ... } </script>
React
import React from 'react'; import { VectorMap, ControlBar } from 'devextreme-react/vector-map'; class App extends React.Component { render() { return ( <VectorMap> // ... <ControlBar horizontalAlignment="right" /> </VectorMap> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().VectorMap() @* ... *@ .ControlBar(cb => cb .HorizontalAlignment(HorizontalAlignment.Right) ) )
borderColor
Specifies a color for the outline of the control bar elements.
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
color
Specifies a color for the inner area of the control bar elements.
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
horizontalAlignment
Specifies the position of the control bar.
In addition to this option, use the verticalAlignment option to adjust the position of the control bar.
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left
, Center
, and Right
.
verticalAlignment
Specifies the position of the control bar.
In addition to this option, use the horizontalAlignment option to adjust the position of the control bar.
Use the VerticalEdge
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top
and Bottom
.
If you have technical questions, please create a support ticket in the DevExpress Support Center.