Lightning-设计

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页面之一上工作：臭名昭着的记录主页。这将把我们在单元中学到的技能和组件结合到一起，并引入一些额外的设计系统组件。

你可能也会喜欢...
Lightning-设计

Lightning-设计（6）布置记录主页
Lightning-设计

Lightning-设计（3）网格系统
Lightning-设计

Lightning-设计（1）