ionicCSS04_卡片

头部导入ionic.min.css

1.ionic卡片

近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 像 Google, Twitter, Spotify..

<div class="content">
	 	<div class="card">
	        <div class="item item-text-wrap">
	          针对移动端的应用,卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做"页"来使用,像左滑,右滑.
	        </div>
      	</div>
      	<div class="card">
	        <div class="item item-text-wrap">
	          卡片(card)默认样式带有box-shadow(阴影),由于性能的原因,和他类似的元素像 list list-inset 并没有阴影。 如果有很多的卡片,每个卡片都有很多子元素,建议使用内嵌列表 inset lists 。
	        </div>
      	</div>
	 </div>


 1.1卡片的头部和底部

 通过添加 item-divider 类为卡片添加头部与底部

<div class="content">
	 	<div class="card">
	        <div class="item item-divider">
			    卡片头部!
			</div>
			<div class="item item-text-wrap">
			    针对移动端的应用,卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做"页"来使用,像左滑,右滑.
			</div>
			<div class="item item-divider">
			    卡片底部!
			</div>
      	</div>
      	<div class="card">
	        <div class="item item-divider">
			    卡片头部!
			</div>
			<div class="item item-text-wrap">
			    卡片(card)默认样式带有box-shadow(阴影),由于性能的原因,和他类似的元素像 list list-inset 并没有阴影。 如果有很多的卡片,每个卡片都有很多子元素,建议使用内嵌列表 inset lists 。
			</div>
			<div class="item item-divider">
			    卡片底部!
			</div>
      	</div>
	 </div>


1.2卡片列表

使用 list card 类来设置卡片列表

<div class="content">
	 	<div class="list card">
	        <a href="#" class="item item-icon-left">
			    <i class="icon ion-home"></i>
			    住址
			</a>
			<a href="#" class="item item-icon-left">
			    <i class="icon ion-home"></i>
			    电话
			</a>
			<a href="#" class="item item-icon-left">
			    <i class="icon ion-wifi"></i>
			    无线网络
			</a>
      	</div>
	 </div>


1.3带图片卡片

item-avatar添加图片头部信息

assertive添加图片底部信息

<div class="content">
	 	<div class="list card">
	        <div class="item item-avatar">
	        	<img src="img/heart.png">
	        	<h2>电影</h2>
	        	<p>我心依旧爱你......</p>
	        </div>
      	</div>
      	<div class="item item-image">
      		<img src="img/cinema.jpeg">
      	</div>
      	<div class="item item-icon-left assertive">
      		<i class="icon ion-videocamera">
      			开始播放
      		</i>
      	</div>
	 </div>


1.4卡片展示

 以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素,并使用了 item-avatar , item-body 元素用于展示图片和文本信息

<div class="content">
	 	<div class="list card">
	 		<div class="item item-avatar">
	          <img src="img/but3.jpeg">
	          <h2>这边风景独好</h2>
	          <p>2017年1月6月</p>
	        </div>
	 	</div>
	 	<div class="item item-body">
	 		<img src="img/cinema.jpeg" width="100%" height="30%">
	 		<p>人不能没有电影的世界</p>
	 		<p>电影是文化传播的媒介</p>
	 		<p>
             <a href="#" class="subdued">9999 喜欢</a>
             <a href="#" class="subdued">9999 评论</a>
             <a href="#" class="subdued">9999 分享</a>
          	</p>
	 	</div>
	 	<div class="item tabs tabs-secondary tabs-icon-left">
          <a class="tab-item" href="#">
            <i class="icon ion-thumbsup"></i>
            喜欢
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-chatbox"></i>
            评论
          </a>
          <a class="tab-item" href="#">
            <i class="icon ion-share"></i>
            分享
          </a>
        </div>
	 </div>



相关内容推荐