ionic3升级ionic4写法变化大全

Dear 丶 2023-06-05 05:50 65阅读 0赞

*  如题，将记录ionic3升级到ionic4写法上的所有变化
 *  持续更新，欢迎大家补充
 *  无分类，发现一个就写一个
 *  迁移时千万不要把所有代码都复制过来再修改错误，那会让你怀疑人生。正确的顺序是，新建空ionic4工程，然后用指令一个个创建页面，先把页面样式调好，最后再写ts代码逻辑。
 *  qq群320021484，一起讨论学习

## 1.自定义color颜色 ##

<ion-icon color="gray\_text"></ion-icon>

ionic3写法：忘了

ionic4写法：在scss下定义

.ion-color-gray_text {
    
        --ion-color-base: #BBBBBB;
    
        --ion-color-base-rgb: 187,187,187;
    
        --ion-color-contrast: #000000;
    
        --ion-color-contrast-rgb: 0,0,0;
    
        --ion-color-shade: #a5a5a5;
    
        --ion-color-tint: #c2c2c2;
    
    }

这里有6个属性，只需定义第一个base颜色，其他的可以在ionic网站上自动生成[https://ionicframework.com/docs/theming/color-generator][https_ionicframework.com_docs_theming_color-generator]

## 2.自定义小图标 ##

<ion-icon ios="ios-backwhite"></ion-icon>

ionic3写法：.ion-ios-backwhite \{ content: url("../assets/imgs/back\_white.svg");\}

ionic4写法：1.新建svg目录，与app目录平级

2.将ios-backwhite.svg放入svg目录下

3.修改angular.json文件

"assets": [
                  {
                    "glob": "**/*",
                    "input": "src/assets",
                    "output": "assets"
                  },
                  {
                    "glob": "**/*.svg",
                    "input": "node_modules/ionicons/dist/ionicons/svg",
                    "output": "./svg"
                  },
                  {
                    "glob": "**/*.svg",
                    "input": "src/svg",
                    "output": "./svg"
                  }
                ]

## 3.button控件 ##

ionic3写法：

ionic4写法：

<ion-button fill="clear" size="small" shape="round" expand="block"></ion-button>

button以前的写法都失效了，变化大。

## 4.no-lines ##

ionic3写法：<ion-list no-lines>

ionic4写法：<ion-list lines="none">

## 5.item-left、item-end ##

ionic3写法：<ion-item item-left> <ion-item item-end>

ionic4写法：<ion-item slot="start"> <ion-tem slot="end">

其他类似属性请看官网