Web 组件

Intro 简介组件

简介组件，常用于放置包含图片和文字的企业介绍信息等。

目录

组件演示

default（More 在上）

你好小娜

更多细节
小娜

Cortana 恐怕是用户急于更新到 WP8.1 Update 开发者预览版的原因之一

Cortana 中国版特有的新图标（面团，带眼睛，可在 Cortana 设置中切换回圆圈），使用的是中文语言，也同样支持 Cortana 笔记本。

<div data-wd-widget="intro" class="wd-intro wd-cf wd-intro-default">
  <div class="wd-intro-hd">
    <h2 class="wd-intro-title">你好小娜</h2>
    <a class="wd-intro-more wd-intro-more-top " href="#more">更多细节</a>
  </div>
  <div class="wd-g wd-intro-bd">
    <div class="wd-intro-left wd-u-sm-5">
      <img src="http://i.static.amazeui.org/assets/i/cpts/intro/WP_Cortana_China.png"
      alt="小娜" />
    </div>
    <div class="wd-intro-right wd-u-sm-7">
      <p>Cortana 恐怕是用户急于更新到 WP8.1 Update 开发者预览版的原因之一</p>
      <p>Cortana 中国版特有的新图标（面团，带眼睛，可在 Cortana 设置中切换回圆圈），使用的是中文语言，也同样支持 Cortana 笔记本。</p>
    </div>
  </div>
</div>

default（More 在下）

你好小娜

小娜

Cortana 恐怕是用户急于更新到 WP8.1 Update 开发者预览版的原因之一

Cortana 中国版特有的新图标（面团，带眼睛，可在 Cortana 设置中切换回圆圈），使用的是中文语言，也同样支持 Cortana 笔记本。

更多细节
<div data-wd-widget="intro" class="wd-intro wd-cf wd-intro-default">
  <div class="wd-intro-hd">
    <h2 class="wd-intro-title">你好小娜</h2>
  </div>
  <div class="wd-g wd-intro-bd">
    <div class="wd-intro-left wd-u-sm-5">
      <img src="http://i.static.amazeui.org/assets/i/cpts/intro/WP_Cortana_China.png"
      alt="小娜" />
    </div>
    <div class="wd-intro-right wd-u-sm-7">
      <p>Cortana 恐怕是用户急于更新到 WP8.1 Update 开发者预览版的原因之一</p>
      <p>Cortana 中国版特有的新图标（面团，带眼睛，可在 Cortana 设置中切换回圆圈），使用的是中文语言，也同样支持 Cortana 笔记本。</p>
    </div>
  </div>
  <div class="wd-intro-more-bottom">
    <a class="wd-btn wd-btn-default " href="#more">更多细节</a>
  </div>
</div>

使用方法

直接使用

  • 拷贝演示中的代码，粘贴到 旺道UI HTML 模板（点此下载） <body> 区域；
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 intro，使用细节参照折叠面板组件。

云适配 WebIDE

  • 将组件拖入编辑界面；
  • 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = {
  "title": "",  // 标题
  "more": { // 更多链接
    "title": "",
    "link": ""
  },
  "left": "", //左边的内容
  "right": "" //右边的内容
};
return data;

数据接口 

{
    "id": "",

  "className": "",

    "theme": "",

    "options": {
        "leftCols": "",
        "RightCols": "",
        "position":""
    },

    "content": {
        "title": "",
        "more": {
      "link": "",
      "title": "",
      "className": ""
    },
        "left": "",
        "right": ""
    }
}