EdgeFadeMask | Tuff Docs

Usage

Put visual frame styles such as border, radius, and background on the parent wrapper so the mask only affects scroll content.
Use width: max-content or fixed item widths for horizontal strips; otherwise no hidden overflow exists and no fade appears.
Keep threshold small. It is for boundary rounding differences, not for hiding large amounts of content.
Disable the mask for print/export surfaces where CSS masks may not render consistently.
Avoid relying on the fade as the only cue that content continues; pair it with visible scroll position, clipped items, or copy when discovery matters.

Prop	Type	Default	Description
`as`	`string`	`'div'`	Root element tag rendered by the outer component.
`axis`	`'vertical' \| 'horizontal'`	`'vertical'`	Scroll and fade direction.
`size`	`string \| number`	`24`	Fade distance on each edge. Numbers are converted to px; strings are used as-is.
`threshold`	`number`	`1`	Pixel threshold used to decide whether the viewport is at a scroll boundary. Negative values are clamped to `0`.
`disabled`	`boolean`	`false`	Disables scroll-state masking.
`observeResize`	`boolean`	`true`	Watches the viewport and first child with `ResizeObserver` when available.

No events are emitted.

Slot	Props	Description
`default`	-	Scrollable content rendered inside the internal viewport.

Keep borders and radius on an outer wrapper; the component owns the internal scroll viewport and mask.

Loading demo...

For horizontal mode, give the inner content a width larger than the viewport.

Loading demo...

The root renders the configured as tag and one viewport element inside it.
Vertical mode sets overflow-y: auto and hides horizontal overflow; horizontal mode sets overflow-x: auto and hides vertical overflow.
No mask is emitted when the component is disabled, content is not scrollable, or scroll range is within threshold.
Scroll events update leading/trailing fades from scrollTop or scrollLeft.
The generated mask uses linear-gradient(to bottom, ...) for vertical mode and linear-gradient(to right, ...) for horizontal mode.
With observeResize=true, the component observes the viewport and first child; it disconnects observers when the prop changes or the component unmounts.

Reviewed against packages/tuffex/packages/components/src/edge-fade-mask/src/TxEdgeFadeMask.vue, types.ts, and edge-fade-mask.test.ts.
Verified coverage: configured root-tag rendering, axis class and slot content, no-mask behavior when content cannot scroll, vertical boundary mask stops, horizontal string fade size, disabled mask removal/restoration, and ResizeObserver setup/disconnect behavior.
Accessibility note: the component adds only a neutral scroll viewport and CSS mask; keep semantic landmarks/headings in the slotted content and do not use the fade as the only indication that content continues.
Component source: packages/tuffex/packages/components/src/edge-fade-mask/src/TxEdgeFadeMask.vue.
Types: packages/tuffex/packages/components/src/edge-fade-mask/src/types.ts exports EdgeFadeMaskProps and EdgeFadeMaskAxis.
Coverage: packages/tuffex/packages/components/src/edge-fade-mask/__tests__/edge-fade-mask.test.ts verifies root tag, axis classes, slot rendering, mask-state updates, disabled behavior, string sizes, and resize observer cleanup.
查看源码
packages/tuffex/packages/components/src/edge-fade-mask/index.ts