diff options
| author | Fuwn <[email protected]> | 2024-01-24 21:25:54 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-24 21:25:54 -0800 |
| commit | 3bc4326580390c9df24f85a4d24696d3c410d575 (patch) | |
| tree | 8b1eb9388d01cf6a619d8774d4a47d88ceb82ad8 /src/lib/Skeleton.svelte | |
| parent | feat(layout): skeleton ui on load (diff) | |
| download | due.moe-3bc4326580390c9df24f85a4d24696d3c410d575.tar.xz due.moe-3bc4326580390c9df24f85a4d24696d3c410d575.zip | |
feat(skeleton): optional width and height
Diffstat (limited to 'src/lib/Skeleton.svelte')
| -rw-r--r-- | src/lib/Skeleton.svelte | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte index 5db5fb0b..32182657 100644 --- a/src/lib/Skeleton.svelte +++ b/src/lib/Skeleton.svelte @@ -1,11 +1,13 @@ <script lang="ts"> export let count = 3; + export let width = '100%'; + export let height = '100px'; </script> {#each Array(count) as _, i} - <div class="card card-small"> + <div class="card card-small" style={`width: ${width};`}> <div class="skeleton-container"> - <div class="skeleton" /> + <div class="skeleton" style={`width: ${width}; height: ${height};`} /> </div> </div> @@ -34,10 +36,8 @@ } .skeleton { - height: 100px; border-radius: 4px; display: inline-block; line-height: 1; - width: 100%; } </style> |