EdgeFadeMask

Add edge fade with mask-image to avoid hard clipping in scroll containers.

Basic Usage (Vertical)

Vertical fade

 Copy<template>
  <div style="width: 420px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxEdgeFadeMask :size="32" style="height: 220px;">
      <div style="padding: 14px 16px; line-height: 1.7;">
        <!-- long content -->
      </div>
    </TxEdgeFadeMask>
  </div>
</template>

Horizontal Scrolling

Horizontal fade

 Copy<template>
  <div style="width: 520px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxEdgeFadeMask axis="horizontal" :size="40" style="height: 116px;">
      <div style="display: flex; gap: 12px; width: max-content; padding: 12px;">
        <!-- horizontal cards -->
      </div>
    </TxEdgeFadeMask>
  </div>
</template>

API

Props

Tips

• Keep border/radius styles on the wrapper; TxEdgeFadeMask handles scroll and mask.
• For horizontal mode, prefer inner content with display: flex and width: max-content.

Interaction Contract

• as controls the root element tag. Default slot content is rendered inside the internal viewport.
• No mask-image is emitted when content is not scrollable, disabled=true, or the scroll range is less than or equal to threshold.
• Vertical mode switches top/bottom fades from scrollTop; horizontal mode switches left/right fades from scrollLeft.
• Numeric size values are converted to px. String size values are used as-is in gradient stops.
• With observeResize=true, the component observes the viewport and first child. It disconnects the observer when disabled by prop or unmounted.