Needless UI

کامپوننت‌ها

Select

یک یا چند گزینه را از فهرستی کوتاه یا بسیار بلند انتخاب کنید.

ایمپورت

import-select.ts
import { type NuiOption, NuiSelect } from '@needless-ui/angular/select';

NuiSelect

دکمه‌ای که فهرستی از گزینه‌ها را باز می‌کند.

سلکتور
nui-select
نامنوعپیش‌فرضتوضیح
optionsورودیNuiOption<V>[]گزینه‌ها، به‌صورت اشیای NuiOption.
valueدوطرفهV | nullnullمقدار انتخاب‌شده، یا null. با فرم‌ها هم کار می‌کند.
valuesدوطرفهreadonly V[][]مقدارهای انتخاب‌شده، با multiple.
multipleورودیbooleanfalseانتخاب چند گزینه را ممکن می‌کند. فهرست هنگام انتخاب باز می‌ماند.
selectAllورودیbooleanfalseبا multiple، دکمه‌ای اضافه می‌کند که همهٔ گزینه‌ها را انتخاب یا پاک می‌کند.
placeholderورودیstring'Select…'متنی که تا وقتی چیزی انتخاب نشده نمایش داده می‌شود.
labelورودیstringنام دسترس‌پذیر، وقتی هیچ <label> برای دکمه نام نگذاشته است.
triggerIdورودیstringid دکمه، برای <label for>.
disabledورودیbooleanfalseسلکت را غیرفعال می‌کند.
compareWithورودی(a: V, b: V) => booleanObject.isبرای مقدارهایی که شیء هستند، تعیین می‌کند دو مقدار همان یک گزینه‌اند یا نه.
virtualورودیboolean | 'auto''auto'فقط ردیف‌های در دید را رندر می‌کند: همیشه، هرگز، یا با auto از ۲۰۰ ردیف به بالا.
openChangeخروجیbooleanهنگام باز یا بسته شدن فهرست منتشر می‌شود.
showمتد() => voidفهرست را باز می‌کند.
hideمتد() => voidفهرست را می‌بندد.
focusمتد(options?: FocusOptions) => voidدکمه را فوکوس می‌کند.

هر متنی که نشان می‌دهد یا اعلام می‌کند هم یک ورودی است، پس می‌توانید ترجمه‌اش کنید: selectAllLabel clearAllLabel emptyLabel

NuiOption

یک گزینه. سلکت، کامبوباکس و پالت فرمان همه همین را می‌پذیرند.

نامنوعپیش‌فرضتوضیح
valueویژگیVچیزی که با انتخاب آن تنظیم می‌شود. از هر نوعی.
labelویژگیstringمتنی که نمایش داده و جستجو می‌شود.
descriptionویژگیstringمتن ثانویه زیر برچسب.
groupویژگیstringگزینه‌هایی که گروه یکسانی دارند، به ترتیب زیر همان سرتیتر فهرست می‌شوند.
keywordsویژگیstring[]واژه‌های دیگری که جستجو با آن‌ها تطبیق می‌دهد، مثل مترادف‌ها یا کدها.
disabledویژگیbooleanنمایش داده می‌شود، اما نمی‌توان انتخابش کرد.
childrenویژگیNuiOption<V>[]گزینه‌های یک سطح پایین‌تر که فهرست را به درخت تبدیل می‌کنند.

NuiOptionTemplate

آن را روی یک ng-template درون کامپوننت بگذارید تا هر ردیف را خودتان رسم کنید. کانتکست، گزینه و ردیف آن را در خود دارد.

سلکتور
ng-template[nuiOptionTemplate]

NuiOptionText

برچسب گزینه را همراه با علامت‌گذاری حروف منطبق، توضیح و مسیرش، برای ردیف‌های خودتان رسم می‌کند.

سلکتور
[nuiOptionText]
نامنوعپیش‌فرضتوضیح
nuiOptionTextورودیNuiOptionRow<V>ردیف، از کانتکست قالب.