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

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

文章插图
工具/原料ionic框架
AngularJS框架
HBuilder
CSS3
HTML5
截图工具
浏览器
方法/步骤1第一步，创建静态页面icon.html ，引入ionic和AngularJS的相关文件（JS和CSS），修改title标签的文字展示内容，如下图所示：

文章插图

2【如何利用ionic框架制作带有图标的卡片列表】第二步，在body中插入div标签元素，并设置样式class为list、card ，根据需要设置样式，如下图所示：

文章插图

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

文章插图

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

文章插图

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

文章插图

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

文章插图

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

以上内容就是如何利用ionic框架制作带有图标的卡片列表的内容啦，希望对你有所帮助哦！

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