셀렉트 API · Needless UI

가져오기

import-select.ts

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

옵션 목록을 여는 버튼입니다.

NuiSelect: 속성
이름	타입	기본값	설명
`options`입력	`NuiOption<V>[]`		옵션 목록. `NuiOption` 객체로 지정합니다.
`value`양방향	`V \| null`	`null`	선택된 값 또는 `null`. 폼과도 함께 사용할 수 있습니다.
`values`양방향	`readonly V[]`	`[]`	`multiple`일 때 선택된 값 목록.
`multiple`입력	`boolean`	`false`	여러 옵션을 선택할 수 있게 합니다. 고르는 동안 목록이 열린 상태로 유지됩니다.
`selectAll`입력	`boolean`	`false`	`multiple`과 함께 사용하면 모든 옵션을 선택하거나 해제하는 버튼을 추가합니다.
`placeholder`입력	`string`	`'Select…'`	아무것도 선택되지 않았을 때 표시되는 텍스트.
`label`입력	`string`		`<label>`로 버튼의 이름을 지정하지 않을 때 사용하는 접근 가능한 이름.
`triggerId`입력	`string`		`<label for>`에 사용할 버튼의 id.
`disabled`입력	`boolean`	`false`	셀렉트를 비활성화합니다.
`compareWith`입력	`(a: V, b: V) => boolean`	`Object.is`	두 값이 같은 옵션인지 판단합니다. 값이 객체일 때 사용합니다.
`virtual`입력	`boolean \| 'auto'`	`'auto'`	보이는 행만 렌더링합니다: 항상, 안 함, 또는 200행을 넘으면 켜지는 `auto`.
`openChange`출력	`boolean`		목록이 열리거나 닫힐 때 내보냅니다.
`show`메서드	`() => void`		목록을 엽니다.
`hide`메서드	`() => void`		목록을 닫습니다.
`focus`메서드	`(options?: FocusOptions) => void`		버튼에 포커스를 줍니다.

표시하거나 읽어 주는 모든 텍스트도 입력이므로 번역할 수 있습니다: selectAllLabel clearAllLabel emptyLabel

옵션 하나입니다. 셀렉트, 콤보박스, 명령 팔레트 모두 이 형식을 받습니다.

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

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

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