Component Styling

Geocortex Web Components support fully custom styling using CSS. However, by using Geocortex Web layout components, you can take advantage of styled, well tested, UI components that already participate in the application theme.

• Component
• CSS
• UI

import React from "react";

import {

LayoutElement,

LayoutElementProperties,

} from "@vertigis/web/components";

import List from "@vertigis/web/ui/List";

import ListItem from "@vertigis/web/ui/ListItem";

import TitleBar from "@vertigis/web/ui/TitleBar";

import Button from "@vertigis/web/ui/Button";

import ExampleComponentModel from "./ExampleComponentModel";

import "./ExampleComponent.css";

export default function ExampleComponent(

props: LayoutElementProperties<ExampleComponentModel>

) {

return (

<LayoutElement {...props}>

<List dense={true}>

<TitleBar>Some Title</TitleBar>

<ListItem>

<Button>Item 1</Button>

</ListItem>

<ListItem>

<Button>Item 2</Button>

</ListItem>

<ListItem>

<Button>Item 2</Button>

</ListItem>

<div className="red">I have a red background</div>

</List>

</LayoutElement>

);

}

However, if you need to manually theme the component, you can use the various theming colors in custom css, through the var(...) css function.

tip

A full list of all the color keys available in a theme can be found here.

.my-element {

background-color: var(--primaryBackground);

}

Component that Uses Built-in Icons

The following example demonstrates a component that uses Geocortex Web layout components and an icon from the Geocortex Icons library.

• Component
• UI

import React from "react";

import { LayoutElement } from "@vertigis/web/components";

import DynamicIcon from "@vertigis/web/ui/DynamicIcon";

import IconButton from "@vertigis/web/ui/IconButton";

import MenuItem from "@vertigis/web/ui/MenuItem";

import MenuItemSecondaryAction from "@vertigis/web/ui/MenuItemSecondaryAction";

import ListItemText from "@vertigis/web/ui/ListItemText";

export default function ComponentWithIcon(props) {

return (

<LayoutElement {...props} style={{ backgroundColor: "white" }}>

<MenuItem>

<ListItemText

primary={"Icon Example"}

secondary={"cloud-download icon"}

/>

<MenuItemSecondaryAction>

<IconButton title="IconExample">

<DynamicIcon src="cloud-download" size="large" />

</IconButton>

</MenuItemSecondaryAction>

</MenuItem>

</LayoutElement>

);

}