Needless UI

કમ્પોનન્ટ્સ

Color picker

OKLCH માં રંગ, સ્લાઇડર, રંગ-નમૂના, આઇડ્રૉપર અને કૉન્ટ્રાસ્ટ ચકાસણી સાથે.

ઇમ્પોર્ટ

import-color-picker.ts
import { NuiColorPicker, nuiParseColor } from '@needless-ui/angular/color-picker';

NuiColorPicker

OKLCH માં કલર પિકર.

સિલેક્ટર
nui-color-picker
નામપ્રકારડિફૉલ્ટવર્ણન
valueદ્વિમાર્ગીstring''રંગ, ફૉર્મેટ મુજબ લખેલો. કોઈ રંગ પસંદ થાય ત્યાં સુધી ખાલી.
formatદ્વિમાર્ગી'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'મૂલ્ય કઈ રીતે લખાય છે.
formatsઇનપુટNuiColorFormat[]hex, rgb, hsl, oklchફૉર્મેટ બટન વારાફરતી જે ફૉર્મેટમાંથી પસાર થાય છે તે.
gamutઇનપુટ'srgb' | 'p3''srgb'રંગ-ક્ષેત્રમાં કયા રંગો હોય છે: sRGB, અથવા Display P3.
alphaઇનપુટbooleantrueઓપૅસિટીનું સ્લાઇડર બતાવે છે.
swatchesઇનપુટNuiColorSwatch[][]પસંદગી માટેના રંગો, નામો સાથે.
contrastWithઇનપુટstringજેની સામે કૉન્ટ્રાસ્ટ ચકાસવાનો છે તે પૃષ્ઠભૂમિ.
eyeDropperઇનપુટbooleantrueબ્રાઉઝરમાં આઇડ્રૉપર હોય ત્યાં તેને બતાવે છે.
disabledઇનપુટbooleanfalseતેને બદલી શકાતું નથી.
labelsઇનપુટPartial<NuiColorPickerLabels>તે જે ટેક્સ્ટ બોલે છે તે દરેક, અનુવાદ માટે.
colorપ્રોપર્ટીSignal<NuiColor>પસંદ કરેલો રંગ, OKLCH માં.

Helpers

રંગો માટે ફંક્શન.

નામપ્રકારડિફૉલ્ટવર્ણન
nuiParseColorમેથડ(text: string) => NuiColor | nullકોઈ પણ CSS સિન્ટૅક્સમાં લખેલો રંગ વાંચે છે.
nuiFormatColorમેથડ(color, format?) => stringરંગને કોઈ ફૉર્મેટમાં લખે છે.
nuiToGamutમેથડ(color, gamut?: 'srgb' | 'p3') => NuiColorCSS ની જેમ રંગને sRGB કે Display P3 ની અંદર લાવે છે.
nuiContrastમેથડ(color, background) => numberપૃષ્ઠભૂમિ પર રંગનો WCAG 2 કૉન્ટ્રાસ્ટ રેશિયો.