mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:43:32 +09:00
111 lines
1.8 KiB
Markdown
111 lines
1.8 KiB
Markdown
### Focus Colors
|
|
|
|
An `VInput` can have different border colors when focused.
|
|
Simply add the appropriate color modifier class.
|
|
Available classes are `is-primary-focus`, `is-success-focus`,
|
|
`is-info-focus`, `is-warning-focus`, `is-danger-focus`.
|
|
|
|
<!--code-->
|
|
|
|
```vue
|
|
<template>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-primary-focus"
|
|
placeholder="Primary"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-info-focus"
|
|
placeholder="Info"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-success-focus"
|
|
placeholder="Success"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-warning-focus"
|
|
placeholder="Warning"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-danger-focus"
|
|
placeholder="Danger"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
</template>
|
|
```
|
|
|
|
<!--/code-->
|
|
|
|
<!--example-->
|
|
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-primary-focus"
|
|
placeholder="Primary"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-info-focus"
|
|
placeholder="Info"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-success-focus"
|
|
placeholder="Success"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-warning-focus"
|
|
placeholder="Warning"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
<VField>
|
|
<VControl>
|
|
<VInput
|
|
type="text"
|
|
class="is-danger-focus"
|
|
placeholder="Danger"
|
|
/>
|
|
</VControl>
|
|
</VField>
|
|
|
|
<!--/example-->
|