콤보박스 API · Needless UI

가져오기

import-combobox.ts

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

NuiCombobox

입력하는 대로 옵션을 제안하는 텍스트 필드입니다.

셀렉터: nui-combobox

NuiCombobox: 속성
이름	타입	기본값	설명
`options`입력	`NuiOption<V>[]`		옵션 목록. `NuiOption` 객체로 지정합니다.
`value`양방향	`V \| null`	`null`	선택된 값 또는 `null`. 폼과도 함께 사용할 수 있습니다.
`values`양방향	`readonly V[]`	`[]`	`multiple`일 때 선택된 값 목록.
`multiple`입력	`boolean`	`false`	여러 옵션을 선택할 수 있게 하며, 선택한 옵션은 칩으로 표시됩니다.
`create`입력	`(text: string) => V`		입력한 텍스트로 값을 만듭니다. 옵션에 없는 텍스트는 목록에서 추가하도록 제안합니다.
`filtering`입력	`boolean`	`true`	입력하는 대로 옵션을 필터링합니다. 서버에서 필터링할 때는 끕니다.
`loading`입력	`boolean`	`false`	결과를 기다리는 동안 로딩 행을 표시합니다.
`clearable`입력	`boolean`	`false`	값을 지우는 버튼을 추가하고, Esc 키로도 지울 수 있게 합니다.
`placeholder`입력	`string`	`''`	필드가 비어 있을 때 표시되는 텍스트.
`label`입력	`string`		`<label>`로 필드의 이름을 지정하지 않을 때 사용하는 접근 가능한 이름.
`inputId`입력	`string`		`<label for>`에 사용할 텍스트 필드의 id.
`disabled`입력	`boolean`	`false`	필드를 비활성화합니다.
`compareWith`입력	`(a: V, b: V) => boolean`	`Object.is`	두 값이 같은 옵션인지 판단합니다. 값이 객체일 때 사용합니다.
`displayWith`입력	`(value: V) => string`	`String`	옵션에 없는 값에 표시할 텍스트. 예를 들어 옵션을 불러오기 전에 설정된 값에 사용합니다.
`virtual`입력	`boolean \| 'auto'`	`'auto'`	보이는 행만 렌더링합니다: 항상, 안 함, 또는 200행을 넘으면 켜지는 `auto`.
`queryChange`출력	`string`		입력되는 텍스트를 내보냅니다. 서버 검색에 사용합니다.
`openChange`출력	`boolean`		목록이 열리거나 닫힐 때 내보냅니다.
`show`메서드	`() => void`		목록을 엽니다.
`hide`메서드	`() => void`		목록을 닫습니다.
`clear`메서드	`() => void`		값과 텍스트를 지웁니다.
`focus`메서드	`(options?: FocusOptions) => void`		텍스트 필드에 포커스를 줍니다.

표시하거나 읽어 주는 모든 텍스트도 입력이므로 번역할 수 있습니다: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

컴포넌트 안의 ng-template에 지정하면 각 행을 직접 그릴 수 있습니다. 컨텍스트에는 옵션과 해당 행이 들어 있습니다.

셀렉터: ng-template[nuiOptionTemplate]

NuiOptionText

옵션의 레이블(일치한 글자 표시 포함), 설명, 경로를 그립니다. 직접 만든 행에서 사용합니다.

셀렉터: [nuiOptionText]

NuiOptionText: 속성
이름	타입	기본값	설명
`nuiOptionText`입력	`NuiOptionRow<V>`		템플릿 컨텍스트에서 가져온 행.