Dinamikus szín
A mdui dinamikus szín funkciót biztosít. Csak meg kell adnia egy színértéket, és az mdui automatikusan generál egy teljes színsémát. Emellett az mdui támogatja a megadott háttérképből származó alapszín kinyerését és az alapján történő színséma-generálást is.
Bármikor kattinthat a dokumentációs oldal jobb felső sarkában található
Egy színséma egy CSS egyéni tulajdonságcsoport. Az mdui komponensek színértékei erre a CSS egyéni tulajdonságcsoportra hivatkoznak, így egyszerre frissítheti az összes komponens színsémáját. A teljes CSS egyéni tulajdonságlista a Design token - Színek oldalon tekinthető meg.
Színséma generálása
A setColorScheme függvény segítségével generálhat színsémát. Ez a függvény egy hexadecimális színértéket fogad paraméterként, generál egy színsémát, és beállítja azt az oldal <html> elemén. Például:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// A #0061a4 alapján generál egy színsémát, és beállítja a <html> elemet erre a színsémára
setColorScheme('#0061a4');
A második paraméterben megadhatja a target tulajdonságot, amely megadja, hogy melyik elemen állítsa be a színsémát. Például:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// A #0061a4 alapján generál egy színsémát, és beállítja a .foo elemet erre a színsémára
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Alapértelmezés szerint a generált színséma csak a Design token - Színek oldalon felsorolt színeket tartalmazza. A második paraméterben megadhatja a customColors tulajdonságot, amely alapján az mdui a megadott egyéni színnevek és színértékek alapján generál egyéni színcsoportokat. Például:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// A #0061a4 alapján generál egy színsémát, módosítja a meglévő error színcsoport értékét, és hozzáad egy új music színcsoportot
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Egy egyéni színcsoport négy CSS egyéni tulajdonságot tartalmaz:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
A {name} a customColors-ban megadott name mező értéke, vagyis az egyéni szín neve.
Az egyéni színnév lehet a meglévő színsémában már szereplő színnév, például primary, secondary, tertiary, error ilyenek. Ha ezeket a színneveket adja meg egyéni színnévként, akkor a generált színsémában a megfelelő négy CSS egyéni tulajdonság az Ön által megadott színérték alapján generálódik. Például a fenti példában a error nevű egyéni színnevet adta meg. Mivel az error már létezik a meglévő színsémában, és a hozzá tartozó CSS egyéni tulajdonságokat az mdui komponensek a hibaállapot megjelenítésére használják, mivel a színértéket zöldre állította, az mdui komponensek hibaállapota is zöldre változik.
Az egyéni színnév lehet újonnan hozzáadott is, például a fenti példában szereplő music, amely nem létezik a meglévő színsémában. Ekkor a generált színséma további négy CSS egyéni tulajdonságot tartalmaz. A saját stílusaiban hivatkozhat ezekre a CSS egyéni tulajdonságokra:
<style>
.music {
background-color: rgb(var(--mdui-color-music));
color: rgb(var(--mdui-color-on-music));
}
.music-container {
background-color: rgb(var(--mdui-color-music-container));
color: rgb(var(--mdui-color-on-music-container));
}
</style>
<div class="music">Zene</div>
<div class="music-container">Zene konténer</div>
A removeColorScheme függvény segítségével eltávolíthatja a fenti módszerrel generált színsémát. Paraméterben megadhatja, hogy melyik elemről távolítsa el a színsémát. Alapértelmezés szerint a <html> elem színsémáját távolítja el.
Szín kinyerése háttérképből
Az mdui biztosítja a getColorFromImage függvényt, amellyel egy adott Image példányból kinyerheti az alapszínt. Ez a függvény egy Promise-t ad vissza, amelynek feloldási értéke a kinyert hexadecimális színérték.
Ezt a függvénytől kapott színértéket felhasználva meghívhatja a fent említett setColorScheme függvényt a színséma beállításához. Például:
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
const image = new Image();
image.src = 'image1.png';
getColorFromImage(image).then((color) => setColorScheme(color));