Ionic提供的几种颜色:
light default secondary danger dark
<ion-content padding>
<!-- ionic提供了5中颜色 -->
<!-- light default secondary danger dark -->
<button ion-button block>按钮</button>
<button ion-button block color='danger'>按钮</button>
<button ion-button block color="dark">按钮</button>
<button ion-button block color="secondary">按钮</button>
<button ion-button block color="light">按钮</button>
</ion-content>
ionic 中的按钮 加 ion-button 属性:
ion-button 定义一个按钮的属性
<button ion-button>按钮</button>
color="secondary" 定义一个按钮的颜色
block 属性定义一个块状按钮
ion-button 里面可以放图标:
ion-button 同级属性 icon-left icon-right icon-only clear
<button ion-button icon-right>
Right Icon
<ion-icon name="home"></ion-icon>
</button>
例如:
<!-- padding 和上下左右有间距 -->
<ion-content padding>
<!-- ion-button同级属性 color block full icon-left icon-right icon-only clear -->
<button ion-button>普通的ionic按钮</button>
<button ion-button color="dark">普通的ionic按钮</button>
<button ion-button block>block块状按钮</button>
<button ion-button full>full全屏按钮</button>
<br>
<ion-icon name="home"></ion-icon>
<!-- 按钮图标在左侧 -->
<button ion-button icon-left>
<ion-icon name='home'></ion-icon>
首页
</button>
<br>
<button ion-button icon-right>
首页
<ion-icon name="arrow-forward"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name='home'></ion-icon>
</button>
<!-- clear 不想要按钮图标的背景 -->
<button ion-button icon-only clear>
<ion-icon name='home'></ion-icon>
</button>
</ion-content>
http://ionicframework.com/docs/ionicons/
name="heart" 图标的名称
color="secondary" 图标的颜色
改变图标的大小只需要改对应的 css 就可以用到:font-size 属性
ionic 中的列表:
基本列表:ion-list
<ion-content padding>
<ion-list >
<ion-item>
<ion-thumbnail item-start>
<img src="./assets/icon/1.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
</ion-item>
<ion-item>
<ion-thumbnail item-start>
<img src="./assets/icon/2.png">
</ion-thumbnail>
<h2>My Neighbor Totoro</h2>
<p>Hayao Miyazaki • 1988</p>
</ion-item>
</ion-list>
</ion-content>
分组列表:ion-item-divider:
<ion-list>
<ion-item-divider color="light">A</ion-item-divider>//第一组
<ion-item>Angola</ion-item>
<ion-item>Argentina</ion-item>
<ion-item>Angola</ion-item>
<ion-item>Argentina</ion-item>
<ion-item-divider color="secondary">B</ion-item-divider>//第二组
<ion-item>Bngola</ion-item>
<ion-item>Brgentina</ion-item>
<ion-item>Bngola</ion-item>
<ion-item>Brgentina</ion-item>
</ion-list>
列表中的图标:ion-icon
item-start 属性: 开头显示
item-end 属性: 结尾显示
<ion-list>
<ion-item>
<ion-icon name="leaf" item-start></ion-icon>
Herbology
<ion-icon name="rose" item-end></ion-icon>
</ion-item>
</ion-list>
右侧箭头:
<ion-list>
<ion-item *ngFor="let item of items;let key=index" [ngClass]="{'red':key==0}">
{{ item }}
<ion-icon name="ios-arrow-forward" item-end></ion-icon>
</ion-item>
</ion-list>
列表中的头像 ion-avatar:
item-start 属性: 开头显示
item-end 属性: 结尾显示
<ion-item>
<ion-avatar item-start>
<img src="img/avatar-cher.png">
</ion-avatar>
<h2>Cher</h2>
<p>Ugh. As if.</p>
</ion-item>
列表中的图片 ion-thumbnail:
徽章的列表 ion-badge:
滑动的列表:
滑动列表就是在对应的列表上面滑动可以出现对应的按钮,通过:ion-item-sliding 实现
基本格式:
<ion-list>
<ion-item-sliding>
<ion-item>
数据
</ion-item>
<ion-item-options side='left'>//向左滑
<button ion-button> //按钮里面也可以加图标
分享
</button>
<button ion-button>
收藏
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
表单:
<ion-content>
<!--<ion-list>-->
<!--<ion-item>-->
<!--<ion-label fixed>用户名</ion-label>-->
<!--<ion-input type="input"></ion-input>-->
<!--</ion-item>-->
<!--<ion-item>-->
<!--<ion-label fixed>密码</ion-label>-->
<!--<ion-input type="password"></ion-input>-->
<!--</ion-item>-->
<!--<ion-item>-->
<!--<ion-label>记住密码</ion-label>-->
<!--<ion-toggle checked="false"></ion-toggle>-->
<!--</ion-item>-->
<!--</ion-list>-->
<ion-list>
<ion-item>
<ion-input type="input" placeholder="用户名"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" placeholder="密码"></ion-input>
</ion-item>
</ion-list>
<button ion-button block>登录</button>
</ion-content>
栅格系统:
<ion-content>
<div class="list">//自定义class
<ion-row>
<ion-col col-3><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="people"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="person"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="contact"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="people"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="person"></ion-icon></ion-col>
<ion-col col-3><ion-icon name="contact"></ion-icon></ion-col>
</ion-row>
</div>
</ion-content>
Ionic3X笔记之CSS组件
最新推荐文章于 2022-05-17 13:33:30 发布