设置样式

视图大小 CSS 类

CSS 类应用于视图，并可根据其大小进行更新。这些类旨在帮助定位视图中的元素，并随后根据视图的大小设置其样式，而不管页面大小如何。它们与 MapView 和 SceneView 的 widthBreakpoint、heightBreakpoint 和 orientation 属性结合使用。

下面提供了特定于宽度的类。也为高度提供了等效值，例如 geoscene-view-width-xsmall 也有一个 geoscene-view-height-xsmall 类。

xsmall
`geoscene-view-width-xsmall`
`geoscene-view-width-less-than-small`
`geoscene-view-width-less-than-medium`
`geoscene-view-width-less-than-large`
`geoscene-view-width-less-than-xlarge`

small
`geoscene-view-width-small`
`geoscene-view-width-greater-than-xsmall`
`geoscene-view-width-less-than-medium`
`geoscene-view-width-less-than-large`
`geoscene-view-width-less-than-xlarge`

medium
`geoscene-view-width-medium`
`geoscene-view-width-greater-than-xsmall`
`geoscene-view-width-greater-than-xsmall`
`geoscene-view-width-less-than-large`
`geoscene-view-width-less-than-xlarge`

large
`geoscene-view-width-large`
`geoscene-view-width-greater-than-xsmall`
`geoscene-view-width-greater-than-small`
`geoscene-view-width-greater-than-medium`
`geoscene-view-width-less-than-xlarge`

xlarge
`geoscene-view-width-xlarge`
`geoscene-view-width-greater-than-xsmall`
`geoscene-view-width-greater-than-small`
`geoscene-view-width-greater-than-medium`
`geoscene-view-width-greater-than-large`

注意，greater/less than 类是编写 CSS 选择器的便捷方法。例如，

代码块使用深色复制
.geoscene-view-width-less-than-large .geoscene-foo 

比以下代码更有效

代码块使用深色复制
.geoscene-view-width-xsmall .geoscene-foo,
.geoscene-view-width-small .geoscene-foo,
.geoscene-view-width-medium .geoscene-foo 

特定于页面方向的类如下：

`geoscene-view-orientation-portrait`
`geoscene-view-orientation-landscape`

当宽度小于或等于高度时，则使用纵向。否则，使用横向。

要了解这些不同 CSS 类的工作原理，请参阅使用 CSS 的响应应用程序的示例。

主题

以下主题是开箱即用的：

light
dark

需要在 CSS 路径中指定主题名称：

代码块使用深色复制
<link rel="stylesheet"
      href="https://js.geoscene.cn/4.25/geoscene/themes/<theme-name>/main.css"> 

使用 Sass 自定义 CSS

您可使用 Sass 完全控制编译后的 CSS。Sass 是一个 CSS 预处理器，其具有许多有用功能，包括变量、mixins、函数以及其他功能。使用 Sass，您可以选择将哪些内容编译到主应用程序的 CSS 文件中。

这是自定义 CSS 的推荐方法。它提供了一个比手动覆盖 CSS 更强大的选项，这可能会导致可伸缩性问题。

查看此 Sass 实用工具，以帮助您创建自己的 Sass 主题。

微件使用的 CSS 类遵循 BEM 命名约定。此方法有助于理解语义，允许轻松识别和设置类的样式。

例如，在以下代码段中，可以更轻松地查看每个类名的影响：

代码块使用深色复制
.geoscene-basemap-toggle { /* root of the widget */ }
.geoscene-basemap-toggle__image { /* image element owned by the widget */ }
.geoscene-basemap-toggle__image--secondary { /* alternate version of the image element */ } 

Sassy 微件

如果您需要一种具有更细粒度控制的可扩展方法，则可能需要考虑使用微件 Sass 文件。这是自定义微件 CSS 的推荐方法，因为它提供了比手动覆盖它更强大的选项。

微件的 Sass 文件利用变量的强大功能，可使您快速轻松地开始自定义样式。例如，以下是默认配色方案。

默认样式

如果需要自定义颜色，只需更改这些变量即可轻松打造应用程序的品牌。

代码块使用深色复制
$font-color: #fff;
$background-color: #00704a;
$button-color: $background-color;
$interactive-font-color: $font-color;
$border-color--active: $interactive-font-color;
$background-color--active: lighten(#00704a, 25%); 

CSS 样式基于类似于下面显示的 CSS 类选择器进行应用。代码片段中的 CSS 选择器来自 _Widget.scss 文件，该文件位于 geoscene-js-api 仓库中。

代码块使用深色复制
.geoscene-widget__heading {
  color: $heading_color; // #323232;
  font-weight: $font-weight__heading; // 600;
  margin: 0 0 0.5rem 0;
}
h1.geoscene-widget__heading {
  font-size: $font-size__h1; // 20px;
}
h2.geoscene-widget__heading {
  font-size: $font-size__h2; // 16px;
}
h3.geoscene-widget__heading,
h4.geoscene-widget__heading,
h5.geoscene-widget__heading,
h6.geoscene-widget__heading {
  font-size: $font-size__lt-h2; // 14px;
} 

GeoScene 提供的所有微件均使用此选择性加入 (opt-in) 方法设置样式，这意味着默认情况下会对其进行样式设置。除非另有说明，否则默认情况下不会自动设置自定义微件的样式，因为开发人员有责任选择加入。

这些选择性加入的类是：

选择性加入类
`.geoscene-widget__table`
`geoscene-widget__heading`、`h1.geoscene-widget__heading`、`h2.geoscene-widget__heading` 等。
`geoscene-widget__anchor`

按钮样式

.geoscene-widget--button 被视为一个按钮微件。Home 和 Track 微件就是两个很好的例子。

可使用 .geoscene-button 样式模拟 Calcite 按钮。此外，它还使用相同的层次结构。

代码块使用深色复制
.geoscene-button
.geoscene-button--secondary
.geoscene-button--tertiary 

其他信息

有关详细信息，请参阅以下附加链接：

GeoScene Maps SDK for JavaScript