ionic基础组件使用：ion-badge、ion-button

ionic组件库说明

ionic提供了一套具有手机样式的组件库。组件库地址：
https://ionicframework.com/docs/components

环境准备

创建一个ionic应用

已经使用命令ionic start命令创建了一个ionic应用，项目文件布局为：

项目创建成功后，package.json文件的内容：

{
  "name": "myAngularIonicApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@capacitor/app": "6.0.1",
    "@capacitor/core": "6.1.2",
    "@capacitor/haptics": "6.0.1",
    "@capacitor/keyboard": "6.0.2",
    "@capacitor/status-bar": "6.0.1",
    "@ionic/angular": "^8.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.0",
    "@angular-eslint/builder": "^18.0.0",
    "@angular-eslint/eslint-plugin": "^18.0.0",
    "@angular-eslint/eslint-plugin-template": "^18.0.0",
    "@angular-eslint/schematics": "^18.0.0",
    "@angular-eslint/template-parser": "^18.0.0",
    "@angular/cli": "^18.0.0",
    "@angular/compiler-cli": "^18.0.0",
    "@angular/language-service": "^18.0.0",
    "@capacitor/cli": "6.1.2",
    "@ionic/angular-toolkit": "^11.0.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.0"
  },
  "description": "An Ionic project"
}

安装ionic的vscode插件，使代码有更多提示

示例：搭建有一个应用的基本结构页面

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

将根组件app.component.html中的内容修改为如下：

展示出来的效果：

示例：徽章徽记组件（ion-badge）

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

颜色

ionic提供了默认的颜色方案：
https://ionicframework.com/docs/theming/basics#colors

展示：

模式

关于风格：每个组件基本上都具备两种风格，ios和md(对应android)，如果不指明，默认会随运行环境自动切换。
也可以通过mode属性来明确指定。

示例：ion-button组件

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

默认按钮

颜色

显示（android风格）：

显示（iOS风格）：

大小属性

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

展示（android风格）：

展示（iOS风格）:

填充

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

展示（android风格）：

展示（iOS风格）：

扩展

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

展示（android风格）:

展示（iOS风格）：

点击

点击按钮：

不可用属性