操作方法

操作方法:在 ArcGIS Instant Apps Zone Lookup 模板中使用自定义 CSS 自定义占位符文本格式

Last Published: June 13, 2024

摘要

在 ArcGIS Instant Apps 中,预定义主题提供了一种便捷方式,可快速创建目标驱动的应用程序,用于与地图和数据进行交互。 为了获得更好的用户体验,有时需要使用自定义 CSS 来更改搜索栏中占位符文本的字号和粗细,从而控制应用程序的外观(其中包括字体)。 此增强功能可确保提升可读性和视觉一致性。 有关详细信息,请参阅 ArcGIS Instant Apps:更改主题和布局。 下图显示了 ArcGIS Instant Apps Zone Lookup 模板中搜索栏占位符文本的默认字号和粗细。

ArcGIS Instant Apps Zone Lookup 模板中搜索栏占位符文本的默认字号和粗细

本文提供了在 ArcGIS Instant Apps Zone Lookup 模板中使用自定义 CSS 在“搜索”选项中更改占位符文本字号和粗细的工作流。

过程

  1. 登录到 ArcGIS Instant Apps,然后单击我的应用程序选项卡。
  2. 浏览到应用程序,然后单击配置 “配置”按钮
  3. 在配置面板中,切换关闭精简以访问应用程序的完整配置设置。
配置面板中的“精简”切换按钮
  1. 关闭快速模式窗口中,单击继续。 关闭快速模式允许在应用程序上完成更多自定义配置。
“关闭快速模式”窗口
  1. 单击主题和布局,然后单击主题
“主题和布局”面板
Note: 
Optionally, click Search settings and type Custom CSS. The Theme & Layout panel is displayed.
  1. 主题下,单击自定义 CSS 部分中的编辑
“主题”面板中的“自定义 CSS”部分
Warning:  
ArcGIS Instant Apps updates for the source template may impact an app's custom CSS.
  1. 自定义 CSS 窗口中粘贴以下 CSS 代码,以更改“搜索”选项中占位符文本的字号和粗细。 可以对“font-size”和“font-weight”参数进行自定义。 在本示例中,font-size 为 24px,font-weight 为 bold。
.esri-search__form .esri-input[type=text] {
  font-size: 24px;
  font-weight: bold;
}
  1. 单击关闭以运行 CSS 代码。
  2. 单击发布保存配置。

下图显示了 ArcGIS Instant Apps Zone Lookup 模板中搜索栏占位符文本的自定义字号和粗细。

ArcGIS Instant Apps Zone Lookup 模板中搜索栏占位符文本的自定义字号和粗细

文章 ID: 000032715

获得人工智能支持

使用 Esri Support AI Chatbot 快速解决您的问题。

立即开始聊天

获取来自 ArcGIS 专家的帮助

联系技术支持部门

立即开始聊天

转至下载选项