Lightning-设计(5)图片

学习目标

完成本单元后,您将能够:

  • 使用图像组件将头像添加到您的设计中。
  • 使用设计系统SVG精灵贴图将图标包含在您的设计中。
  • 描述在Visualforce中工作时的标记陷阱。

阿凡达告诉千言万语

在本节中,我们将使用图像和一组全新的漂亮图标(更多内容在下面)使事情变得更加明亮。这可能听起来很简单…整个图像单元,真的吗?但是,这些是关键组件,特别是你会看到我们正在使用一些尖端的技术来为我们的图标标记。另外,你需要照亮你的示例页面,以获得这些Trailhead徽章。

在我们进入代码之前,请注意可访问性。请记住,每个<img />标签都应具有辅助技术用户的alt属性。如果图像载有信息,请将alt设置为简明的描述。如果图片仅仅是装饰性的,或者对于相邻的文字是多余的,请设置一个空的alt属性,如下所示:<img alt =“”src =“decorative-image.jpg”/>

图像方面,设计系统包括化身的特殊样式。你知道,那些你周围在互联网上看到的髋关节圆形图像。

Example avatars

头像是通过将<img />元素用类slds-avatar包装在<span>元素中创建的。可以应用其他大小助手类,例如slds-avatar – large。设计系统下载实际上包括/ assets / images下的几个头像示例。请随意将它们包含在您的应用程序中。这是一个标记的例子:

<span class="slds-avatar slds-avatar--x-small">
  <img src="/assets/images/avatar1.jpg" alt="meaningful text" />
</span>

媒体对象

在Web应用程序中包含图像的常见模式是并排包含图像和文本。该设计系统有一个组件,使这超级简单,媒体对象。

让我们直接回到最后一个单元的代码。我们将使用媒体对象在页面标题中包含一个头像。用下面的代码替换页头中的<! – HEADING AREA – >部分:

<!-- HEADING AREA -->
<div class="slds-media slds-no-space slds-grow">
  <div class="slds-media__figure">
    <span class="slds-avatar slds-avatar--medium">
      <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="" />
    </span>
  </div>
  <div class="slds-media__body">
    <p class="slds-text-title--caps slds-line-height--reset">Accounts</p>
    <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
  </div>
</div>
<!-- / HEADING AREA -->
预览您的网页,并注意它是如何开始获得更多的视觉吸引力。

List view with avatar

媒体对象组件的基类是slds-media。它可以应用于任何容器元素,这里我们使用一个<div>。在容器内部,我们提供一个图形(图像)和一个实体(内容)。

这个数字,也就是我们的头像,被包含在一个带有slds-media__figure类的<span>中。头像图像是用标准的<img />元素指定的。你也可以在这里包含一个图标(见下文)。

正文是类slds-media__body的<div>。这包裹了我们之前使用的标题文本。

图标

在我们开始这项工作时,更新Salesforce图标是我们的首要任务。让我们面对现实,现有的“剪贴画”看起来有点憔悴和90年代。因此,我们非常高兴能够提供这套令人兴奋的Technicolor图标,涵盖各种用例供您在自己的应用程序中使用。

设计系统包括五种不同类型的新图标:

  • 自定义 – 这些图标代表我们UI中的自定义Salesforce对象。它们是我们在创建自定义对象时向Salesforce管理员提供的图标
  • 文档类型 – 常用的文档和文件格式
  • 标准 – 这些图标涵盖了我们UI中的所有标准Salesforce对象
  • 实用程序 – 关闭模式,返回上一页或打开下拉菜单
  • 行动 – 最后,但并非最不重要的,好行动类别。我们在我们的移动用户界面中使用这些图标作为相当具体的用例。你会发现这里有一些重复的标准和自定义设置 – 不要惊慌,你不会发疯。很可能你完全可以忽略这个类别,并且仍然有足够的图标用于你可以梦想的任何用例。

Example icons

这些图标既作为单独的PNG和SVG提供,也包装在SVG sprite地图中。以上每个图标类别在/ assets /图标下都有自己的精灵贴图。雪碧地图是我们推荐的在页面中包含图标的技术。与传统的图标字体相比,SVG sprite映射的优点包括更细粒度的CSS控制和更容易的组件定位,以及更好的基于矢量SVG的可调整性。这最后的好处是响应式设计的福音。基于矢量的图像可以制作任何尺寸的清洁艺术品。

请注意:Edge,Google Chrome,Safari和Firefox的当前版本已经支持SVG精灵贴图。要在Microsoft Internet Explorer 11中使用SVG spritemap图像图标,您需要下载一个名为svg4everybody的小脚本。下载svg4everybody之后,将svg4everybody.min.js脚本添加为静态资源,将其包含在您的页面中,然后在<script>标记中调用它。请参阅svg4everybody网站上的完整说明了解更多详情。使用这种图标技术(如前一段所述)的优点不仅仅是弥补了这一额外的步骤。

  <apex:includeScript value="{!$Resource.REPLACE_WITH_NAME_OF_SVG4EVERYBODY_STATIC_RESOURCE}" />
  <script>
    svg4everybody();
  </script>
</head>
SVG精灵贴图也是为什么我们要添加xmlns和xmlns:xlink属性到你的<html>元素。原因是在Visualforce中配置SVG和xlink命名空间。再次,一小部分的工作,以获得巨大的回报。
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
设计系统的图标标记对于许多读者来说是新的,所以我们来看一个例子。这是一个独立图标的标记。假设用户界面中的位置对用户有一定的意义(即图标不是装饰性的)。这意味着我们需要提供一些辅助文字以及我们的图标:
<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
  <svg aria-hidden="true" class="slds-icon">
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
  </svg>
  <span class="slds-assistive-text">Account Icon</span>
</span>
让我们一步一步通过这个元素,并按类来分类。由于该图标是独立的,并带有含义,因此我们将其放置在slds-icon_container类的外部跨度内。

图标没有背景颜色。为了设置一个,我们将第二个类应用到该跨度。要为特定图标使用默认颜色,请通过连接slds-icon-,sprite映射名称和-icon来构造图标特定实用程序类的名称。将该类应用于<span>元素。在这个例子中,我们使用“标准”精灵图和“客户”图标,所以类是slds-icon-standard-account。

在<span>中,我们有一个带有slds-icon类的<svg>元素。 <svg>元素又包含一个<use>标签,它根据xlink:href属性指定要显示的图标。

为了设置xlink:href路径,请执行以下步骤:

  1. 首先从图标页面中选择您要使用的图标。记下它在哪个类别(动作,自定义,文档类型,标准或实用程序)。
  2. 通过连接类别精灵(例如“standard-sprite”),/svg/symbols.svg#和其中的特定图标(例如“account”)来完成xlink:href属性。因此,在上面的例子中,路径assets / icons / standard-sprite / svg / symbols.svg#是客户。

如果图标没有出现,请检查以下内容:

  • 检查是否已将xmlns和xmlns:xlink属性应用于您的<html>元素
  • 如果您使用的是MSIE,请确保使用最新版本,并按照上文所述在页面中包含svg4everybody脚本。
  • 确保在svg路径中正确指定了sprite类型和图标
  • 仔细检查你的静态资源是否有正确的URLFOR路径
  • 最后,请查看浏览器开发者工具中的页面,了解真正疯狂的深奥问题。祝你好运。

在<svg>标签之后,辅助文本被包含在slds-assistive-text类的跨度内。

有关使用图标的更多信息(如更改图标颜色或大小),请参阅Design System网站上的图标组件文档。

将图标添加到列表视图数据表

现在,让一些客户图标照亮数据表。将updateOutputDiv函数替换为以下内容以添加一个带有图标的附加列:

var updateOutputDiv = function() {

  account.retrieve(
    { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
    function(error, records) {
      if (error) {
        alert(error.message);
      } else {
        // 创建数据表
        var dataTable = document.createElement('table');
        dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover';

        // 添加标题行
        var tableHeader = dataTable.createTHead();
        var tableHeaderRow = tableHeader.insertRow();

        var tableHeaderRowCellIcon = tableHeaderRow.insertCell(0);
        tableHeaderRowCellIcon.setAttribute('class', 'slds-cell-shrink');

        var tableHeaderRowCell1 = tableHeaderRow.insertCell(1);
        tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
        tableHeaderRowCell1.setAttribute('scope', 'col');
        tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');

        var tableHeaderRowCell2 = tableHeaderRow.insertCell(2);
        tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
        tableHeaderRowCell2.setAttribute('scope', 'col');
        tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');


        // 建立表体
        var tableBody = dataTable.appendChild(document.createElement('tbody'))
        var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
        records.forEach(function(record) {
          dataRow = tableBody.insertRow();

          var sldsSpriteReference = document.createElementNS('http://www.w3.org/2000/svg', 'use');
          sldsSpriteReference.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}');
          var accountIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
          accountIcon.setAttributeNS('http://www.w3.org/2000/svg', 'aria-hidden', true);
          accountIcon.classList.add('slds-icon');
          accountIcon.appendChild(sldsSpriteReference);
          accountIconWrapper = document.createElement('span');
          accountIconWrapper.classList.add('slds-icon_container', 'slds-icon-standard-account');
          accountIconWrapper.appendChild(accountIcon);
          dataRowCellIcon = dataRow.insertCell(0);
          dataRowCellIcon.appendChild(accountIconWrapper);

          dataRowCell1 = dataRow.insertCell(1);
          recordName = document.createTextNode(record.get('Name'));
          dataRowCell1.appendChild(recordName);

          dataRowCell2 = dataRow.insertCell(2);
          recordId = document.createTextNode(record.get('Id'));
          dataRowCell2.appendChild(recordId);
        });

        if (outputDiv.firstChild) {
          // replace table if it already exists
          // see later in tutorial
          outputDiv.replaceChild(dataTable, outputDiv.firstChild);
        } else {
          outputDiv.appendChild(dataTable);
        }
      }
    }
  );
}
预览你的页面,你应该看到一些近似真实的用户界面。现在检查一下这个单元,注意这个CSS有多少行。

Data table with icons

在下一个单元中,我们在最着名的Salesforce页面之一上工作:臭名昭着的记录主页。这将把我们在单元中学到的技能和组件结合到一起,并引入一些额外的设计系统组件。