svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 21:23:36 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/pages/components/card/advanced.vue Normal file
View File

@@ -0,0 +1,199 @@
<script setup lang="ts">
import type { VAvatarProps } from '/@src/components/base/VAvatar.vue'
import * as userStacks from '/@src/data/users/userStacks'
import { VCardAdvancedMeta } from '/@src/data/documentation/components-meta'
const userStack2 = userStacks.userStack2 as VAvatarProps[]
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCardAdvanced'
})
useHead({
title: 'VCardAdvanced - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Cards',
},
{
label: 'VCardAdvanced',
to: '/components/card/advanced',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--VCard Advanced-->
<VCardAdvancedDocumentation />
</div>
<div class="column is-4">
<VCardAdvanced>
<template #header-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #header-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<div class="tags">
<VTag
label="Business"
color="solid"
rounded
/>
</div>
</template>
<template #footer-right>
<VButton
color="primary"
raised
>
Action
</VButton>
</template>
</VCardAdvanced>
</div>
<div class="column is-4">
<VCardAdvanced radius="smooth">
<template #header-left>
<div class="tags">
<VTag
label="Business"
color="solid"
rounded
/>
</div>
</template>
<template #header-right>
<VButton
color="primary"
raised
>
Action
</VButton>
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #footer-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
</VCardAdvanced>
</div>
<div class="column is-4">
<VCardAdvanced radius="rounded">
<template #header-left>
<h3 class="title is-6">
A Card Title
</h3>
</template>
<template #header-right>
<WidgetDropdown />
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #footer-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
</VCardAdvanced>
</div>
<div class="column is-12 mt-5">
<DocumentationMeta
name="VCardAdvanced"
:meta="VCardAdvancedMeta"
/>
</div>
</div>
</div>
</template>