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风格):
点击
点击按钮: