feat: 为 DataTable 组件添加条纹表格样式和属性支持
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-27 22:00:25 +08:00
1 parent ee67a5206d
commit 93eac7e146
1 file changed
+14 -3
+14 -3
View File
@@ -1,10 +1,17 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
let { children }: { children: Snippet } = $props();
let {
children,
striped = true
}: {
children: Snippet;
striped?: boolean;
} = $props();
</script> </script>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table" class:striped>
{@render children()} {@render children()}
</table> </table>
</div> </div>
@@ -58,7 +65,11 @@
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
:global(.data-table.striped tbody tr:nth-child(even)) {
background-color: rgba(0, 0, 0, 0.025);
}
:global(.data-table tbody tr:hover) { :global(.data-table tbody tr:hover) {
background-color: rgba(0, 0, 0, 0.02); background-color: rgba(0, 0, 0, 0.05);
} }
</style> </style>