CornerOverlay | Tuff Docs

Usage

Basic

placement picks the corner; offsetX / offsetY set the distance from its edges.

Loading demo...

Clickable Overlay

overlayPointerEvents="auto" lets the overlay receive pointer input and drops its aria-hidden.

<template>
  <TxCornerOverlay overlay-pointer-events="auto" :offset-x="-4" :offset-y="-4">
    <TxAvatar :src="avatarUrl" />
    <template #overlay>
      <button type="button" aria-label="Open profile actions">•••</button>
    </template>
  </TxCornerOverlay>
</template>

CSS Offset Values

String offsets are written to the style as-is.

<template>
  <TxCornerOverlay offset-x="calc(100% - 12px)" offset-y="-0.25rem">
    <span>Base</span>
    <template #overlay>
      <TxBadge value="New" />
    </template>
  </TxCornerOverlay>
</template>

Best Practices

The overlay is hidden from screen readers by default, so state important status in nearby text or a label too.
Use negative offsets for badges that extend past an avatar or thumbnail.
For an interactive overlay, put a semantic control in the slot; the component adds no click, focus, or keyboard behavior.
Keep overlays to small marks, not popovers or menus.
Keep the base content's size stable; the overlay reserves no layout space.

API Reference

Props

Prop	Type	Default	Description
`placement`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`	Corner the overlay sits in.
`offsetX`	`string \| number`	`0`	Horizontal inset; numbers are px.
`offsetY`	`string \| number`	`0`	Vertical inset; numbers are px.
`overlayPointerEvents`	`'none' \| 'auto'`	`'none'`	CSS `pointer-events` of the overlay.

Slots

Slot	Props	Description
`default`	none	Base content.
`overlay`	none	Corner content; without it, no overlay node renders.

Overview

The root is an inline-block span with position: relative; the overlay is absolutely positioned.
placement selects the inset pair: offsetX sets left or right, and offsetY sets top or bottom.
With overlayPointerEvents at none (the default), the overlay has aria-hidden="true"; at auto it does not, so controls inside can take focus.

Technologies

Source: packages/tuffex/packages/components/src/corner-overlay/.

查看源码

packages/tuffex/packages/components/src/corner-overlay/index.ts