svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 08:13:40 +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

106
documentation/elements/table/table-media-documentation.md Normal file
View File

@@ -0,0 +1,106 @@
---
disable_example: true
---
### Media Table
Vuero provides a basic Html5 table powered by Bulma.
You sinply have to add the table class to a html5 table element.
You can easily add media elements like the vuero avatars inside your table rows.
<!--code-->
```vue
<template>
<table class="table is-hoverable is-fullwidth">
<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>
</template>
```
<!--/code-->