Striped Pattern
Striped Pattern fills its container with one repeating-linear-gradient, so the whole backdrop is a single paint rather than a stack of elements. Stripe thickness, gap and angle are all independent, which is enough to go from hairline pinstripes to wide hazard bars.
It is a container, not a background image: the stripes sit behind the default slot, so you can put a headline or a card on top and the pattern keeps its own stacking.
Usage
Striped Pattern
A single repeating gradient, so the whole backdrop costs one paint
<template>
<div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
<MStripedPattern :angle="45" :width="1" :gap="12">
<div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-bold text-highlighted">
Striped Pattern
</h3>
<p class="max-w-xs text-sm text-muted">
A single repeating gradient, so the whole backdrop costs one paint
</p>
</div>
</MStripedPattern>
</div>
</template>
Examples
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
angle | number | 45 | Angle of the stripes, in degrees. 0 draws them vertically and 90 horizontally. |
width | number | 1 | Thickness of one stripe, in pixels. |
gap | number | 10 | Space between two stripes, in pixels. The period is width + gap. |
color | string | 'var(--ui-border)' | Colour of a stripe. Any CSS colour works, including a semi-transparent one. |
class | string | '' | CSS classes for the container. The container fills its parent, so give the parent a height. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | Content drawn above the stripes. It needs its own relative z-10 if the stripes would otherwise cover it. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.stripedPattern in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative size-full overflow-hidden |
pattern | - | pointer-events-none absolute inset-0 |
Accessibility
The stripe layer is aria-hidden and pointer-events-none, so it never reaches the accessibility tree and never intercepts a click meant for the content above it. It carries no information on its own, which is why the component ships no label — if the pattern is the only thing distinguishing two states, say so in text instead.