mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
23 lines
920 B
Plaintext
23 lines
920 B
Plaintext
---
|
|
// Text shimmer (.text-shimmer): a highlight that sweeps across a short label, such as "Thinking…", while something is in progress.
|
|
|
|
interface Props {
|
|
/** element to render; a `span` fits inline text, a `div` a block */
|
|
as?: 'span' | 'div'
|
|
/** puts a `.text-shimmer-loader` (a small spinner) before the label, inside the shimmer */
|
|
loader?: boolean
|
|
/** tells assistive technology that the label reports progress and can change */
|
|
live?: boolean
|
|
class?: string
|
|
/** remaining attributes (id, data-*, …) are forwarded to the root element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { as: Tag = 'span', loader = false, live = false, class: className, ...rest }: Props = Astro.props
|
|
---
|
|
|
|
<Tag class:list={['text-shimmer', className]} role={live ? 'status' : undefined} aria-live={live ? 'polite' : undefined} {...rest}>
|
|
{loader && <span class="text-shimmer-loader" aria-hidden="true" />}
|
|
<slot />
|
|
</Tag>
|