Oracle apex 如何更改向导容器映像（图标）oracle apex？

我有一个基于向导容器的动态列表， 现在我想为每个列表条目显示一个图像，可以是自定义图像，也可以是来自静态文件的图像。 我如何才能做到这一点，或者仅为当前状态更改图像

---

这里有几件事需要考虑：

项目图像和状态：列表中的每个项目都必须考虑三种状态。向导进度列表模板将为当前列表项提供一个名为“is active”的类。然后，当页面加载时，当前项左侧的项将被赋予一个名为“is complete”的类。所以，若一个项目并没有“IsActive”或“IsComplete”类，那个么您可以假设它类似于“IsPending”，尽管这是默认值，所以并没有分配类

如果要分配自定义图像，则需要考虑如何处理不同的状态。例如，您可以为每个项目创建三个不同的图像，然后根据需要交换它们

图像大小：默认图标的默认大小为16px。使用CSS transform属性可以放大它们的大小。这适用于图标，但不适用于图像。您可能需要提前调整图像的大小 我将向您展示如何在APEX 19.2中的以下向导进度列表中自定义步骤2。我将使用32px的正方形表示“是活动的”图像，24px表示“是完整的”（我还为该图像添加了一些绿色），16px表示待处理的项目

将图像上载到共享组件，并从报告中的引用列获取URL。您可以根据需要使用静态应用程序文件或静态工作区文件。我使用的是静态应用程序文件，URL是：#APP#u IMAGES#wizard dm pending.jpg、#APP#u IMAGES#wizard dm active.jpg和#APP#u IMAGES#wizard dm complete.jpg

将以下CSS添加到挂起页面（活动/当前页面之前的页面）的内联页面属性（CSS部分）

大多数CSS都在清除本应设置的值。然后对图像大小进行一些调整，并添加正确的图像。第二步看起来像：

将以下CSS添加到当前/活动页面的内联页面属性（CSS部分）

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    padding: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-active.jpg);
}

第二步看起来像：

将以下CSS添加到完整页面（活动/当前页面之后的页面）的内联页面属性（CSS部分）

第二步看起来像（我在上传之前把图像变成绿色）：

---

可以对列表中的每个图像重复此过程。可以想象，图像越多，这将变得越乏味。另外一个问题是，我有一个动态列表，如何将最后一个状态更改为“已完成”而不是“活动”。最简单的方法是在末尾添加一个通用列表条目，如“完成”或“完成”。这样，在它看起来完成之前的所有事情都会完成。抱歉，我不知道如何才能做到。亲爱的Dan，我被更改了正在讨论的图像，当交易状态等于drop或won时，我如何才能做到这一点，我不能使用第n个子项（2），因为进度条子项是动态的，而不是静态的，我正在添加有问题的查询，当won或lost时的状态，或者删除第n个子项（2）中的循环finishedrefering，您将需要复制向导进度列表模板-实际上是获取它的所有权。然后，您可以将任何#A01#到#A10#替换字符串添加到模板中。例如，在“列表模板当前”或“列表模板非当前”项中，可以执行如下操作：“class=”t-WizardSteps-step处于活动状态#A01#“”。注意，我在'is active'类之后添加了'#A01'。您需要对非当前条目执行相同的操作。然后，在实际列表项中，您可以在相关的用户定义属性（本例中为1）中输入一个值。

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-pending.jpg);
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    padding: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-active.jpg);
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker {
    -webkit-transform: unset;
    transform: unset;
    background: none;
    padding: 0;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
}

.t-WizardSteps-step:nth-child(2) .t-WizardSteps-marker:before {
    content: url(#APP_IMAGES#wizard-dm-complete.jpg);
}