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

meta tags added

pull/3420/head
Tuğçe Küçükoğlu 2022-12-19 14:57:07 +03:00
parent 5d3f5a2139
commit 52b5d65c49
97 changed files with 573 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/accessibility/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Accessibility - PrimeVue</Title>
<Meta name="description" content="Accessible Vue UI Components." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Accessibility</h1>

5
pages/accordion/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Accordion Component</Title>
<Meta name="description" content="Accordion groups a collection of contents in tabs." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Accordion</h1>

5
pages/autocomplete/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue AutoComplete Component</Title>
<Meta name="description" content="AutoComplete is an input component that provides real-time suggestions when being typed." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>AutoComplete</h1>

5
pages/avatar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Avatar Component</Title>
<Meta name="description" content="Avatar represents people using icons, labels and images." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Avatar</h1>

5
pages/badge/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Badge Component</Title>
<Meta name="description" content="Badge is a small status indicator for another element." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Badge</h1>

5
pages/blockui/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue BlockUI Component</Title>
<Meta name="description" content="BlockUI can either block other components or the whole page." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>BlockUI</h1>

5
pages/breadcrumb/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue BreadCrumb Component</Title>
<Meta name="description" content="Breadcrumb provides contextual information about page hierarchy." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Breadcrumb</h1>

5
pages/button/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Button Component</Title>
<Meta name="description" content="Button is an extension to standard input element with icons and theming." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Button</h1>

5
pages/calendar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Calendar Component</Title>
<Meta name="description" content="Calendar also known as DatePicker, is a form component to work with dates." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Calendar</h1>

5
pages/card/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Card Component</Title>
<Meta name="description" content="Card is a flexible container component." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Card</h1>

5
pages/carousel/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Carousel Component</Title>
<Meta name="description" content="Carousel is a content slider featuring various customization options." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Carousel</h1>

5
pages/cascadeselect/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue CascadeSelect Component</Title>
<Meta name="description" content="CascadeSelect is a form component to select a value from a nested structure of options." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>CascadeSelect</h1>

4
pages/chart/index.vue
View File

@ -1,5 +1,9 @@
<template>
<div>
<Head>
<title>Vue Chart</title>
</Head>
<ChartDoc />
</div>
</template>

5
pages/checkbox/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Checkbox Component</Title>
<Meta name="description" content="Checkbox is an extension to standard checkbox element with theming." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Checkbox</h1>

5
pages/chip/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Chip Component</Title>
<Meta name="description" content="Chip represents entities using icons, labels and images." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Chip</h1>

5
pages/chips/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Chips Component</Title>
<Meta name="description" content="Chips is used to enter multiple values on an input field." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Chips</h1>

5
pages/colorpicker/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ColorPicker Component</Title>
<Meta name="description" content="ColorPicker is an input component to select a color." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ColorPicker</h1>

5
pages/colors/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Color System - PrimeVue</Title>
<Meta name="description" content="Each PrimeVue theme exports its own color palette." />
</Head>
<div class="content-section documentation">
<h1>Colors</h1>
<p>Each PrimeVue theme exports its own color palette.</p>

5
pages/confirmdialog/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Confirmation Dialog Component</Title>
<Meta name="description" content="ConfirmDialog uses a Dialog UI with confirmDialog method or ConfirmDialog tag" />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ConfirmDialog</h1>

5
pages/confirmpopup/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Confirmation Popup Component</Title>
<Meta name="description" content="ConfirmPopup displays a confirmation overlay displayed relatively to its target." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ConfirmPopup</h1>

5
pages/contextmenu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ContextMenu Component</Title>
<Meta name="description" content="ContextMenu displays an overlay menu on right click of its target." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ContextMenu</h1>

5
pages/datatable/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Table Component</Title>
<Meta name="description" content="DataTable displays data in tabular format" />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataTable</h1>

5
pages/dataview/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue DataView Component</Title>
<Meta name="description" content="DataView displays data in grid or list layout with pagination and sorting features." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DataView</h1>

5
pages/deferredcontent/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Deferred Content Component</Title>
<Meta name="description" content="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>DeferredContent</h1>

5
pages/dialog/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Dialog Component</Title>
<Meta name="description" content="Dialog is a container to display content in an overlay window." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Dialog</h1>

5
pages/divider/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Divider Component</Title>
<Meta name="description" content="Divider is used to separate contents." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Divider</h1>

5
pages/dock/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Dock Component</Title>
<Meta name="description" content="Dock is a navigation component consisting of menuitems." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Dock</h1>

5
pages/dropdown/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Select Component</Title>
<Meta name="description" content="Dropdown also known as Select, is used to choose an item from a collection of options." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Dropdown</h1>

5
pages/dynamicdialog/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Dynamic Dialog Component</Title>
<Meta name="description" content="Dynamic Dialog is a Dialog container to display content dynamicaly in an overlay window." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Dynamic Dialog</h1>

5
pages/editor/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Editor Component</Title>
<Meta name="description" content="Editor is rich text editor component based on Quill." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Editor</h1>

5
pages/fieldset/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Fieldset Component</Title>
<Meta name="description" content="Fieldset is a grouping component with a content toggle feature." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Fieldset</h1>

5
pages/fileupload/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Upload Component</Title>
<Meta name="description" content="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>FileUpload</h1>

5
pages/filterservice/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Filter Service</Title>
<Meta name="description" content="PrimeVue Filter Service is a helper utility to filter." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>FilterService</h1>

93
pages/focustrap/index.vue
View File

@ -1,54 +1,61 @@
<template>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Focus Trap</h1>
<p>Focus Trap keeps focus within a certain DOM element while tabbing.</p>
</div>
<AppDemoActions />
</div>
<div>
<Head>
<Title>Vue FocsuTrap Directive</Title>
<Meta name="description" content="Focus Trap keeps focus within a certain DOM element while tabbing." />
</Head>
<div class="content-section implementation focustrap-demo">
<div class="flex justify-content-center p-fluid">
<div v-focustrap class="card">
<div class="field">
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div>
<div class="field">
<div class="p-input-icon-right">
<i class="pi pi-envelope" />
<InputText id="email" v-model="email" type="email" placeholder="Email" />
<div class="content-section introduction">
<div class="feature-intro">
<h1>Focus Trap</h1>
<p>Focus Trap keeps focus within a certain DOM element while tabbing.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation focustrap-demo">
<div class="flex justify-content-center p-fluid">
<div v-focustrap class="card">
<div class="field">
<InputText id="input" v-model="name" type="text" placeholder="Name" autofocus />
</div>
</div>
<div class="field">
<div class="p-float-label">
<Password v-model="password">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer>
<Divider />
<p class="mt-2">Suggestions</p>
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
<label for="password">Password</label>
<div class="field">
<div class="p-input-icon-right">
<i class="pi pi-envelope" />
<InputText id="email" v-model="email" type="email" placeholder="Email" />
</div>
</div>
<div class="field">
<div class="p-float-label">
<Password v-model="password">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer>
<Divider />
<p class="mt-2">Suggestions</p>
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
<label for="password">Password</label>
</div>
</div>
<div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
<label for="accept">I agree to the terms and conditions*</label>
</div>
<Button type="submit" label="Submit" class="mt-2" />
</div>
<div class="field-checkbox">
<Checkbox id="accept" v-model="accept" name="accept" value="Accept" />
<label for="accept">I agree to the terms and conditions*</label>
</div>
<Button type="submit" label="Submit" class="mt-2" />
</div>
</div>
</div>
<FocusTrapDoc />
<FocusTrapDoc />
</div>
</template>
<script>

45
pages/galleria/index.vue
View File

@ -1,26 +1,33 @@
<template>
<div class="galleria-demo">
<div class="content-section introduction">
<div class="feature-intro">
<h1>Galleria</h1>
<p>Galleria is an advanced content gallery component.</p>
</div>
</div>
<div>
<Head>
<Title>Vue Gallery Component</Title>
<Meta name="description" content="Galleria is a content gallery component." />
</Head>
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
<div class="galleria-demo">
<div class="content-section introduction">
<div class="feature-intro">
<h1>Galleria</h1>
<p>Galleria is an advanced content gallery component.</p>
</div>
</div>
</div>
<GalleriaDoc />
<div class="content-section implementation">
<div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</div>
<GalleriaDoc />
</div>
</div>
</template>

5
pages/icons/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Icon Library - PrimeVue</Title>
<Meta name="description" content="PrimeVue components internally use PrimeIcons library." />
</Head>
<div class="content-section documentation">
<h1>Icons</h1>
<p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr">PrimeTek</a>.</p>

5
pages/image/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Image Component</Title>
<Meta name="description" content="Displays an image with preview and tranformation options." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Image</h1>

5
pages/inplace/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Inplace Component</Title>
<Meta name="description" content="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Inplace</h1>

5
pages/inputgroup/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue InputGroup Component</Title>
<Meta name="description" content="Text, icon, buttons and other content can be grouped next to an input." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputGroup</h1>

5
pages/inputmask/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Mask Component</Title>
<Meta name="description" content="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputMask</h1>

5
pages/inputnumber/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue InputNumber Component</Title>
<Meta name="description" content="InputNumber is an input component to provide numerical input." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputNumber</h1>

5
pages/inputswitch/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue InputSwitch Component</Title>
<Meta name="description" content="InputSwitch is used to select a boolean value." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputSwitch</h1>

5
pages/inputtext/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue InputText Component</Title>
<Meta name="description" content="InputText is an extension to standard input element with theming and keyfiltering." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputText</h1>

5
pages/knob/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Knob Component</Title>
<Meta name="description" content="Knob is a form component to define number inputs with a dial." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Knob</h1>

5
pages/listbox/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ListBox Component</Title>
<Meta name="description" content="ListBox is used to select one or more values from a list of items." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Listbox</h1>

5
pages/locale/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Locale - PrimeVue</Title>
<Meta name="description" content="The Locale API allows setting i18n and l7n options globally for the components." />
</Head>
<div class="content-section documentation">
<h1>Internationalization and Localization</h1>
<p>The Locale API allows setting <b>i18n</b> and <b>l7n</b> options globally for the components.</p>

5
pages/megamenu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue MegaMenu Component</Title>
<Meta name="description" content="MegaMenu is navigation component that displays submenus together." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>MegaMenu</h1>

5
pages/menu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Menu Component</Title>
<Meta name="description" content="Menu is a navigation/command component that supports dynamic and static positioning." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Menu</h1>

5
pages/menubar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Navbar Component</Title>
<Meta name="description" content="Menubar is a horizontal menu component." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Menubar</h1>

5
pages/menumodel/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>MenuModel - PrimeVue</Title>
<Meta name="description" content="PrimeVue menus components share a common api to specify the menuitems and submenus." />
</Head>
<div class="content-section documentation">
<h1>MenuModel</h1>
<p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>

5
pages/message/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Messages Component</Title>
<Meta name="description" content="Messages is used to display inline messages with various severities." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Message</h1>

5
pages/multiselect/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue MultiSelect Component</Title>
<Meta name="description" content="MultiSelect is used to select multiple items from a collection." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>MultiSelect</h1>

5
pages/orderlist/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue OrderList Component</Title>
<Meta name="description" content="OrderList is used to sort a collection." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>OrderList</h1>

5
pages/organizationchart/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue OrganizationChart Component</Title>
<Meta name="description" content="OrganizationChart visualizes hierarchical organization data." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>OrganizationChart</h1>

7
pages/overlaypanel/index.vue
View File

@ -1,9 +1,14 @@
<template>
<div>
<Head>
<Title>Vue Popover Component</Title>
<Meta name="description" content="OverlayPanel also known as Popover, is a container component that can overlay other components on page." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>OverlayPanel</h1>
<p>OverlayPanel is a container component positioned as connected to its target.</p>
<p>OverlayPanel also known as Popover, is a container component that can overlay other components on page.</p>
</div>
<AppDemoActions />
</div>

5
pages/paginator/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Paginator Component</Title>
<Meta name="description" content="Paginator is a generic widget to display content in paged format." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Paginator</h1>

5
pages/panel/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Panel Component</Title>
<Meta name="description" content="Panel is a grouping component providing with content toggle feature." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Panel</h1>

5
pages/panelmenu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue PanelMenu Component</Title>
<Meta name="description" content="PanelMenu is a hybrid of accordion-tree components." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>PanelMenu</h1>

5
pages/password/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Password Component</Title>
<Meta name="description" content="Password displays strength indicator for password fields." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Password</h1>

5
pages/picklist/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue PickList Component</Title>
<Meta name="description" content="PickList is used to reorder items between different lists." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>PickList</h1>

5
pages/progressbar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ProgressBar Component</Title>
<Meta name="description" content="ProgressBar is a process status indicator." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ProgressBar</h1>

5
pages/progressspinner/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ProgressSpinner Component</Title>
<Meta name="description" content="ProgressSpinner is a process status indicator." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ProgressSpinner</h1>

5
pages/radiobutton/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue RadioButton Component</Title>
<Meta name="description" content="RadioButton is an extension to standard radio button element with theming." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>RadioButton</h1>

5
pages/rating/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Rating Component</Title>
<Meta name="description" content="Rating component is a star based selection input." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Rating</h1>

5
pages/ripple/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Ripple Directive</Title>
<Meta name="description" content="Ripple component adds ripple effect to the host element." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Ripple</h1>

9
pages/roadmap/index.vue
View File

@ -1,5 +1,14 @@
<template>
<div>
<Head>
<Title>Vue Roadmap</Title>
<Meta
name="description"
content="These are planned to be implemented in parellel to the regular
maintenance work of the PrimeVue library"
/>
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Roadmap</h1>

5
pages/scrollpanel/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ScrollPanel Component</Title>
<Meta name="description" content="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ScrollPanel</h1>

5
pages/scrolltop/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ScrollTop Component</Title>
<Meta name="description" content="ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ScrollTop</h1>

5
pages/selectbutton/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue SelectButton Component</Title>
<Meta name="description" content="SelectButton is used to choose single or multiple items from a list using buttons." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>SelectButton</h1>

5
pages/setup/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Getting Started - PrimeVue</Title>
<Meta name="description" content="PrimeVue is a rich set of open source native components for Vue." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Setup</h1>

5
pages/sidebar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Sidebar Component</Title>
<Meta name="description" content="Sidebar is a panel component displayed as an overlay." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Sidebar</h1>

5
pages/skeleton/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Skeleton Component</Title>
<Meta name="description" content="Skeleton is a placeholder to display instead of the actual content." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Skeleton</h1>

5
pages/slider/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Slider Component</Title>
<Meta name="description" content="Slider is a component to provide input with a drag handle." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Slider</h1>

5
pages/speeddial/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Speed Dial Component</Title>
<Meta name="description" content="When pressed, a floating action button can display multiple primary actions that can be performed on a page." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Speed Dial</h1>

5
pages/splitbutton/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue SplitButton Component</Title>
<Meta name="description" content="SplitButton groups a set of commands in an overlay with a default command." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>SplitButton</h1>

5
pages/splitter/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Splitter Component</Title>
<Meta name="description" content="Splitter is utilized to separate and resize panels." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Splitter</h1>

5
pages/steps/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Stepper Component</Title>
<Meta name="description" content="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Steps</h1>

41
pages/styleclass/index.vue
View File

@ -1,28 +1,35 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>StyleClass</h1>
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
<Head>
<Title>Vue StyleClass Directive</Title>
<Meta name="description" content="StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element." />
</Head>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>StyleClass</h1>
<p>StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.</p>
</div>
<AppDemoActions />
</div>
<AppDemoActions />
</div>
</div>
<div class="content-section implementation">
<div class="card">
<h5>Toggle Class</h5>
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText class="block mt-3" />
<div class="content-section implementation">
<div class="card">
<h5>Toggle Class</h5>
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText class="block mt-3" />
<h5>Animations</h5>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
<div class="box hidden">Content</div>
<h5>Animations</h5>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
<div class="box hidden">Content</div>
</div>
</div>
</div>
<StyleClassDoc />
<StyleClassDoc />
</div>
</template>
<script>

5
pages/tabmenu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue TabMenu Component</Title>
<Meta name="description" content="TabMenu is a navigation/command component that displays items as tab headers." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TabMenu</h1>

4
pages/tabview/index.vue
View File

@ -1,5 +1,9 @@
<template>
<div>
<Head>
<Title>Vue Tabs Component</Title>
<Meta name="description" content="TabView is a container component to group content with tabs." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TabView</h1>

5
pages/tag/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Tag Component</Title>
<Meta name="description" content="Tag component is used to categorize content." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tag</h1>

5
pages/terminal/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Terminal Component</Title>
<Meta name="description" content="Terminal is a text based user interface." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Terminal</h1>

5
pages/textarea/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Textarea Component</Title>
<Meta name="description" content="Textarea adds styling, key filtering and autoResize functionality to standard textarea element." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Textarea</h1>

5
pages/theming/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Theming - PrimeVue</Title>
<Meta name="description" content="Choose from a variety of themes or develop your own theme easily." />
</Head>
<div class="content-section documentation">
<h1>Theming</h1>
<p>Choose from a variety of themes or develop your own theme easily.</p>

5
pages/tieredmenu/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue TieredMenu Component</Title>
<Meta name="description" content="TieredMenu displays submenus in nested overlays." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TieredMenu</h1>

5
pages/timeline/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Timeline Component</Title>
<Meta name="description" content="Timeline visualizes a series of chained events." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Timeline</h1>

5
pages/toast/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Toast Component</Title>
<Meta name="description" content="Toast is used to display messages in an overlay." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Toast</h1>

5
pages/togglebutton/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue ToggleButton Component</Title>
<Meta name="description" content="ToggleButton is used to select a boolean value using a button." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>ToggleButton</h1>

5
pages/toolbar/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Toolbar Component</Title>
<Meta name="description" content="Toolbar is a grouping component for buttons and other content." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Toolbar</h1>

5
pages/tooltip/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Tooltip Directive</Title>
<Meta name="description" content="Tooltip functionality is integrated within various PrimeVue components." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tooltip</h1>

5
pages/tree/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue Tree Component</Title>
<Meta name="description" content="Tree is used to display hierarchical data." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tree</h1>

5
pages/treeselect/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue TreeSelect Component</Title>
<Meta name="description" content="TreeSelect is a form component to choose from hierarchical data." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TreeSelect</h1>

5
pages/treetable/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue TreeTable Component</Title>
<Meta name="description" content="TreeTable is used to display hierarchical data in tabular format." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TreeTable</h1>

5
pages/tristatecheckbox/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue TriStateCheckbox Component</Title>
<Meta name="description" content="TriStateCheckbox is used to select either true, false or null as the value." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>TriStateCheckbox</h1>

5
pages/uikit/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>UI Kit - PrimeVue</Title>
<Meta name="description" content="Design files for PrimeVue Components." />
</Head>
<div class="content-section">
<div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" />

5
pages/validation/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Form Integration - PrimeVue</Title>
<Meta name="description" content="PrimeVue components can be easily used/integrated with Vuelidate" />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Vuelidate</h1>

5
pages/virtualscroller/index.vue
View File

@ -1,5 +1,10 @@
<template>
<div>
<Head>
<Title>Vue VirtualScroller Component</Title>
<Meta name="description" content="VirtualScroller is a performant approach to handle huge data efficiently." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>VirtualScroller</h1>