Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/styling/ below:

Styling | Overview | ArcGIS Maps SDK for JavaScript 4.33

ArcGIS Maps SDK for JavaScript allow developers to create interactive and visually appealing mapping applications. It provides customized themes for your application, styling components and integration with the Calcite Design System.

The SDK has a built-in dependency on the Calcite Design System. Many of the SDK's widgets use Calcite Components which provide CSS variables to override styles, and you can also add your own Calcite components.

To inspect an HTML element's CSS, use the browser's developer tools. The Chrome developer documentation offers a View and change CSS tutorial.

Overriding styles can be accomplished at the global level of your application or by applying the styling to a div or directly to a component. Below is a global CSS styling example that will update all Calcite components and Calcite-based widgets in your app that use calcite-list and calcite-button. Examples of this pattern is available in the LayerList sample.

Apply styles that affect all Calcite components within your application.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
<style>
  calcite-list,
  calcite-button {
    --calcite-color-text-1: #3c83b7;
    --calcite-color-text-2: #3c83b7;
    --calcite-color-text-3: #3c83b7;
  }
</style>

Target specific Calcite components for style overrides , in this calcite-panel:

styles.css

Use dark colors for code blocks Copy

1
2
3
4
#infoPanel {
  --calcite-color-brand: #71c96e;
  --calcite-color-brand-hover: #67b564;
}

index.html

Use dark colors for code blocks Copy

1
<calcite-panel id="infoPanel"> </calcite-panel>

You can also use Calcite brand variables to apply your organization's branding colors to an application. Examples of implementing this pattern are in the Color theming for interactive tools sample. For more information, see Calcite's Theming guide.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  body {
    --calcite-color-brand: #8f4a89;
    --calcite-color-brand-hover: #823b7c;
    --calcite-color-brand-press: #7d3b77;
  }
  body.calcite-mode-dark {
    --calcite-color-brand: #d6b9eb;
    --calcite-color-brand-hover: #c59cd6;
    --calcite-color-brand-press: #b399c4;
  }
</style>

Calcite Design System offers dark, light, and auto modes that provide an easy way to adjust the appearance of components like arcgis-coding-components or arcgis-charts components to fit user preferences. The available CSS classes and how to use them are documented in the Calcite modes page. Before styling components, include the necessary stylesheets:

Use dark colors for code blocks Copy

1
2
<!-- ArcGIS Core -->
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/<theme-name>/main.css" />

For projects using ES Modules, import the stylesheets for the Calcite Design System, ArcGIS Core and any component packages used in your application:

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
8
9
10
/* styles.css */

/* Calcite Design System */
@import "https://js.arcgis.com/calcite-components/3.2.1/calcite.css";

/* ArcGIS Core  */
@import "https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css";

/* Map Components */
@import "https://js.arcgis.com/4.33/map-components/main.css";

Once the stylesheets are included, apply the desired theme mode to your components by adding the corresponding Calcite mode class.

Dark mode example:

Use dark colors for code blocks Copy

1
<arcgis-arcade-editor class="calcite-mode-dark"></arcgis-arcade-editor>

Light mode example:

Use dark colors for code blocks Copy

1
2
3
<arcgis-charts-pie-chart class="calcite-mode-light" id="pie-chart">
  <!-- Chart Content -->
</arcgis-charts-pie-chart>

@arcgis/core and arcgis-map-components can be set to dark or light theme by including a stylesheet.

For modules via ArcGIS CDN, provide the theme name in the CSS path:

Use dark colors for code blocks Copy

1
<link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/<theme-name>/main.css" />

For local builds using @arcgis/core ES modules, use the @import url pattern. The value can be a string or the url(<string>) function, depending on your environment:

styles.css

Use dark colors for code blocks Copy

1
2
3
4
5
/* URL property as a string */
@import "https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/<theme-name>/main.css";

/* URL property using the url() function */
@import url("https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/<theme-name>/main.css");

The esri-widget class is a base CSS class in the ArcGIS Maps SDK for JavaScript, designed to provide consistent base styles, such as padding, margins and states, across various widgets and components. Applying this class to custom content within maps or UI layouts ensures consistent styling and a unified appearance alongside Esri widgets and components.

Use dark colors for code blocks Copy

1
2
3
4
<arcgis-placement position="bottom-left">
  <arcgis-home></arcgis-home>
  <button class="esri-widget">Placeholder</button>
</arcgis-placement>

CSS classes are applied to the View and updated based on its size. These classes are meant to help target elements inside a view and subsequently style them based on the view's size, regardless of the page size. They work in conjunction with the widthBreakpoint, heightBreakpoint, and orientation properties of both the MapView and SceneView.

The classes specific for width are provided below. The equivalent is also provided for height, e.g. esri-view-width-xsmall also has an esri-view-height-xsmall class.

Note that the greater/less than classes are a convenient way to write CSS selectors. For example,

Use dark colors for code blocks Copy

1
.esri-view-width-less-than-large .esri-foo

is more efficient than

Use dark colors for code blocks Copy

1
2
3
.esri-view-width-xsmall .esri-foo,
.esri-view-width-small .esri-foo,
.esri-view-width-medium .esri-foo

The classes specific for page orientation are as follows:

Portrait is used when width is less than or equal to height. Otherwise, it is landscape.

For a look at how these various CSS classes work, please see the Responsive apps using CSS sample.

Depending on how you load the SDK into your application, you may need to include additional CSS links. If you are using components from the CDN, the CSS links are included automatically. If you are using npm, you will need to import the CSS stylesheets into your application manually.

This case applies if you're using the SDK's core API by itself.

Please refer to these additional links for further information:

• Sample - Color theming for interactive tools
• Sass

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4