@nextcloud/vueNcActionInput
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| id | id attribute of the checkbox element | string | - | () => 'action-' + GenRandomId() |
| icon | Icon to show with the action, can be either a CSS class or an URL | string | - | '' |
| type | type attribute of the input field | string | date, datetime-local, month, multiselect, number, password, search, tel, text, time, url, week, color, email | 'text' |
| idNativeDateTimePicker | id attribute for the native date time picker | string | - | 'date-time-picker_id' |
| isNativePicker | Flag to use a native date time picker | boolean | - | false |
| value | value attribute of the input field | string|date|number | - | '' |
| disabled | disabled state of the input field | boolean | - | false |
| ariaLabel | aria-label attribute of the input field | string | - | '' |
Events
| Event name | Properties | Description |
|---|---|---|
| input | Emitted on input events of the text field | |
| change | Emitted on change of the input field | |
| submit | Emitted on submit of the input field | |
| update:value | Emitted when the inputs value changes ! DatetimePicker only send the value |
Slots
| Name | Description | Bindings |
|---|---|---|
| icon | Manually provide icon |
This component is made to be used inside of the NcActions component slots. All undocumented attributes will be bound to the input, the datepicker or the multiselect component, e.g. maxlength, not-before. For the multiselect component, all events will be passed through. Please see the multiselect component's documentation for more details and examples.
<NcActions>
<NcActionInput icon="icon-edit" value="This is an input" />
<NcActionInput icon="icon-edit">This is the placeholder</NcActionInput>
<NcActionInput icon="icon-close" :disabled="true" value="This is a disabled input" />
<NcActionInput icon="icon-edit" type="date">Please pick a date</NcActionInput>
<NcActionInput icon="icon-edit" type="multiselect" :options="['Apple', 'Banana', 'Cherry']">Please pick a fruit</NcActionInput>
</NcActions>