我是 ionic 和 angular 的新手，所以我試圖為一個類提供特定的顏色名稱并將其匯出到所有應用程式。我已經使用 react 完成了此操作，但我不確定如何使用 ionic angular：一個示例，其中我已在 react-native 中實作了此功能
color.js
export default {
primary: "#fc5c65",
secondary: "#4ecdc4",
}
我已經將它用于不同的課程，例如
Button.js
const styles = StyleSheet.create({
button: {
backgroundColor: colors.primary,
borderRadius: 25,
}
})
那么如何在 ionic angular 中實作這種結構？我有 color.ts 類
export default {
primary: '#26316d',
secondary: '#8995d6',
};
我正在嘗試使用這些顏色值來scss上課
header.page.scss
.header {
display: flex;
background: #26316d; //I want to use primary instead of color code here
}
uj5u.com熱心網友回復：
您不需要創建.ts檔案，您可以創建custom.scss和
custom.scss
$primary: '#26316d',
$secondary: '#8995d6',
您可以通過匯入到任何 scss
@import "./custom.scss";
.header {
display: flex;
background: $primary;
}
uj5u.com熱心網友回復：
接受的答案效果很好，但我會在處理顏色時添加一些有關首選 Ionic 實作的詳細資訊。默認調色板在 variables.scss 中定義。如您所見，它使用 CSS 變數來定義您的顏色、它們的對比度、提示和陰影。稍后這些變數被 Ionic 組件[color]用于定義背景、前景和狀態顏色的輸入。
通過使用相同的語法，您可以向調色板添加更多顏色：
:root {
--ion-color-mycolor: #69bb7b;
--ion-color-mycolor-rgb: 105,187,123;
--ion-color-mycolor-contrast: #000000;
--ion-color-mycolor-contrast-rgb: 0,0,0;
--ion-color-mycolor-shade: #5ca56c;
--ion-color-mycolor-tint: #78c288;
}
.ion-color-mycolor {
--ion-color-base: var(--ion-color-mycolor);
--ion-color-base-rgb: var(--ion-color-mycolor-rgb);
--ion-color-contrast: var(--ion-color-mycolor-contrast);
--ion-color-contrast-rgb: var(--ion-color-mycolor-contrast-rgb);
--ion-color-shade: var(--ion-color-mycolor-shade);
--ion-color-tint: var(--ion-color-mycolor-tint);
}
宣告顏色后，您可以將其用于 Ionic 組件：
<ion-header color="mycolor"></ion-header>
或直接在您的 (S)CSS 檔案中：
.header {
background: var(--ion-color-mycolor);
color: var(--ion-color-contrast);
}
Ionic 網站上有一個工具可以生成這些變數：https : //ionicframework.com/docs/theming/colors#new-color-creator
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/367277.html
上一篇：Angular-用陣列填充Highcharts網路圖時出錯
下一篇：ngrx狀態未顯示在模板中