Specialized utility components for advanced functionality including triggers, scrollbars, positioning helpers, and other supporting components that enhance the overall user experience and provide specialized capabilities.
Components for managing element positioning, triggers, and interactive overlays.
/**
* Trigger component for managing popup positioning and events
*/
export function Trigger(props: TriggerProps): JSX.Element;
/**
* Affix component for sticky positioning
*/
export function Affix(props: AffixProps): JSX.Element;
/**
* Back to top button component
*/
export function BackTop(props: BackTopProps): JSX.Element;
// Trigger/Positioning Types
interface TriggerProps {
popupVisible?: boolean;
defaultPopupVisible?: boolean;
trigger?: TriggerEvent | TriggerEvent[];
position?: TriggerPosition;
disabled?: boolean;
popupOffset?: number;
popupTranslate?: TriggerPopupTranslate;
showArrow?: boolean;
arrowClass?: string;
arrowStyle?: Record<string, any>;
popupHoverStay?: boolean;
blurToClose?: boolean;
clickToClose?: boolean;
clickOutsideToClose?: boolean;
unmountOnClose?: boolean;
popupContainer?: string | HTMLElement;
animationName?: string;
duration?: number | { enter: number; leave: number };
mouseEnterDelay?: number;
mouseLeaveDelay?: number;
focusDelay?: number;
autoFitPopupWidth?: boolean;
autoFitPopupMinWidth?: boolean;
autoFixPosition?: boolean;
popupStyle?: Record<string, any>;
popupClass?: string;
onVisibleChange?: (visible: boolean) => void;
}
interface TriggerPopupTranslate {
[key in TriggerPosition]?: [number, number];
}
interface AffixProps {
offsetTop?: number;
offsetBottom?: number;
container?: string | HTMLElement;
onChange?: (affixed: boolean) => void;
}
interface BackTopProps {
visibilityHeight?: number;
container?: string | HTMLElement;
easing?: 'linear' | 'quadIn' | 'quadOut' | 'quadInOut' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartIn' | 'quartOut' | 'quartInOut' | 'quintIn' | 'quintOut' | 'quintInOut' | 'sineIn' | 'sineOut' | 'sineInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut';
duration?: number;
onClick?: () => void;
}Specialized container and layout utility components.
/**
* Custom scrollbar component
*/
export function Scrollbar(props: ScrollbarProps): JSX.Element;
/**
* Resizable container component
*/
export function ResizeBox(props: ResizeBoxProps): JSX.Element;
/**
* Split pane component
*/
export function Split(props: SplitProps): JSX.Element;
/**
* Overflow list component with item management
*/
export function OverflowList(props: OverflowListProps): JSX.Element;
// Layout Utility Types
interface ScrollbarProps {
type?: 'track' | 'embed';
size?: Size | number;
outerClass?: string;
outerStyle?: Record<string, any>;
hide?: boolean;
trackClass?: string;
trackStyle?: Record<string, any>;
thumbClass?: string;
thumbStyle?: Record<string, any>;
barClass?: string;
barStyle?: Record<string, any>;
}
interface ResizeBoxProps {
width?: number | string;
height?: number | string;
component?: string;
directions?: ('left' | 'right' | 'top' | 'bottom')[];
split?: boolean;
onMoving?: (event: Event, size: { width: number; height: number }) => void;
onMovingEnd?: (event: Event, size: { width: number; height: number }) => void;
}
interface SplitProps {
component?: string;
direction?: 'horizontal' | 'vertical';
size?: number | string;
min?: number | string;
max?: number | string;
paneStyle?: Record<string, any>;
triggerStyle?: Record<string, any>;
disabled?: boolean;
onMove?: (event: Event, size: number | string) => void;
onMoving?: (event: Event, size: number | string) => void;
onMoveEnd?: (event: Event, size: number | string) => void;
}
interface OverflowListProps {
data?: any[];
renderItem?: (item: any, index: number) => any;
renderRest?: (restItems: any[]) => any;
maxCount?: number;
}Components for displaying icons and visual elements.
/**
* Icon component for displaying icons
*/
export function Icon(props: IconProps): JSX.Element;
/**
* Link component with navigation capabilities
*/
export function Link(props: LinkProps): JSX.Element;
/**
* Watermark overlay component
*/
export function Watermark(props: WatermarkProps): JSX.Element;
// Icon/Visual Types
interface IconProps {
spin?: boolean;
loading?: boolean;
size?: Size | number;
strokeLinecap?: 'butt' | 'round' | 'square';
strokeLinejoin?: 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round';
strokeWidth?: number;
onClick?: (event: Event) => void;
}
interface LinkProps {
href?: string;
status?: Status;
disabled?: boolean;
hoverable?: boolean;
icon?: boolean;
onClick?: (event: Event) => void;
}
interface WatermarkProps {
width?: number;
height?: number;
rotate?: number;
image?: string;
content?: string | string[];
font?: {
color?: string;
fontSize?: number | string;
fontWeight?: 'normal' | 'light' | 'weight' | number;
fontFamily?: string;
fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
};
gap?: [number, number];
offset?: [number, number];
alpha?: number;
zIndex?: number;
}Components for global configuration and context provision.
/**
* Global configuration provider component
*/
export function ConfigProvider(props: ConfigProviderProps): JSX.Element;
/**
* Verification code input component
*/
export function VerificationCode(props: VerificationCodeProps): JSX.Element;
// Configuration/Provider Types
interface ConfigProviderProps {
prefixCls?: string;
locale?: ArcoLang;
size?: Size;
updateAtScroll?: boolean;
scrollToFirstError?: boolean;
exchangeTime?: number;
}
interface VerificationCodeProps {
modelValue?: string;
defaultValue?: string;
length?: number;
size?: Size;
disabled?: boolean;
readonly?: boolean;
error?: boolean;
hideValue?: boolean;
separator?: string;
onChange?: (value: string) => void;
onFinish?: (value: string) => void;
}Usage Examples:
<template>
<!-- Custom scrollbar -->
<a-scrollbar style="height: 200px; overflow: auto">
<div style="height: 500px">
<p>Long content that requires scrolling...</p>
</div>
</a-scrollbar>
<!-- Resizable container -->
<a-resize-box
:width="300"
:height="200"
:directions="['right', 'bottom']"
@moving-end="handleResizeEnd"
>
<div class="resizable-content">
Resizable content area
</div>
</a-resize-box>
<!-- Split pane -->
<a-split
:size="0.5"
direction="horizontal"
@move-end="handleSplitMove"
>
<template #left>
<div>Left pane content</div>
</template>
<template #right>
<div>Right pane content</div>
</template>
</a-split>
<!-- Trigger with custom popup -->
<a-trigger
trigger="click"
position="bottom"
@visible-change="handleTriggerChange"
>
<a-button>Click to trigger popup</a-button>
<template #content>
<div class="custom-popup">
Custom popup content
</div>
</template>
</a-trigger>
<!-- Affix sticky element -->
<a-affix :offset-top="80">
<a-button type="primary">Sticky Button</a-button>
</a-affix>
<!-- Back to top button -->
<a-back-top
:visibility-height="300"
:duration="500"
easing="quadOut"
/>
<!-- Watermark overlay -->
<a-watermark
content="Confidential"
:font="{ color: 'rgba(0,0,0,0.15)', fontSize: 16 }"
:gap="[100, 100]"
>
<div style="height: 500px">
Content with watermark
</div>
</a-watermark>
<!-- Verification code input -->
<a-verification-code
:length="6"
v-model="verificationCode"
@finish="handleVerificationFinish"
/>
</template>
<script>
export default {
data() {
return {
verificationCode: ''
};
},
methods: {
handleResizeEnd(event, size) {
console.log('New size:', size);
},
handleTriggerChange(visible) {
console.log('Trigger visible:', visible);
},
handleVerificationFinish(value) {
console.log('Verification code:', value);
}
}
};
</script>// Instance types for template refs
export type TriggerInstance = InstanceType<typeof Trigger>;
export type AffixInstance = InstanceType<typeof Affix>;
export type BackTopInstance = InstanceType<typeof BackTop>;
export type ScrollbarInstance = InstanceType<typeof Scrollbar>;
export type ResizeBoxInstance = InstanceType<typeof ResizeBox>;
export type SplitInstance = InstanceType<typeof Split>;
export type OverflowListInstance = InstanceType<typeof OverflowList>;
export type IconInstance = InstanceType<typeof Icon>;
export type LinkInstance = InstanceType<typeof Link>;
export type WatermarkInstance = InstanceType<typeof Watermark>;
export type ConfigProviderInstance = InstanceType<typeof ConfigProvider>;
export type VerificationCodeInstance = InstanceType<typeof VerificationCode>;