Intro
Images and texts can be put in this widget to form a introduction of website or company.
TOC
Demos
Theme: default
你好小娜
更多细节
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="https://amazeui.github.io/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>
Theme: default
你好小娜
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="https://amazeui.github.io/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>
Usage
Copy and Paste
- Copy the codes in examples, and paste it to the
<body>of the Amaze UI HTML template(Download); - Replace the contents in examples with your own contents.
Using Handlebars
The Handlebars partial of this widget is intro. See Accordion for more details.
Allmobilize WebIDE
- Drag the widget to the edit interface;
- Click the
Data bindingbutton on the right panel, and bind data using following format.
var data = {
"title": "", // Title
"more": { // More link
"title": "",
"link": ""
},
"left": "", //Content on the left
"right": "" //Content on the right
};
return data;Data Interface
{
"id": "",
"className": "",
"theme": "",
"options": {
"leftCols": "",
"RightCols": "",
"position":""
},
"content": {
"title": "",
"more": {
"link": "",
"title": "",
"className": ""
},
"left": "",
"right": ""
}
}