ionic中的常用组件(1)

最新推荐文章于 2024-08-19 08:57:51 发布

前端小菜鸡儿

最新推荐文章于 2024-08-19 08:57:51 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ionic

本文链接：https://blog.youkuaiyun.com/qq_44361433/article/details/89416491

ionic 专栏收录该内容

6 篇文章

订阅专栏

本文档介绍了Ionic框架中的一些常用组件，包括从设备底部滑出的ActionSheet、弹出窗口、Badges、Cards、Checkbox、DateTime选择器、Floating Action Buttons (FABs)以及Grid布局。Badges用于展示小数字，Cards支持插入图片和社交卡片设计，Checkbox提供布尔值输入，DateTime则方便用户选择日期和时间。FABs遵循Material设计，而Grid则用于灵活的页面布局。

中文地址：https://yanxiaodi.gitbooks.io/ionic2-guide/content/introduction-to-ionic/
英文地址：https://ionicframework.com/docs/v3/api/components/action-sheet/ActionSheetController/
1,从设备底部滑出的窗口

import { ActionSheetController } from 'ionic-angular';
presentActionSheet() {
    let actionSheet = this.myAction.create({
        title: '设置',
        buttons: [
            {
                text: '个人中心',
                role: 'destructive',
                handler: () => {
                console.log('个人中心');
                }
            },{
                 text: '购物车',
                 handler: () => {
                     console.log('购物车');
                 }
             },{
                 text: '退出',
                 role: 'cancel',
                 handler: () => {
                     console.log('退出');
                 }
             }
         ]
     });
     actionSheet.present();
}

在这里插入图片描述

2，弹出窗口

import { AlertController } from 'ionic-angular'; 
shouAlert(){
      let myal=this.myAlert.create(
        {
          title:'友情提示',
          subTitle: '您卡上的余额已不足，请及时充值！', 
          buttons: ['确定'] 
        }
      )
      myal.present();
  }

在这里插入图片描述

import { ToastController} from 'ionic-angular'; 
this.myToast.create(
      {
        message:'用户名或密码错误！',
        duration:1000,
        position:'bottom'
      }
      ).present();

在这里插入图片描述

3,Badges
Badges是一个小组件，用来向用户显示一个小数字。一般用在一个项中。
基本用法

    <ion-item>
      <ion-icon name="mail"></ion-icon>
          未读邮件
      <ion-badge color="danger" item-right>99+</ion-badge>
    </ion-item>

在这里插入图片描述

图标库：https://ionicons.com/

4，card

    <ion-card>
      <ion-card-header>
          Header
      </ion-card-header>
      <ion-card-content>
      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
      </ion-card-content>
    </ion-card>

    <ion-card>
      <ion-card-header>
          Explore Nearby
      </ion-card-header>
      <ion-list>
          <button ion-item>
              <ion-icon name="cart" item-left></ion-icon>
              Shopping
          </button>
          <button ion-item>
              <ion-icon name="medical" item-left></ion-icon>
              Hospital
          </button>
          <button ion-item>
              <ion-icon name="cafe" item-left></ion-icon>
              Cafe
          </button>
          <button ion-item>
          <ion-icon name="paw" item-left></ion-icon>
              Dog Park
          </button>
          <button ion-item>
              <ion-icon name="beer" item-left></ion-icon>
                  Pub
          </button>
          <button ion-item>
              <ion-icon name="planet" item-left></ion-icon>
              Space
          </button>
      </ion-list>
    </ion-card>

在这里插入图片描述
也可以插入图片

<ion-card>
    <img src="../../assets/imgs/logo.png" />
    <ion-card-content>
      <ion-card-title>
        这是一个logo
      </ion-card-title>
      <p>
        这是一段没有任何含义的废话
      </p>
    </ion-card-content>
  </ion-card>

在这里插入图片描述
Background Images

<ion-content class="card-background-page">
    <ion-card>
        <img src="../../assets/image/1.png"/>
        <div class="card-title">São Paulo</div>
        <div class="card-subtitle">41 Listings</div>
    </ion-card>
    <ion-card>
        <img src="../../assets/image/2.png"/>
        <div class="card-title">Amsterdam</div>
        <div class="card-subtitle">64 Listings</div>
    </ion-card>
    <ion-card>
        <img src="../../assets/image/xiaoguo.jpg"/>
        <div class="card-title">San Francisco</div>
        <div class="card-subtitle">72 Listings</div>
    </ion-card>
    <ion-card>
        <img src="../../assets/image/3.png"/>
        <div class="card-title">Madison</div>
        <div class="card-subtitle">28 Listings</div>
    </ion-card>
</ion-content>

在scss加样式

.card-background-page {
    ion-card {
        position: relative;
        text-align: center;
    }

    .card-title {
        position: absolute;
        top: 36%;
        font-size: 2.0em;
        width: 100%;
        font-weight: bold;
        color: #fff;
    }
    .card-subtitle {
        font-size: 1.0em;
        position: absolute;
        top: 52%;
        width: 100%;
        color: #fff;
    }
}

在这里插入图片描述
Social Cards
在一个App内使用Social Cards是非常必要的。可以使用不同的组件来组成一个Cards，如下面的代码：

<ion-card>
  <ion-item>
      <ion-avatar item-left>
          <img src="../../assets/image/2.png">
      </ion-avatar>
      <h2>不知名的小鸡</h2>
      <p>November 5, 1955</p>
  </ion-item>
  <img src="../../assets/image/2.png">
  <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
  <ion-row>
      <ion-col>
          <button primary clear small>
              <ion-icon name="thumbs-up"></ion-icon>
              <div>12 赞</div>
          </button>
      </ion-col>
      <ion-col>
          <button primary clear small>
              <ion-icon name="text"></ion-icon>
              <div>4 评论</div>
          </button>
      </ion-col>
      <ion-col center text-center>
          <ion-note>
              18分钟前
          </ion-note>
      </ion-col>
  </ion-row>
</ion-card>

在这里插入图片描述
5,Checkbox
CheckBox是一个输入布尔值的组件，与HTML中的Checkbox没什么区别。然后像其他Ionic组件一样，Checkbox在不同的平台上会显示出不同的样式。通过设置checked属性来设置一个默认值，添加disabled属性禁止用户修改值。

<ion-item>
  <ion-label>默认的</ion-label>
  <ion-checkbox color="dark" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
  <ion-label>加了蓝色的</ion-label>
  <ion-checkbox color="blue"></ion-checkbox>
</ion-item>
<ion-item>
  <ion-label>禁用的</ion-label>
  <ion-checkbox disabled="true"></ion-checkbox>
</ion-item>

在这里插入图片描述
6,DateTime
DateTime组件可以让用户方便的选择日期和时间。这个组件和元素有点类似，然而DateTime组件提供了一个更好的方式来显示日期时间的格式，和输入日期时间的方式

7,FABs
FABs(浮动按钮)是标准的Material设计风格组件。这种组件显示为圆形。当按下时，也许会包含更多相关的交互。像它的名字一样，这种按钮会浮动在其他内容之上的固定位置。

<ion-fab top right edge>
      <button ion-fab mini><ion-icon name="add"></ion-icon>                            </button>
       <ion-fab-list>
          <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-fab-list>
  </ion-fab>
  <ion-fab right bottom>
      <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
      <ion-fab-list side="left">
          <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
          <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-fab-list>
  </ion-fab>
  <ion-fab left bottom>
    <button ion-fab color="light"><ion-icon name="arrow-dropup"></ion-icon></button>
    <ion-fab-list side="top">
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>

在这里插入图片描述
8,grid

<ion-grid>
<ion-row>
      <!--列会均等分 行的宽度-->
      <ion-col>
        <button ion-button block>
          第一列
        </button>
      </ion-col>

      <ion-col>
        <button ion-button block>
          第二列
        </button>
      </ion-col>
    </ion-row>
</ion-grid>

demo：
在这里插入图片描述

<ion-grid>
<!--第二行 col-* -->
    <ion-row>
      <ion-col col-3>
        <button ion-button block color="danger">
          第一列
        </button>
      </ion-col>
      <ion-col>
        <button ion-button block color="dark">
          第二列
        </button>
      </ion-col>
    </ion-row>
</ion-grid>

demo：
在这里插入图片描述

<ion-grid>
<!--第三行 offset-* -->
    <ion-row>
      <ion-col col-3>
        <button ion-button block color="danger">
          第一列
        </button>
      </ion-col>
      <ion-col offset-3>
        <button ion-button block color="dark">
          第二列
        </button>
      </ion-col>
    </ion-row>
</ion-grid>

demo：
在这里插入图片描述

<ion-grid>
<!--第四行 居中
        设置行中所有的列的纵向对齐方式：
        align-items-start/center/end
        顶部、中间、尾部对齐
        -->
    <ion-row align-items-center>
      <ion-col col-3>
        <button ion-button block color="danger">
          第一列
        </button>
      </ion-col>
      <ion-col>
        <button ion-button block color="dark">
          第二列
        </button>
        <br>
        <button ion-button block color="dark">
          第二列
        </button>
        <br>
        <button ion-button block color="dark">
          第二列
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color='secondary'>
          第三列
        </button>
      </ion-col>
    </ion-row>
</ion-grid>

demo：
在这里插入图片描述

<ion-grid>
<!--第五行 指定列的纵向对齐方式 -->
    <ion-row>
      <ion-col col-3 align-self-center>
        <button ion-button block color="danger">
          第一列
        </button>
      </ion-col>
      <ion-col>
        <button ion-button block color="dark">
          第二列
        </button>
        <br>
        <button ion-button block color="dark">
          第二列
        </button>
        <br>
        <button ion-button block color="dark">
          第二列
        </button>
      </ion-col>
      <ion-col align-self-end>
        <button ion-button color='secondary'>
          第三列
        </button>
      </ion-col>
    </ion-row>
</ion-grid>

demo：
在这里插入图片描述

<ion-grid>
<!--第六行 列的水平布局-->
    <ion-row justify-content-center>
      <ion-col col-3>
        <button ion-button>btn1</button>
      </ion-col>
    </ion-row>

    <!--第七行 控制列距离左边界、右边界的距离
    push 从左边移动
    pull 从右边移动
    -->
    <ion-row>
      <ion-col col-3 push-9>
        <button ion-button block>btn1</button>
      </ion-col>
      <ion-col col-9 pull-3>
        <button ion-button block>btn2</button>
      </ion-col>
    </ion-row>

  </ion-grid>

demo：
在这里插入图片描述