장
한국어 (Korean)
github
문서블로그벤치마크
fontcolor_theme
Desktop UI

Button

PreviewHTML
OverviewList

Default Button

Active Button

Textured button

Square button

add

Dropdown arrow_down

checkConfirmConfirmcheck

Dropdown items arrow_down

checkDisable all

API <dui-button>(source)

searchclear
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed) 
@Input() auto-focus?: boolean
Whether the button is focused on initial loading. 
@Input() disabled?: boolean
@Input() highlighted?: boolean
Whether the button is highlighted. 
@Input() icon?: string
The icon for this button. Either a icon name same as for dui-icon, or an image path. 
@Input() iconColor?: string
@Input() icon-right?: boolean
@Input() iconSize?: number
Change in the icon size. Should not be necessary usually. 
@Input() primary?: boolean
Whether the button is primary. 
@Input() showHotkey?: boolean
@Input() small?: boolean
Whether the button has no padding and smaller font size 
@Input() square?: boolean
@Input() submitForm?: FormComponent
The form to submit when this button is clicked. 
@Input() textured?: boolean
@Input() tight?: boolean
Whether the button has smaller padding. Better for button with icons. 
@Output() activeChange?: boolean
@Output() destroy?: void
@Output() showHotkeyChange?: boolean
hotKeySize: (hotkey: HotKey) => number
iconOnly: Signal<boolean>
isDisabled: Signal<boolean>
registeredHotkey: WritableSignal<string>
activate(): void

API <dui-tab-button>(source)

searchclear
This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it.
Name
Description 
@Input() active?: boolean
Whether the button is active (pressed). Use alternatively form API, e.g. <dui-tab-button [(ngModel)]="chosen" value="overview"></dui-tab-button> 
@Input() disabled?: boolean
@Input() error?: boolean
@Input() required?: boolean
@Input() valid?: boolean
@Input() value?: any
@Output() disabledChange?: boolean
@Output() valueChange?: any
isDisabled: boolean
isError: null | boolean
isValid: boolean
ngControl: NgControl
routerLinkActive: RouterLinkActive
setValue(value: any): void
Set the value from UI code.

API [hotkey](source)

searchclear

Adds a hotkey to a button.

 Name 
 Description 
@Input() hotkey: string
  
@Output() destroy?: void
  
active: WritableSignal<boolean>
  
registeredHotkey: WritableSignal<string>
  
activate(): void
  
 API [duiFileChooser](source)
searchclear
 This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it. 
Directive to open the native file chooser dialog.
Can be used wth FormsModule (ngModel).


 Name 
 Description 
@Input() disabled?: boolean
  
@Input() duiFileDirectory?: boolean
  
@Input() duiFileMultiple?: boolean
  
@Input() error?: boolean
  
@Input() required?: boolean
  
@Input() valid?: boolean
  
@Input() value?: File[]
  
@Output() disabledChange?: boolean
  
@Output() duiFileChooserChange?: File[]
  
@Output() valueChange?: File[]
  
isDisabled: boolean
  
isError: null | boolean
  
isValid: boolean
  
ngControl: NgControl
  
setValue(value: File[]): void
 Set the value from UI code. 
 API [duiFilePicker](source)
searchclear
 This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it. 
Directive to open the native file picker dialog and return the selected files as Uint8Array.
Can be used wth FormsModule (ngModel).


 Name 
 Description 
@Input() disabled?: boolean
  
@Input() duiFileAutoOpen?: boolean
  
@Input() duiFileMultiple?: boolean
  
@Input() error?: boolean
  
@Input() required?: boolean
  
@Input() valid?: boolean
  
@Input() value?: FilePickerItem[]
  
@Output() disabledChange?: boolean
  
@Output() duiFilePickerChange?: FilePickerItem[]
  
@Output() valueChange?: FilePickerItem[]
  
isDisabled: boolean
  
isError: null | boolean
  
isValid: boolean
  
ngControl: NgControl
  
setValue(value: FilePickerItem[]): void
 Set the value from UI code. 
 API [duiFileDrop](source)
searchclear
 This component is compatible with Angular Forms. You can use [(ngModel)] or formControlName with it. 
Directive to allow dropping files into an area.
Can be used wth FormsModule (ngModel).


 Name 
 Description 
@Input() disabled?: boolean
  
@Input() duiFileDropMultiple?: boolean
  
@Input() error?: boolean
  
@Input() required?: boolean
  
@Input() valid?: boolean
  
@Input() value?: FilePickerItem[]
  
@Output() disabledChange?: boolean
  
@Output() duiFileDropChange?: FilePickerItem[]
  
@Output() valueChange?: FilePickerItem[]
  
i: WritableSignal<number>
  
isDisabled: boolean
  
isError: null | boolean
  
isValid: boolean
  
ngControl: NgControl
  
setValue(value: FilePickerItem[]): void
 Set the value from UI code.