الاستيراد
import { NuiColorPicker, nuiParseColor } from '@needless-ui/angular/color-picker';NuiColorPicker
منتقي ألوان في OKLCH.
| الاسم | النوع | القيمة الافتراضية | الوصف |
|---|---|---|---|
valueثنائي الاتجاه | string | '' | اللون، مكتوبًا بالصيغة المحددة. ويبقى فارغًا حتى يُختار لون. |
formatثنائي الاتجاه | 'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3' | 'hex' | الصيغة التي تُكتب بها القيمة. |
formatsمُدخَل | NuiColorFormat[] | hex, rgb, hsl, oklch | الصيغ التي يتنقّل بينها زر الصيغة. |
gamutمُدخَل | 'srgb' | 'p3' | 'srgb' | الألوان التي تضمها المساحة: sRGB أو Display P3. |
alphaمُدخَل | boolean | true | يعرض شريط تمرير العتامة. |
swatchesمُدخَل | NuiColorSwatch[] | [] | ألوان للاختيار منها، بأسمائها. |
contrastWithمُدخَل | string | خلفية يُفحص التباين معها. | |
eyeDropperمُدخَل | boolean | true | يعرض القطّارة، حيث يوفّرها المتصفح. |
disabledمُدخَل | boolean | false | لا يمكن تغييره. |
labelsمُدخَل | Partial<NuiColorPickerLabels> | كل نص يعرضه المنتقي أو يُعلنه، لترجمته. | |
colorخاصية | Signal<NuiColor> | اللون المختار، في OKLCH. |
Helpers
دوال للألوان.
| الاسم | النوع | القيمة الافتراضية | الوصف |
|---|---|---|---|
nuiParseColorدالة | (text: string) => NuiColor | null | يقرأ لونًا مكتوبًا بأي صيغة من صيغ CSS. | |
nuiFormatColorدالة | (color, format?) => string | يكتب لونًا بصيغة معيّنة. | |
nuiToGamutدالة | (color, gamut?: 'srgb' | 'p3') => NuiColor | يُعيد لونًا إلى نطاق sRGB أو Display P3، كما يفعل CSS. | |
nuiContrastدالة | (color, background) => number | نسبة تباين لون على خلفية، وفق WCAG 2. |