mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 23:33:29 +09:00
first
This commit is contained in:
335
src/pages/components/table.vue
Normal file
335
src/pages/components/table.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<script setup lang="ts">
|
||||
const markdownContainer = ref<HTMLElement>()
|
||||
const toc = useMarkdownToc(markdownContainer)
|
||||
|
||||
const pageTitle = useVueroContext<string>('page-title')
|
||||
onMounted(() => {
|
||||
pageTitle.value = 'Table'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Table - Components - Vuero',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VBreadcrumb
|
||||
with-icons
|
||||
separator="bullet"
|
||||
:items="[
|
||||
{
|
||||
label: 'Vuero',
|
||||
hideLabel: true,
|
||||
icon: 'lucide:home',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
label: 'Components',
|
||||
to: '/components/',
|
||||
},
|
||||
{
|
||||
label: 'Table',
|
||||
to: '/components/table',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
|
||||
<div class="columns">
|
||||
<div
|
||||
ref="markdownContainer"
|
||||
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
|
||||
class="column doc-column stay-focus-container"
|
||||
>
|
||||
<!--Table-->
|
||||
<TableBaseDocumentation />
|
||||
|
||||
<VCard
|
||||
radius="smooth"
|
||||
class="demo-table mb-6"
|
||||
>
|
||||
<table
|
||||
class="table is-hoverable is-fullwidth"
|
||||
aria-label="Vuero basic table example"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
First Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Last Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Position
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="is-end"
|
||||
>
|
||||
<div class="dark-inverted is-flex is-justify-content-flex-end">
|
||||
Actions
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tina</td>
|
||||
<td>Bergmann</td>
|
||||
<td>Head of Sales</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Wistmus</td>
|
||||
<td>Senior Executive</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sam</td>
|
||||
<td>Watson</td>
|
||||
<td>Software Engineer</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jolaine</td>
|
||||
<td>Joestar</td>
|
||||
<td>HR Manager</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anders</td>
|
||||
<td>Jensen</td>
|
||||
<td>Accountant</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</VCard>
|
||||
|
||||
<!--Table striped-->
|
||||
<TableStripedDocumentation />
|
||||
|
||||
<VCard
|
||||
radius="smooth"
|
||||
class="demo-table"
|
||||
>
|
||||
<table
|
||||
class="table is-striped is-fullwidth"
|
||||
aria-label="Vuero striped table example"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
First Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Last Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Position
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="is-end"
|
||||
>
|
||||
<div class="dark-inverted is-flex is-justify-content-flex-end">
|
||||
Actions
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tina</td>
|
||||
<td>Bergmann</td>
|
||||
<td>Head of Sales</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Wistmus</td>
|
||||
<td>Senior Executive</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sam</td>
|
||||
<td>Watson</td>
|
||||
<td>Software Engineer</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jolaine</td>
|
||||
<td>Joestar</td>
|
||||
<td>HR Manager</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anders</td>
|
||||
<td>Jensen</td>
|
||||
<td>Accountant</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</VCard>
|
||||
|
||||
<!--Table media-->
|
||||
<TableMediaDocumentation />
|
||||
|
||||
<VCard
|
||||
radius="smooth"
|
||||
class="demo-table"
|
||||
>
|
||||
<table
|
||||
class="table is-hoverable is-fullwidth"
|
||||
aria-label="Vuero media table example"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="is-media"
|
||||
/>
|
||||
<th scope="col">
|
||||
First Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Last Name
|
||||
</th>
|
||||
<th scope="col">
|
||||
Position
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="is-end"
|
||||
>
|
||||
<div class="dark-inverted is-flex is-justify-content-flex-end">
|
||||
Actions
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-media">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/8.gif" />
|
||||
</td>
|
||||
<td>Tina</td>
|
||||
<td>Bergmann</td>
|
||||
<td>Head of Sales</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-media">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/1.gif" />
|
||||
</td>
|
||||
<td>John</td>
|
||||
<td>Wistmus</td>
|
||||
<td>Senior Executive</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-media">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/4.gif" />
|
||||
</td>
|
||||
<td>Sam</td>
|
||||
<td>Watson</td>
|
||||
<td>Software Engineer</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-media">
|
||||
<VAvatar
|
||||
initials="JD"
|
||||
color="info"
|
||||
/>
|
||||
</td>
|
||||
<td>Jolaine</td>
|
||||
<td>Joestar</td>
|
||||
<td>HR Manager</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-media">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/3.gif" />
|
||||
</td>
|
||||
<td>Anders</td>
|
||||
<td>Jensen</td>
|
||||
<td>Accountant</td>
|
||||
<td class="is-end">
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<FlexTableDropdown />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</VCard>
|
||||
</div>
|
||||
<div
|
||||
v-if="toc.length"
|
||||
class="column is-3 toc-column"
|
||||
>
|
||||
<DocumentationToc :toc="toc" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user