458 lines
15 KiB
Vue
Executable File
458 lines
15 KiB
Vue
Executable File
<template>
|
|
<AppDoc name="InputTextDemo" :sources="sources" github="inputtext/InputTextDemo.vue">
|
|
<h5>Import via Module</h5>
|
|
<pre v-code.script><code>
|
|
import InputText from 'primevue/inputtext';
|
|
|
|
</code></pre>
|
|
|
|
<h5>Import via CDN</h5>
|
|
<pre v-code><code>
|
|
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Getting Started</h5>
|
|
<p>A model can be bound using the standard v-model directive.</p>
|
|
<pre v-code><code>
|
|
<InputText type="text" v-model="value" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Float Label</h5>
|
|
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
|
|
<pre v-code><code>
|
|
<span class="p-float-label">
|
|
<InputText id="username" type="text" v-model="value" />
|
|
<label for="username">Username</label>
|
|
</span>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Icons</h5>
|
|
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i> and <i>p-input-icon-left</i> classes depending on the icon location.</p>
|
|
<pre v-code><code>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-search" />
|
|
<InputText type="text" v-model="value1" placeholder="Search" />
|
|
</span>
|
|
|
|
<span class="p-input-icon-right">
|
|
<InputText type="text" v-model="value2" />
|
|
<i class="pi pi-spin pi-spinner" />
|
|
</span>
|
|
|
|
<span class="p-input-icon-left p-input-icon-right">
|
|
<i class="pi pi-search" />
|
|
<InputText type="text" v-model="value3" />
|
|
<i class="pi pi-spin pi-spinner" />
|
|
</span>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Sizes</h5>
|
|
<p>
|
|
2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>. Note that these classes are mainly be used to change the size of a particular field,
|
|
for global scaling see the <nuxt-link to="/theming">theming</nuxt-link> page.
|
|
</p>
|
|
<pre v-code><code>
|
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
|
<InputText type="text" placeholder="Normal" />
|
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
|
|
|
</code></pre>
|
|
|
|
<p>Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the class to a container element so that descendant inputs share the same style easier.</p>
|
|
<pre v-code><code>
|
|
<div class="p-inputtext-sm">
|
|
<InputText />
|
|
<InputNumber />
|
|
<InputMask />
|
|
</div>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Outlined vs Filled</h5>
|
|
<p>
|
|
Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled
|
|
style. If you prefer to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.
|
|
</p>
|
|
|
|
<pre v-code><code>
|
|
<div class="p-input-filled">
|
|
<InputText type="text" />
|
|
<InputText type="text" />
|
|
<InputText type="text" />
|
|
</div>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Properties</h5>
|
|
<p>InputText passes any valid attribute to the underlying input element, additional attribute is the following.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>modelValue</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>Value of the component.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Events</h5>
|
|
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
|
|
|
|
<h5>Styling</h5>
|
|
<p>Following is the list of structural style classes, for theming classes visit <nuxt-link to="/theming">theming</nuxt-link> page.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Element</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>p-inputtext</td>
|
|
<td>Input element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputtext-sm</td>
|
|
<td>Smaller input element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputtext-lg</td>
|
|
<td>Larger input element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputtext-filled</td>
|
|
<td>Filled input style.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Accessibility</h5>
|
|
<h6>Screen Reader</h6>
|
|
<p>
|
|
InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,
|
|
<i>aria-label</i> props.
|
|
</p>
|
|
|
|
<pre v-code><code>
|
|
<label for="firstname">Firstname</label>
|
|
<InputText id="firstname" />
|
|
|
|
<span id="lastname">Lastname</span>
|
|
<InputText aria-labelledby="lastname" />
|
|
|
|
<InputText aria-label="Age"/>
|
|
|
|
</code></pre>
|
|
|
|
<h6>Keyboard Support</h6>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Function</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><i>tab</i></td>
|
|
<td>Moves focus to the input.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Dependencies</h5>
|
|
<p>None.</p>
|
|
</AppDoc>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
sources: {
|
|
'options-api': {
|
|
tabName: 'Options API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<h5>Basic</h5>
|
|
<InputText type="text" v-model="value1" />
|
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
|
|
|
<h5>Floating Label</h5>
|
|
<span class="p-float-label">
|
|
<InputText id="username" type="text" v-model="value2" />
|
|
<label for="username">Username</label>
|
|
</span>
|
|
|
|
<h5>Left Icon</h5>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-search" />
|
|
<InputText type="text" v-model="value3" placeholder="Search" />
|
|
</span>
|
|
|
|
<h5>Right Icon</h5>
|
|
<span class="p-input-icon-right">
|
|
<i class="pi pi-spin pi-spinner" />
|
|
<InputText type="text" v-model="value4" />
|
|
</span>
|
|
|
|
<h5>Help Text</h5>
|
|
<div class="field">
|
|
<label for="username1">Username</label>
|
|
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
|
<small id="username1-help">Enter your username to reset your password.</small>
|
|
</div>
|
|
|
|
<h5>Invalid</h5>
|
|
<div class="field">
|
|
<label for="username2">Username</label>
|
|
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
|
<small id="username2-help" class="p-error">Username is not available.</small>
|
|
</div>
|
|
|
|
<h5>Disabled</h5>
|
|
<InputText type="text" v-model="value5" disabled />
|
|
|
|
<h5>Sizes</h5>
|
|
<div class="sizes">
|
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
|
<InputText type="text" placeholder="Normal" />
|
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: null,
|
|
value2: null,
|
|
value3: null,
|
|
value4: null,
|
|
value5: 'PrimeVue'
|
|
}
|
|
}
|
|
}
|
|
<\\/script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sizes {
|
|
.p-inputtext {
|
|
display: block;
|
|
margin-bottom: .5rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field * {
|
|
display: block;
|
|
}
|
|
</style>`
|
|
},
|
|
'composition-api': {
|
|
tabName: 'Composition API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<h5>Basic</h5>
|
|
<InputText type="text" v-model="value1" />
|
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
|
|
|
<h5>Floating Label</h5>
|
|
<span class="p-float-label">
|
|
<InputText id="username" type="text" v-model="value2" />
|
|
<label for="username">Username</label>
|
|
</span>
|
|
|
|
<h5>Left Icon</h5>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-search" />
|
|
<InputText type="text" v-model="value3" placeholder="Search" />
|
|
</span>
|
|
|
|
<h5>Right Icon</h5>
|
|
<span class="p-input-icon-right">
|
|
<i class="pi pi-spin pi-spinner" />
|
|
<InputText type="text" v-model="value4" />
|
|
</span>
|
|
|
|
<h5>Help Text</h5>
|
|
<div class="field">
|
|
<label for="username1">Username</label>
|
|
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
|
<small id="username1-help">Enter your username to reset your password.</small>
|
|
</div>
|
|
|
|
<h5>Invalid</h5>
|
|
<div class="field">
|
|
<label for="username2">Username</label>
|
|
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
|
<small id="username2-help" class="p-error">Username is not available.</small>
|
|
</div>
|
|
|
|
<h5>Disabled</h5>
|
|
<InputText type="text" v-model="value5" disabled />
|
|
|
|
<h5>Sizes</h5>
|
|
<div class="sizes">
|
|
<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
|
|
<InputText type="text" placeholder="Normal" />
|
|
<InputText type="text" class="p-inputtext-lg" placeholder="Large" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue';
|
|
|
|
export default {
|
|
setup() {
|
|
const value1 = ref();
|
|
const value2 = ref();
|
|
const value3 = ref();
|
|
const value4 = ref();
|
|
const value5 = ref('PrimeVue');
|
|
|
|
return { value1, value2, value3, value4, value5 }
|
|
}
|
|
}
|
|
<\\/script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sizes {
|
|
.p-inputtext {
|
|
display: block;
|
|
margin-bottom: .5rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.field * {
|
|
display: block;
|
|
}
|
|
</style>`
|
|
},
|
|
'browser-source': {
|
|
tabName: 'Browser Source',
|
|
content: `<div id="app">
|
|
<div class="card">
|
|
<h5>Basic</h5>
|
|
<p-inputtext type="text" v-model="value1"></p-inputtext>
|
|
<span :style="{marginLeft: '.5em'}">{{value1}}</span>
|
|
|
|
<h5>Floating Label</h5>
|
|
<span class="p-float-label">
|
|
<p-inputtext id="username" type="text" v-model="value2"></p-inputtext>
|
|
<label for="username">Username</label>
|
|
</span>
|
|
|
|
<h5>Left Icon</h5>
|
|
<span class="p-input-icon-left">
|
|
<i class="pi pi-search"></i>
|
|
<p-inputtext type="text" v-model="value3" placeholder="Search"></p-inputtext>
|
|
</span>
|
|
|
|
<h5>Right Icon</h5>
|
|
<span class="p-input-icon-right">
|
|
<i class="pi pi-spin pi-spinner"></i>
|
|
<p-inputtext type="text" v-model="value4"></p-inputtext>
|
|
</span>
|
|
|
|
<h5>Help Text</h5>
|
|
<div class="field">
|
|
<label for="username1">Username</label>
|
|
<p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
|
|
<small id="username1-help">Enter your username to reset your password.</small>
|
|
</div>
|
|
|
|
<h5>Invalid</h5>
|
|
<div class="field">
|
|
<label for="username2">Username</label>
|
|
<p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
|
|
<small id="username2-help" class="p-error">Username is not available.</small>
|
|
</div>
|
|
|
|
<h5>Disabled</h5>
|
|
<p-inputtext type="text" v-model="value5" disabled></p-inputtext>
|
|
|
|
<h5>Sizes</h5>
|
|
<div class="sizes">
|
|
<p-inputtext type="text" class="p-inputtext-sm" placeholder="Small"></p-inputtext>
|
|
<p-inputtext type="text" placeholder="Normal"></p-inputtext>
|
|
<p-inputtext type="text" class="p-inputtext-lg" placeholder="Large"></p-inputtext>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
const { createApp, ref } = Vue;
|
|
|
|
const App = {
|
|
setup() {
|
|
const value1 = ref();
|
|
const value2 = ref();
|
|
const value3 = ref();
|
|
const value4 = ref();
|
|
const value5 = ref('PrimeVue');
|
|
|
|
return { value1, value2, value3, value4, value5 }
|
|
},
|
|
components: {
|
|
"p-inputtext": primevue.inputtext
|
|
}
|
|
};
|
|
|
|
createApp(App)
|
|
.use(primevue.config.default)
|
|
.mount("#app");
|
|
<\\/script>
|
|
|
|
<style>
|
|
.sizes .p-inputtext {
|
|
display: block;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.sizes:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.field * {
|
|
display: block;
|
|
}
|
|
</style>`
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|