@nextcloud/vueNcTextField
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| trailingButtonIcon | Specifies which material design icon should be used for the trailing button. Value can be close, arrowRight, or undo. | string | close, arrowRight, undo | 'close' |
Events
| Event name | Properties | Description |
|---|---|---|
| update:value |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Description
See NcInputField for a list of all available props.
General purpose text field component. Note: the inner html input element inherits all the attributes from the NcTextField component so you can add things like autocomplete, maxlength and minlength.
<template>
<div class="wrapper">
<NcTextField :value.sync="text1"
label="Leading icon and clear trailing button"
trailing-button-icon="close"
:show-trailing-button="text1 !== ''"
@trailing-button-click="clearText">
<Magnify :size="16" />
</NcTextField>
<NcTextField :value.sync="text2"
label="Success state"
:success="true"
@trailing-button-click="clearText">
</NcTextField>
<NcTextField :value.sync="text3"
label="Error state"
:error="true"
@trailing-button-click="clearText">
</NcTextField>
<NcTextField :value.sync="text4"
label="Internal label"
placeholder="That can be used together with placeholder"
:label-visible="true"
trailing-button-icon="close"
:show-trailing-button="text4 !== ''"
@trailing-button-click="clearText">
<Lock :size="16" />
</NcTextField>
<div class="external-label">
<label for="textField">External label</label>
<NcTextField :value.sync="text5"
id="textField"
:label-outside="true"
@trailing-button-click="clearText" />
</div>
</div>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify'
import Lock from 'vue-material-design-icons/Lock'
import Close from 'vue-material-design-icons/Close'
export default {
data() {
return {
text1: '',
text2: '',
text3: '',
text4: '',
text5: '',
}
},
components: {
Magnify,
Lock,
Close,
},
methods: {
clearText() {
this.text1 = ''
this.text3 = ''
}
}
}
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
gap: 4px;
align-items: flex-end;
flex-wrap: wrap;
}
.external-label {
display: flex;
width: 100%;
margin-top: 1rem;
}
.external-label label {
padding-top: 7px;
padding-right: 14px;
white-space: nowrap;
}
</style>