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যে হোভারকার্ড দেখাবে।