如何利用ionic框架制作带有图标的卡片列表

ionic框架的card卡片，可以结合不同类型的控件或图标生成不同组件。卡片列表类似卡片包一样，有一层一层展示出来，使用样式类card。下面利用一个card和图标结合生成列表的实例说明这个用法，具体操作如下：

工具/原料

• ionic框架
• AngularJS框架
• HBuilder
• CSS3
• HTML5
• 截图工具
• 浏览器

方法/步骤

1. 1

   第一步，创建静态页面icon.html，引入ionic和AngularJS的相关文件（JS和CSS），修改title标签的文字展示内容，如下图所示：

   
2. 2

   第二步，在body中插入div标签元素，并设置样式class为list、card，根据需要设置样式，如下图所示：

   
3. 3

   第三步，利用<a></a>标签插入小图标，这里选择ionic框架自带的小图标，结合<i></i>标签元素插入，这样看起来更为美观，如下图所示：

   
4. 4

   第四步，编写完毕后，预览该静态页面，这是会在页面上看到含有图标的列表，图标位于右侧，左侧展示字，如下图所示：

   
5. 5

   第五步，为了将字样和图标放在同一方向，需要将class="item-icon-right"改为item-icon-left，图标移到左侧，如下图所示：

   
6. 6

   第六步，再次预览页面，这时字样和图标都在页面左侧，说明上面样式类设置成功了，如下图所示：

   

注意事项

• 了解ionic框架自带的样式图标，合理使用样式
• 熟悉card卡片和其他控价结合使用的方法