vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 01:42:34 +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

110
pages/chip/index.vue
View file

@ -1,71 +1,57 @@
<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>
<p>Chip represents entities using icons, labels and images.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="flex align-items-center">
<Chip label="Action" class="mr-2" />
<Chip label="Comedy" class="mr-2" />
<Chip label="Mystery" class="mr-2" />
<Chip label="Thriller" removable />
</div>
<h5>Icon</h5>
<div class="flex align-items-center">
<Chip label="Apple" icon="pi pi-apple" class="mr-2" />
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2" />
<Chip label="Google" icon="pi pi-google" class="mr-2" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div>
<h5>Image</h5>
<div class="flex align-items-center">
<Chip label="Amy Elsner" :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" />
<Chip label="Asiya Javayant" :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" />
<Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2" />
<Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" removable />
</div>
<h5>Styling</h5>
<div class="flex align-items-center">
<Chip label="Action" class="mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
<Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
</div>
</div>
</div>
<ChipDoc />
</div>
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" />
</template>
<script>
import ChipDoc from './ChipDoc';
import AccessibilityDoc from '@/doc/chip/AccessibilityDoc';
import BasicDoc from '@/doc/chip/BasicDoc';
import IconDoc from '@/doc/chip/IconDoc';
import ImageDoc from '@/doc/chip/ImageDoc';
import ImportDoc from '@/doc/chip/ImportDoc';
import StyleDoc from '@/doc/chip/StyleDoc';
import TemplateDoc from '@/doc/chip/TemplateDoc';
export default {
components: {
ChipDoc: ChipDoc
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
},
{
id: 'templatedoc',
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
]
};
}
};
</script>
<style lang="scss" scoped>
.p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
</style>