BadgeWrapper
A wrapper component to position a badge relative to an anchor.
- Import
import "@tapsioss/web-components/badge-wrapper";
- Tag
<tapsi-badge-wrapper></tapsi-badge-wrapper>
Properties
| Name | Description | Type | Default Value |
|---|---|---|---|
anchor-shape | The shape of the anchor. | "rectangle" | "circle" | "pill" | "rectangle" |
badge-side | The horizontal placement of the badge. | "left" | "right" | "right" |
badge-alignment | The vertical alignment of the badge. | "top" | "middle" | "top" |
Slots
| Name | Description |
|---|---|
| - | The default slot for the anchor element. |
badge | The slot for the badge to be positioned. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/badge-wrapper";
console.log(Slots.DEFAULT); // ""
console.log(Slots.BADGE); // "badge"