mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:13:44 +09:00
first
This commit is contained in:
48
documentation/field/v-field-id-tracking-documentation.md
Normal file
48
documentation/field/v-field-id-tracking-documentation.md
Normal file
@@ -0,0 +1,48 @@
|
||||
### Id Tracking
|
||||
|
||||
The main purpose of the `VField` component is to keep track of an unique input.
|
||||
It can then be used to be used to set `for` and `aria-describedby` attributes.
|
||||
You can create new field context using the `subcontrol` propery
|
||||
on `VControl` and `VField` components.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<VField v-slot="{ id: fieldId }" grouped>
|
||||
<VLabel class="has-fullwidth">
|
||||
Focus {{ fieldId }} field
|
||||
</VLabel>
|
||||
<VControl v-slot="{ id }" subcontrol>
|
||||
<VInput type="text" placeholder="will not receive focus" />
|
||||
<p class="help">
|
||||
field id: {{ id }}
|
||||
</p>
|
||||
</VControl>
|
||||
<VControl v-slot="{ id }" subcontrol>
|
||||
<VInput type="text" placeholder="will receive focus" />
|
||||
<p class="help">
|
||||
field id: {{ id }}
|
||||
</p>
|
||||
</VControl>
|
||||
</VField>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<VField grouped v-slot="{ id: fieldId }">
|
||||
<VLabel class="has-fullwidth">Focus {{ fieldId }} field</VLabel>
|
||||
<VControl subcontrol v-slot="{ id }">
|
||||
<VInput type="text" placeholder="will not receive focus" />
|
||||
<p class="help">field id: {{ id }}</p>
|
||||
</VControl>
|
||||
<VControl v-slot="{ id }" subcontrol>
|
||||
<VInput type="text" placeholder="will receive focus" />
|
||||
<p class="help">field id: {{ id }}</p>
|
||||
</VControl>
|
||||
</VField>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user