vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

105
pages/chips/index.vue
View file

@ -1,60 +1,69 @@
<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>
<p>Chips is used to enter multiple values on an input field.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation p-fluid">
<div class="card">
<h5>Basic</h5>
<Chips v-model="value1" />
<h5>Comma Separator</h5>
<Chips v-model="value2" separator="," />
<h5>RegExp Separator</h5>
<Chips v-model="value3" :separator="separatorExp" />
<h5>Template</h5>
<Chips v-model="value4">
<template #chip="slotProps">
<div>
<span>{{ slotProps.value }} - (active) </span>
<i class="pi pi-user-plus" style="font-size: 14px"></i>
</div>
</template>
</Chips>
</div>
</div>
<ChipsDoc />
</div>
<DocComponent title="Vue Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." :componentDocs="docs" :apiDocs="['Chips']" />
</template>
<script>
import ChipsDoc from './ChipsDoc';
import AccessibilityDoc from '@/doc/chips/AccessibilityDoc';
import BasicDoc from '@/doc/chips/BasicDoc';
import DisabledDoc from '@/doc/chips/DisabledDoc';
import FloatLabelDoc from '@/doc/chips/FloatLabelDoc';
import ImportDoc from '@/doc/chips/ImportDoc';
import InvalidDoc from '@/doc/chips/InvalidDoc';
import SeparatorDoc from '@/doc/chips/SeparatorDoc';
import StyleDoc from '@/doc/chips/StyleDoc';
import TemplateDoc from '@/doc/chips/TemplateDoc';
export default {
data() {
return {
value1: null,
value2: null,
value3: null,
value4: null,
separatorExp: /,| /
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'separator',
label: 'Separator',
component: SeparatorDoc
},
{
id: 'template',
label: 'Template',
component: TemplateDoc
},
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
]
};
},
components: {
ChipsDoc: ChipsDoc
}
};
</script>