Needless UI

કમ્પોનન્ટ્સ

Popover

બટનની બાજુમાં તરતી પૅનલ, અને હૉવર પર રિચ ટૂલટિપ.

ઇમ્પોર્ટ

import-popover.ts
import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

NuiPopover

તેને ખોલનાર એલિમેન્ટની બાજુમાં ગોઠવાતું નેટિવ પૉપઓવર.

સિલેક્ટર
[nuiPopover]
એક્સપોર્ટ નામ
nuiPopover
નામપ્રકારડિફૉલ્ટવર્ણન
sideઇનપુટ'top' | 'bottom' | 'start' | 'end''bottom'ટ્રિગરની જે બાજુ તે ખૂલે છે. જગ્યા ન હોય ત્યારે તે ઊલટાઈ જાય છે.
alignઇનપુટ'start' | 'center' | 'end''start'એ બાજુએ તે ટ્રિગર સાથે કેવી રીતે ગોઠવાય છે.
offsetઇનપુટnumber8ટ્રિગર અને પૅનલ વચ્ચેનું અંતર, પિક્સેલમાં.
arrowઇનપુટbooleanfalseટ્રિગર તરફ તાકતું તીર બતાવે છે.
enterઇનપુટNuiEnterતે સ્ક્રીન પર કેવી રીતે આવે છે: zoom, fade, drop, rise, unfold, flip, swing, slide અથવા none.
motionઇનપુટNuiMotionતેની હિલચાલ નક્કી કરતી સ્પ્રિંગ: snappy, bouncy, jelly, elastic, lazy, mechanical અથવા none.
springઇનપુટNuiSpringકોઈ પણ સ્પ્રિંગ, { stiffness, damping, mass } સ્વરૂપે, જે રનટાઇમ પર CSS માં કમ્પાઇલ થાય છે. તે motion ને ઓવરરાઇડ કરે છે.
cornersઇનપુટNuiCornersતેના ખૂણાઓનો આકાર: round, squircle, bevel, scoop, notch અથવા square.
radiusઇનપુટNuiRadiusતેના ખૂણા કેટલા મોટા હોય: none, small, medium, large અથવા full.
densityઇનપુટNuiDensityતે કેટલી જગ્યા રોકે છે: compact, regular અથવા roomy.
openChangeઆઉટપુટbooleanતે ખૂલે કે બંધ થાય ત્યારે એમિટ કરે છે.
showમેથડ(anchor: HTMLElement) => voidતેને કોઈ પણ એલિમેન્ટની બાજુમાં ખોલે છે.
hideમેથડ() => voidતેને બંધ કરે છે.

તમે સેટ ન કરેલાં કસ્ટમાઇઝેશન ઇનપુટ્સ સૌથી નજીકના data-nui-* એટ્રિબ્યુટમાંથી મૂલ્ય લે છે. કસ્ટમાઇઝેશન માર્ગદર્શિકા જુઓ.

NuiPopoverTrigger

નેટિવ popovertarget વડે પૉપઓવર ખોલતું અને બંધ કરતું બટન.

સિલેક્ટર
button[nuiPopoverTrigger]
નામપ્રકારડિફૉલ્ટવર્ણન
nuiPopoverTriggerઇનપુટNuiPopoverખોલવાનું પૉપઓવર.

NuiHovercard

પોતાના ટ્રિગરનું વર્ણન કરતી રિચ ટૂલટિપ.

સિલેક્ટર
[nuiHovercard]
એક્સપોર્ટ નામ
nuiHovercard
નામપ્રકારડિફૉલ્ટવર્ણન
sideઇનપુટ'top' | 'bottom' | 'start' | 'end''bottom'ટ્રિગરની જે બાજુ તે ખૂલે છે. જગ્યા ન હોય ત્યારે તે ઊલટાઈ જાય છે.
alignઇનપુટ'start' | 'center' | 'end''start'એ બાજુએ તે ટ્રિગર સાથે કેવી રીતે ગોઠવાય છે.
offsetઇનપુટnumber8ટ્રિગર અને કાર્ડ વચ્ચેનું અંતર, પિક્સેલમાં.
arrowઇનપુટbooleanfalseટ્રિગર તરફ તાકતું તીર બતાવે છે.
openDelayઇનપુટnumber500ખૂલતાં પહેલાં હૉવરનો સમય, મિલિસેકન્ડમાં. કીબોર્ડ ફોકસ તેને તરત ખોલે છે.
closeDelayઇનપુટnumber300પૉઇન્ટર ખસી ગયા પછી બંધ થતાં પહેલાંનો સમય, મિલિસેકન્ડમાં.
enterઇનપુટNuiEnterતે સ્ક્રીન પર કેવી રીતે આવે છે: zoom, fade, drop, rise, unfold, flip, swing, slide અથવા none.
motionઇનપુટNuiMotionતેની હિલચાલ નક્કી કરતી સ્પ્રિંગ: snappy, bouncy, jelly, elastic, lazy, mechanical અથવા none.
springઇનપુટNuiSpringકોઈ પણ સ્પ્રિંગ, { stiffness, damping, mass } સ્વરૂપે, જે રનટાઇમ પર CSS માં કમ્પાઇલ થાય છે. તે motion ને ઓવરરાઇડ કરે છે.
cornersઇનપુટNuiCornersતેના ખૂણાઓનો આકાર: round, squircle, bevel, scoop, notch અથવા square.
radiusઇનપુટNuiRadiusતેના ખૂણા કેટલા મોટા હોય: none, small, medium, large અથવા full.
densityઇનપુટNuiDensityતે કેટલી જગ્યા રોકે છે: compact, regular અથવા roomy.
openChangeઆઉટપુટbooleanતે ખૂલે કે બંધ થાય ત્યારે એમિટ કરે છે.
showમેથડ(anchor: HTMLElement) => voidતેને કોઈ પણ એલિમેન્ટની બાજુમાં ખોલે છે.
hideમેથડ() => voidતેને બંધ કરે છે.

તમે સેટ ન કરેલાં કસ્ટમાઇઝેશન ઇનપુટ્સ સૌથી નજીકના data-nui-* એટ્રિબ્યુટમાંથી મૂલ્ય લે છે. કસ્ટમાઇઝેશન માર્ગદર્શિકા જુઓ.

NuiHovercardTrigger

હૉવર પર અને કીબોર્ડ ફોકસ પર હૉવરકાર્ડ બતાવે છે, અને તેને આ એલિમેન્ટનું વર્ણન બનાવે છે.

સિલેક્ટર
[nuiHovercardTrigger]
નામપ્રકારડિફૉલ્ટવર્ણન
nuiHovercardTriggerઇનપુટNuiHovercardબતાવવાનું હૉવરકાર્ડ.