mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
31 lines
891 B
Plaintext
31 lines
891 B
Plaintext
---
|
|
// Equivalent of cards/body-placeholder.html (ui/svg.html inlined).
|
|
// TODO: the ui/svg.html `border` branch (rect + inline style) is not ported —
|
|
// body-placeholder.html never sets it (the "border" token in the class
|
|
// list is just a CSS class).
|
|
interface Props {
|
|
width?: number;
|
|
height?: number;
|
|
ratio?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const { width = 400, height = 200, ratio, class: className } = Astro.props;
|
|
---
|
|
|
|
<div class={`card-body${className ? ` ${className}` : ''}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-100 border rounded"
|
|
preserveAspectRatio={ratio ? 'xMidYMid meet' : 'none'}
|
|
width={width}
|
|
height={height}
|
|
viewBox={`0 0 ${width} ${height}`}
|
|
fill="transparent"
|
|
stroke="var(--tblr-border-color, #b8cef1)"
|
|
>
|
|
<line x1="0" y1="0" x2={width} y2={height}></line>
|
|
<line x1="0" y1={height} x2={width} y2="0"></line>
|
|
</svg>
|
|
</div>
|