CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--components

Comprehensive cross-platform component library that forms part of the Taro framework, providing 96 UI components that follow WeChat Mini Program standards while supporting React and Vue frameworks.

—

Pending
Overview
Eval results
Files

skyline-components.mddocs/

Skyline Components

Advanced UI components including gesture handlers, enhanced layout components, and performance-optimized list views for modern application interfaces.

Capabilities

Gesture Handlers

Advanced gesture recognition components for handling complex touch interactions.

/**
 * Tap gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const TapGestureHandler: ComponentType<TapGestureHandlerProps>;

interface TapGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Whether to prevent other gesture handlers
   * @supported weapp, tt, qq, jd
   * @default false
   */
  shouldCancelWhenOutside?: boolean;
  /** Number of taps required
   * @supported weapp, tt, qq, jd
   * @default 1
   */
  numberOfTaps?: number;
  /** Gesture state change callback */
  onGestureEvent?: (event: GestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Double tap gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const DoubleTapGestureHandler: ComponentType<DoubleTapGestureHandlerProps>;

interface DoubleTapGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Maximum time between taps in milliseconds
   * @supported weapp, tt, qq, jd
   * @default 300
   */
  maxDelayBetweenTaps?: number;
  /** Gesture state change callback */
  onGestureEvent?: (event: GestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Long press gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const LongPressGestureHandler: ComponentType<LongPressGestureHandlerProps>;

interface LongPressGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Minimum press duration in milliseconds
   * @supported weapp, tt, qq, jd
   * @default 500
   */
  minDurationMs?: number;
  /** Maximum distance finger can move
   * @supported weapp, tt, qq, jd
   * @default 10
   */
  maxDist?: number;
  /** Gesture state change callback */
  onGestureEvent?: (event: GestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Pan gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const PanGestureHandler: ComponentType<PanGestureHandlerProps>;

interface PanGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Minimum number of fingers
   * @supported weapp, tt, qq, jd
   * @default 1
   */
  minPointers?: number;
  /** Maximum number of fingers
   * @supported weapp, tt, qq, jd
   * @default 10
   */
  maxPointers?: number;
  /** Minimum distance to activate
   * @supported weapp, tt, qq, jd
   * @default 10
   */
  minDist?: number;
  /** Minimum velocity to activate
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  minVelocity?: number;
  /** Average touches for velocity calculation
   * @supported weapp, tt, qq, jd
   * @default false
   */
  avgTouches?: boolean;
  /** Gesture state change callback */
  onGestureEvent?: (event: PanGestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Scale/pinch gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ScaleGestureHandler: ComponentType<ScaleGestureHandlerProps>;

interface ScaleGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Gesture state change callback */
  onGestureEvent?: (event: ScaleGestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Horizontal drag gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const HorizontalDragGestureHandler: ComponentType<HorizontalDragGestureHandlerProps>;

interface HorizontalDragGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Gesture state change callback */
  onGestureEvent?: (event: PanGestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Vertical drag gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const VerticalDragGestureHandler: ComponentType<VerticalDragGestureHandlerProps>;

interface VerticalDragGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Gesture state change callback */
  onGestureEvent?: (event: PanGestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

/**
 * Force press gesture recognition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ForcePressGestureHandler: ComponentType<ForcePressGestureHandlerProps>;

interface ForcePressGestureHandlerProps extends StandardProps {
  /** Tag identifier for gesture handler
   * @supported weapp, tt, qq, jd
   */
  tag?: string;
  /** Whether gesture handler is enabled
   * @supported weapp, tt, qq, jd
   * @default true
   */
  enabled?: boolean;
  /** Minimum force to activate
   * @supported weapp, tt, qq, jd
   * @default 0.2
   */
  minForce?: number;
  /** Gesture state change callback */
  onGestureEvent?: (event: ForcePressGestureEvent) => void;
  /** Handler state change callback */
  onHandlerStateChange?: (event: GestureHandlerStateChangeEvent) => void;
}

Enhanced Layout Components

High-performance layout components optimized for complex UIs and large datasets.

/**
 * High-performance list view component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ListView: ComponentType<ListViewProps>;

interface ListViewProps extends StandardProps {
  /** List type
   * @supported weapp, tt, qq, jd
   * @default "list"
   */
  type?: 'list' | 'waterfall';
  /** Cross axis count for waterfall layout
   * @supported weapp, tt, qq, jd
   * @default 2
   */
  crossAxisCount?: number;
  /** Maximum cross axis extent
   * @supported weapp, tt, qq, jd
   */
  maxCrossAxisExtent?: number;
  /** Main axis spacing
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  mainAxisSpacing?: number;
  /** Cross axis spacing
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  crossAxisSpacing?: number;
  /** Padding
   * @supported weapp, tt, qq, jd
   */
  padding?: string;
  /** Scroll direction
   * @supported weapp, tt, qq, jd
   * @default "vertical"
   */
  scrollDirection?: 'vertical' | 'horizontal';
  /** Whether reverse layout
   * @supported weapp, tt, qq, jd
   * @default false
   */
  reverse?: boolean;
  /** List scroll callback */
  onScroll?: (event: ListViewScrollEvent) => void;
  /** Reach top callback */
  onScrollToUpper?: (event: TaroEvent) => void;
  /** Reach bottom callback */
  onScrollToLower?: (event: TaroEvent) => void;
}

/**
 * List builder component for dynamic list construction
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ListBuilder: ComponentType<ListBuilderProps>;

interface ListBuilderProps extends StandardProps {
  /** Build function for list items
   * @supported weapp, tt, qq, jd
   */
  builder?: (index: number) => any;
  /** Number of items in list
   * @supported weapp, tt, qq, jd
   */
  childCount?: number;
}

/**
 * High-performance grid view component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const GridView: ComponentType<GridViewProps>;

interface GridViewProps extends StandardProps {
  /** Cross axis count
   * @supported weapp, tt, qq, jd
   * @default 2
   */
  crossAxisCount?: number;
  /** Maximum cross axis extent
   * @supported weapp, tt, qq, jd
   */
  maxCrossAxisExtent?: number;
  /** Main axis spacing
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  mainAxisSpacing?: number;
  /** Cross axis spacing
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  crossAxisSpacing?: number;
  /** Child aspect ratio
   * @supported weapp, tt, qq, jd
   * @default 1
   */
  childAspectRatio?: number;
  /** Padding
   * @supported weapp, tt, qq, jd
   */
  padding?: string;
  /** Grid scroll callback */
  onScroll?: (event: GridViewScrollEvent) => void;
}

/**
 * Grid builder component for dynamic grid construction
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const GridBuilder: ComponentType<GridBuilderProps>;

interface GridBuilderProps extends StandardProps {
  /** Build function for grid items
   * @supported weapp, tt, qq, jd
   */
  builder?: (index: number) => any;
  /** Number of items in grid
   * @supported weapp, tt, qq, jd
   */
  childCount?: number;
  /** Cross axis count
   * @supported weapp, tt, qq, jd
   * @default 2
   */
  crossAxisCount?: number;
}

/**
 * Basic list container component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const List: ComponentType<ListProps>;

interface ListProps extends StandardProps {
  // Basic list properties
}

/**
 * List item component for use within List
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ListItem: ComponentType<ListItemProps>;

interface ListItemProps extends StandardProps {
  // List item properties
}

Sticky and Advanced Layout

Components for creating sticky headers, draggable sheets, and nested scroll behaviors.

/**
 * Sticky header component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const StickyHeader: ComponentType<StickyHeaderProps>;

interface StickyHeaderProps extends StandardProps {
  /** Offset from top when sticky
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  offsetY?: number;
}

/**
 * Sticky section component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const StickySection: ComponentType<StickySectionProps>;

interface StickySectionProps extends StandardProps {
  /** Offset from top when sticky
   * @supported weapp, tt, qq, jd
   * @default 0
   */
  offsetY?: number;
  /** Whether to push up previous sticky element
   * @supported weapp, tt, qq, jd
   * @default false
   */
  pushUp?: boolean;
}

/**
 * Draggable bottom sheet component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const DraggableSheet: ComponentType<DraggableSheetProps>;

interface DraggableSheetProps extends StandardProps {
  /** Initial child size ratio
   * @supported weapp, tt, qq, jd
   * @default 0.5
   */
  initialChildSize?: number;
  /** Minimum child size ratio
   * @supported weapp, tt, qq, jd
   * @default 0.25
   */
  minChildSize?: number;
  /** Maximum child size ratio
   * @supported weapp, tt, qq, jd
   * @default 1.0
   */
  maxChildSize?: number;
  /** Whether sheet can expand
   * @supported weapp, tt, qq, jd
   * @default true
   */
  expand?: boolean;
  /** Snap animation duration
   * @supported weapp, tt, qq, jd
   * @default 250
   */
  snapAnimationDuration?: number;
  /** Sheet drag start callback */
  onDragStart?: (event: TaroEvent) => void;
  /** Sheet drag end callback */
  onDragEnd?: (event: DraggableSheetDragEndEvent) => void;
}

/**
 * Nested scroll header component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const NestedScrollHeader: ComponentType<NestedScrollHeaderProps>;

interface NestedScrollHeaderProps extends StandardProps {
  /** Nested scroll body component
   * @supported weapp, tt, qq, jd (Skyline rendering engine)
   */
  nestedScrollBody?: any;
}

/**
 * Nested scroll body component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const NestedScrollBody: ComponentType<NestedScrollBodyProps>;

interface NestedScrollBodyProps extends StandardProps {
  // Nested scroll body properties
}

Advanced Interaction Components

Components for complex interactions, animations, and transitions.

/**
 * Share element transition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const ShareElement: ComponentType<ShareElementProps>;

interface ShareElementProps extends StandardProps {
  /** Shared element key for transition
   * @supported weapp, tt, qq, jd
   */
  shareElementKey?: string;
  /** Transform type
   * @supported weapp, tt, qq, jd
   * @default "match"
   */
  transform?: 'match' | 'scaleOnShow' | 'scaleOnHide';
  /** Transition duration in milliseconds
   * @supported weapp, tt, qq, jd
   * @default 300
   */
  duration?: number;
  /** Easing function
   * @supported weapp, tt, qq, jd
   * @default "ease"
   */
  easingFunction?: string;
}

/**
 * Component snapshot capture
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const Snapshot: ComponentType<SnapshotProps>;

interface SnapshotProps extends StandardProps {
  /** Snapshot mode
   * @supported weapp, tt, qq, jd
   * @default "view"
   */
  mode?: 'view' | 'image';
  /** Snapshot quality
   * @supported weapp, tt, qq, jd
   * @default 1.0
   */
  quality?: number;
}

/**
 * Open container transition component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const OpenContainer: ComponentType<OpenContainerProps>;

interface OpenContainerProps extends StandardProps {
  /** Container transition type
   * @supported weapp, tt, qq, jd
   * @default "fade"
   */
  transitionType?: 'fade' | 'fadeThrough' | 'sharedAxis';
  /** Transition duration in milliseconds
   * @supported weapp, tt, qq, jd
   * @default 300
   */
  transitionDuration?: number;
}

/**
 * Inline text span component
 * @supported weapp, tt, qq, jd (Skyline rendering engine)
 */
const Span: ComponentType<SpanProps>;

interface SpanProps extends StandardProps {
  // Inline span properties
}

Types

// Gesture event interfaces
interface GestureEvent extends TaroEvent {
  detail: {
    state: GestureHandlerState;
    x: number;
    y: number;
    absoluteX: number;
    absoluteY: number;
  };
}

interface GestureHandlerStateChangeEvent extends TaroEvent {
  detail: {
    handlerTag: string;
    state: GestureHandlerState;
    oldState: GestureHandlerState;
  };
}

interface PanGestureEvent extends GestureEvent {
  detail: GestureEvent['detail'] & {
    translationX: number;
    translationY: number;
    velocityX: number;
    velocityY: number;
  };
}

interface ScaleGestureEvent extends GestureEvent {
  detail: GestureEvent['detail'] & {
    scale: number;
    focalX: number;
    focalY: number;
    velocity: number;
  };
}

interface ForcePressGestureEvent extends GestureEvent {
  detail: GestureEvent['detail'] & {
    force: number;
  };
}

// Gesture handler states
enum GestureHandlerState {
  UNDETERMINED = 0,
  FAILED = 1,
  BEGAN = 2,
  CANCELLED = 3,
  ACTIVE = 4,
  END = 5,
}

// List and Grid event interfaces
interface ListViewScrollEvent extends TaroEvent {
  detail: {
    scrollLeft: number;
    scrollTop: number;
    scrollHeight: number;
    scrollWidth: number;
    deltaX: number;
    deltaY: number;
  };
}

interface GridViewScrollEvent extends TaroEvent {
  detail: {
    scrollLeft: number;
    scrollTop: number;
    scrollHeight: number;
    scrollWidth: number;
  };
}

// Draggable sheet event interfaces
interface DraggableSheetDragEndEvent extends TaroEvent {
  detail: {
    extent: number;
    velocity: number;
  };
}

// Layout and transition types
type ListViewType = 'list' | 'waterfall';
type ScrollDirection = 'vertical' | 'horizontal';
type ShareElementTransform = 'match' | 'scaleOnShow' | 'scaleOnHide';
type OpenContainerTransitionType = 'fade' | 'fadeThrough' | 'sharedAxis';
type SnapshotMode = 'view' | 'image';

Usage Examples:

import { 
  TapGestureHandler, 
  PanGestureHandler, 
  ListView, 
  StickyHeader, 
  DraggableSheet 
} from "@tarojs/components";

// Gesture handling
<TapGestureHandler
  numberOfTaps={1}
  onHandlerStateChange={(e) => {
    if (e.detail.state === GestureHandlerState.ACTIVE) {
      console.log('Tapped!');
    }
  }}
>
  <View>Tap me</View>
</TapGestureHandler>

// High-performance list
<ListView
  type="list"
  scrollDirection="vertical"
  onScrollToLower={() => loadMoreData()}
>
  {/* List items */}
</ListView>

// Sticky header
<StickyHeader offsetY={0}>
  <View>This header will stick to top</View>
</StickyHeader>

// Draggable bottom sheet
<DraggableSheet
  initialChildSize={0.5}
  minChildSize={0.25}
  maxChildSize={1.0}
  onDragEnd={(e) => console.log('Sheet dragged to:', e.detail.extent)}
>
  <View>Sheet content</View>
</DraggableSheet>

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--components

docs

basic-content.md

form-components.md

index.md

media-components.md

navigation.md

platform-integration.md

skyline-components.md

view-containers.md

tile.json