naive-ui/demo/documentation/components/input/enUS/disabled.demo.md

44 lines
795 B
Markdown
Raw Normal View History

2019-10-10 14:30:36 +08:00
# Disabled
Input can be disabled.
```html
2020-10-26 12:31:14 +08:00
<n-space vertical>
2020-10-22 12:12:11 +08:00
<n-input
v-model:value="value"
type="input"
size="small"
placeholder="Oops! It is disabled."
:disabled="!active"
round
/>
<n-input
v-model:value="value"
type="textarea"
size="small"
placeholder="Oops! It is disabled."
:disabled="!active"
round
/>
<n-input pair separator="to" v-model:value="value" clearable :disabled="!active">
<template v-slot:affix>
<n-icon><cash-icon /></n-icon>
</template>
</n-input>
<n-switch v-model:value="active" />
</n-space>
2019-10-10 14:30:36 +08:00
```
```js
2020-11-07 00:07:02 +08:00
import { CashOutline as CashIcon } from '@vicons/ionicons-v5'
2019-10-25 11:00:22 +08:00
2019-10-10 14:30:36 +08:00
export default {
2019-10-25 11:00:22 +08:00
components: {
2020-10-22 12:12:11 +08:00
CashIcon
2019-10-25 11:00:22 +08:00
},
2020-10-22 12:12:11 +08:00
data () {
2019-10-10 14:30:36 +08:00
return {
active: false,
value: null
}
}
}
```