使用静态应用程序文件作为卡片列表图标

Question

我正在使用 Application Express 20.1 设置一个简单的集线器，用于将人们路由到其他 APEX apps/websites。我想使用带有我的管理层提出的一些自定义图标的卡片列表。我有：

已将图像上传到静态应用程序文件
创建了静态列表并使用 Image/Class 字段中静态应用程序文件中的图像标记列表项
在列表区域属性中将模板选项设置为 'display icons'

但是当我运行页面时，图像不会显示图标通常显示的位置。我已将图标更改为 fa 图像，只是为了确保它们可以正常工作。我是否遗漏了一个步骤，或者是否有某种文件要求将这些图像用作列表卡图标？提前致谢。

Answer 1

为此，您必须为卡片列表创建新模板或修改现有模板。

在共享组件 > 模板中找到的模板定义中，找到您要查找的项目（在本例中为卡片）并单击它。在其中，您需要更改“List Template Current”和“List Template Noncurrent”部分。以下是模板最初的配置方式：

<li class="t-Cards-item is-active #A04#">
  <div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
  <div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>
  <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
  <div class="t-Card-body">
    <div class="t-Card-desc">#A01#</div>
    <div class="t-Card-info">#A02#</div>
  </div>
  <span class="t-Card-colorFill u-color #A06#"></span>
</a>

您需要更改 t-Card-icon 部分，使其引用图像源而不是图标 CSS class。

<li class="t-Cards-item is-active #A04#">
  <div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
  *<div class="t-Card-icon u-color #A06#"><img src="#IMAGE#"></img> </div>*
  <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
  <div class="t-Card-body">
    <div class="t-Card-desc">#A01#</div>
    <div class="t-Card-info">#A02#</div>
  </div>
  <span class="t-Card-colorFill u-color #A06#"></span>
</a>

将图像源更改为#IMAGE# 将引用您在列表配置中为 Image/Class 字段中的该列表项设置的任何内容。

使用静态应用程序文件作为卡片列表图标

Using Static Application Files as Card List Icon

oracle

oracle-apex