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

176
documentation/elements/content/content-tables-documentation.md Normal file
View File

@@ -0,0 +1,176 @@
### Tables
You can also use the `content` class to wrap an html `table` element
to apply minimum styles to your table UI.
Please refer to the Vuero components section to find more advanced table
examples and layouts.
<!--code-->
```vue
<template>
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
<i class="fas fa-star" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/example-->