mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
68 lines
1.6 KiB
Markdown
68 lines
1.6 KiB
Markdown
# Input Group
|
|
```html
|
|
<n-input-group>
|
|
<n-input :style="{ width: '33%' }" v-model="value1" />
|
|
<n-input-number :style="{ width: '33%' }" v-model="value2" />
|
|
<n-input :style="{ width: '33%' }" v-model="value3" />
|
|
</n-input-group>
|
|
<n-input-group>
|
|
<n-input-group-label>https://www.</n-input-group-label>
|
|
<n-input :style="{ width: '33%' }" v-model="value4" />
|
|
<n-input-group-label>.com</n-input-group-label>
|
|
</n-input-group>
|
|
<n-input-group>
|
|
<n-select :style="{ width: '33%' }" v-model="value5" :options="selectOptions" />
|
|
<n-cascader :style="{ width: '33%' }" v-model="value6" :options="cascaderOptions" />
|
|
<n-select :style="{ width: '33%' }" multiple v-model="value7" :options="selectOptions" />
|
|
</n-input-group>
|
|
<n-input-group>
|
|
<n-button type="primary">Search</n-button>
|
|
<n-input :style="{ width: '50%' }" v-model="value8" />
|
|
<n-button type="primary" ghost>Search</n-button>
|
|
</n-input-group>
|
|
<n-input-group>
|
|
<n-date-picker v-model="value9"/>
|
|
<n-time-picker v-model="value10"/>
|
|
</n-input-group>
|
|
```
|
|
```js
|
|
export default {
|
|
data () {
|
|
return {
|
|
value1: null,
|
|
value2: null,
|
|
value3: null,
|
|
value4: null,
|
|
value5: 'option',
|
|
value6: null,
|
|
value7: ['option'],
|
|
value8: null,
|
|
value9: null,
|
|
value10: null,
|
|
selectOptions: [{
|
|
label: 'option',
|
|
value: 'option'
|
|
}],
|
|
cascaderOptions: [
|
|
{
|
|
label: 'option-1',
|
|
value: 'option-1',
|
|
children: [
|
|
{
|
|
label: 'option-1-1',
|
|
value: 'option-1-1'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
```css
|
|
.n-input-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
```
|
|
|