ArcGIS API for JavaScript 4.x地图弹窗的样式修改

最新推荐文章于 2022-06-01 09:34:17 发布

GIS小猪

最新推荐文章于 2022-06-01 09:34:17 发布

阅读量2.9k

点赞数 3

本文链接：https://blog.csdn.net/qq_43066675/article/details/108873124

版权

ArcGIS API for JavaScript 小技巧专栏收录该内容

3 篇文章 2 订阅

订阅专栏

本文介绍了如何修改ArcGIS API for JavaScript 4.x的弹窗样式，使其更加美观舒适。通过调整JS设置和CSS样式，实现包括去除折叠功能、隐藏固定标签页、更改边框颜色、圆角、阴影、字体颜色和大小等，以达到个性化视觉效果。

摘要由CSDN通过智能技术生成

ArcGIS API for JavaScript 4.x地图弹窗的样式修改

在进行ArcGIS API for JavaScript 4.x开发的时候，有时候需要简洁大方的舒适的弹窗展示信息，原有的弹窗样式看上去轮廓生硬，不太舒服，所以可以修改它的样式，达到自己的审美观~~

修改前的样式：

在这里插入图片描述

弹窗设置的js部分：

view.popup = {
        collapseEnabled : false, // 移除title点击折叠功能
        dockOptions: {
            buttonEnabled: false // 隐藏固定标签页
        },
        actions: [] // 清空事件按钮 （缩放至、...）
    }

css的修改：

/*修改原有弹窗的css样式*/
[class*="esri-popup--is-docked-top-"] .esri-popup__footer, [class*="esri-popup--aligned-bottom-"] .esri-popup__footer {
    border-bottom: solid 1px #6e6e6e4d;
}
.esri-popup__header{
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px;
    background-color: #fff;
    color: #fff;
}
.esri-popup--shadow {
    box-shadow: 0 1px 4px rgb(155, 155, 155) !important;
}
.esri-popup__header-title{
    background-color: #009688 !important;
}
.esri-popup__header-container, .esri-popup__header-container--button{
    outline: none !important;
}
.esri-popup__icon, .esri-icon-close{
    color: #000000 !important;
}
.esri-view-width-xlarge .esri-popup__main-container {
    width: 360px !important;
    border-radius: 5px !important;
}
.esri-ui .esri-popup {
    border-radius: 5px !important;
}
.esri-popup__button{
    background-color: transparent !important;
    outline: none;
}
.esri-popup__header-title{
    font-weight: 600 !important;
}