Angular-ionicUI-简单组件入手

最新推荐文章于 2022-03-09 17:07:09 发布

置顶

米兔吖0122

最新推荐文章于 2022-03-09 17:07:09 发布

阅读量390

点赞数 1

分类专栏： Angular 文章标签： angular

本文链接：https://blog.csdn.net/happy_1212/article/details/110478716

版权

本文介绍了Angular结合ionicUI进行UI开发的基本步骤，包括启动命令和组件库的使用，如徽章、图标、卡片、输入框、搜索框、item小练习及栅格布局grid，提供了官方文档链接供深入学习。

摘要由CSDN通过智能技术生成

Angular-ionicUI-简单组件入手

项目启动命令:

ionic s

组件库:

https://ionicframework.com/docs/components

按钮组件

https://ionicframework.com/docs/api/button

在这里插入图片描述

<!-- 按钮组件 -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>Button按钮</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <!-- 按钮的风格: 默认会根据设备自动调整 -->
    <ion-button>default</ion-button>
    <!-- 风格属性: mode -->
    <ion-button mode="ios">mode: ios</ion-button>
    <ion-button mode="md">mode: android</ion-button>

    <!-- 大小: size -->
    <ion-button size="small">size:small</ion-button>
    <ion-button size="default">size:default</ion-button>
    <ion-button size="large">size:large</ion-button>

    <!-- 填充: fill -->
    <ion-button fill="clear">fill:clear</ion-button>
    <ion-button fill="outline">fill:outline</ion-button>
    <ion-button fill="solid">fill:solid</ion-button>

    <!-- 扩展性: expand -->
    <ion-button expand="full">expand:full</ion-button>
    <ion-button expand="block">expand:block</ion-button>

    <!-- 颜色风格: color  官方提供了一些固定的颜色风格 -->
    <ion-button color="primary">color:primary</ion-button>
    <ion-button color="secondary">color:secondary</ion-button>
    <ion-button color="success">color:success</ion-button>
    <ion-button color="warning">color:warning</ion-button>
    <ion-button color="danger">color:danger</ion-button>
    <ion-button color="light">color:light</ion-button>
    <ion-button color="dark">color:dark</ion-button>
    <ion-button color="medium">color:medium</ion-button>