vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

InputGroupDemo

pull/12/head
cagataycivici 2019-01-08 23:59:11 +03:00
parent cb718f1694
commit 10c42cc444
3 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -12,6 +12,7 @@
<router-link to="/chips">&#9679; Chips</router-link>
<router-link to="/dropdown">&#9679; Dropdown</router-link>
<router-link to="/editor">&#9679; Editor</router-link>
<router-link to="/inputgroup">&#9679; InputGroup</router-link>
<router-link to="/inputswitch">&#9679; InputSwitch</router-link>
<router-link to="/inputtext">&#9679; InputText</router-link>
<router-link to="/listbox">&#9679; Listbox</router-link>

5
src/router.js
View File

@ -101,6 +101,11 @@ export default new Router({
name: 'fullcalendar',
component: () => import('./views/fullcalendar/FullCalendarDemo.vue')
},
{
path: '/inputgroup',
name: 'inputgroup',
component: () => import('./views/inputgroup/InputGroupDemo.vue')
},
{
path: '/inputswitch',
name: 'inputswitch',

131
src/views/inputgroup/InputGroupDemo.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputGroup</h1>
<p>Text, icon, buttons and other content can be grouped next to an input.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Addons</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user"></i>
</span>
<InputText placeholder="Username" />
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">$</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">W</span>
<InputText placeholder="Website" />
</div>
</div>
</div>
<h3>Multiple Addons</h3>
<div class="p-grid">
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-clock"></i>
</span>
<span class="p-inputgroup-addon">
<i class="pi pi-star"></i>
</span>
<InputText placeholder="Price" />
<span class="p-inputgroup-addon">$</span>
<span class="p-inputgroup-addon">.00</span>
</div>
</div>
</div>
<h3>Button Addons</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button label="Search"/>
<InputText placeholder="Keyword"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Keyword"/>
<Button icon="pi pi-search" class="p-button-warning"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<Button icon="pi pi-check" class="p-button-success"/>
<InputText placeholder="Vote"/>
<Button icon="pi pi-times" class="p-button-danger"/>
</div>
</div>
</div>
<h3>Checkbox and RadioButton</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked1" />
</span>
<InputText placeholder="Username"/>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<InputText placeholder="Price"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb1" value="rb1" v-model="radioValue1" />
</span>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<Checkbox v-model="checked2" />
</span>
<InputText placeholder="Website"/>
<span class="p-inputgroup-addon">
<RadioButton name="rb2" value="rb2" v-model="radioValue2" />
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: false,
radioValue1: '',
radioValue2: ''
}
}
}
</script>
<style>
</style>