Highlighter group

This component wraps several Highlighter components and draws their annotations as one sequence, one after another in document order, instead of all at once. Internally the annotations are combined through rough-notation's annotationGroup, which staggers each draw by the previous one's duration.

Every highlighter inside a group hands its annotation to the group, so the individual when-in-view of each highlighter is ignored: the whole cascade is controlled here. The group can also supply defaults for the annotation props, such as variant and color, which the highlighters inherit unless they set their own.

Ship faster, stay consistent, and delight your users.

When prefers-reduced-motion is set the cascade is skipped and every annotation appears instantly.

Props

variant?: "highlight" | "box" | "circle" | "underline" | "strike-through" | "crossed-off" | "bracket"
The default annotation style for every highlighter in the group that doesn't set its own.

color?: string
The default annotation color for every highlighter in the group that doesn't set its own. Accepts any CSS color.

stroke-width?: number
The default stroke width for every highlighter in the group that doesn't set its own.

animation-duration?: number
The default draw animation duration in milliseconds for every highlighter in the group that doesn't set its own.

iterations?: number
The default number of draw iterations for every highlighter in the group that doesn't set its own.

padding?: number
The default spacing between the element and the annotation, in pixels, for every highlighter in the group that doesn't set its own.

multiline?: boolean
The default multiline behavior for every highlighter in the group that doesn't set its own.

when-in-view?: boolean
Draw the cascade only once the group scrolls into view instead of immediately.

Slots

default
The content, holding one or more Highlighter components.

Examples

Defaults

Set the annotation props once on the group; each highlighter inherits them and can still override them individually.

Preview

Set the variant and color once on the group, and override them per highlighter where needed.

Code

<template>
    <p style="max-width: 429px; font-size: 21px; line-height: 1.9; text-align: center;">
        <FluxVisualHighlighterGroup
            color="var(--primary-400)"
            variant="underline">
            Set the
            <FluxVisualHighlighter>variant</FluxVisualHighlighter>
            and
            <FluxVisualHighlighter>color</FluxVisualHighlighter>
            once on the group, and
            <FluxVisualHighlighter
                variant="highlight"
                color="var(--warning-200)">override</FluxVisualHighlighter>
            them per highlighter where needed.
        </FluxVisualHighlighterGroup>
    </p>
</template>

<script
    lang="ts"
    setup>
    import { FluxVisualHighlighter, FluxVisualHighlighterGroup } from '@flux-ui/visuals';
</script>

When in view

Set `when-in-view` to defer the whole cascade until the group scrolls into the viewport.

Preview

This cascade starts only once it scrolls into view.

Code

<template>
    <p style="max-width: 429px; font-size: 21px; line-height: 1.9; text-align: center;">
        <FluxVisualHighlighterGroup when-in-view>
            This
            <FluxVisualHighlighter>cascade</FluxVisualHighlighter>
            starts
            <FluxVisualHighlighter
                variant="underline"
                color="var(--primary-400)">only</FluxVisualHighlighter>
            once it scrolls into view.
        </FluxVisualHighlighterGroup>
    </p>
</template>

<script
    lang="ts"
    setup>
    import { FluxVisualHighlighter, FluxVisualHighlighterGroup } from '@flux-ui/visuals';
</script>