Amaze UI

Web 组件

Intro 简介组件


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

组件演示

default(More 在上)

你好小娜

更多细节
小娜

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

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

  <div data-am-widget="intro"
       class="am-intro am-cf am-intro-default"
       >
      <div class="am-intro-hd">
        <h2 class="am-intro-title">你好小娜</h2>
            <a class="am-intro-more am-intro-more-top " href="#more">更多细节</a>
      </div>

    <div class="am-g am-intro-bd">
        <div
            class="am-intro-left am-u-sm-5"><img src="http://s.amazeui.org/assets/2.x/i/cpts/intro/WP_Cortana_China.png" alt="小娜" /></div>
        <div
            class="am-intro-right am-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-am-widget="intro"
       class="am-intro am-cf am-intro-default"
       >
      <div class="am-intro-hd">
        <h2 class="am-intro-title">你好小娜</h2>
      </div>

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

使用方法

直接使用

  • 拷贝演示中的代码,粘贴到 Amaze 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": ""
    }
}
侧栏导航
Amaze UI 微信
在微信上关注我们