低代码高性能原生UI框架

Appearance

本页导读

内置组件类型 ​

ts
/**
 * UxPage
 */
export type UxPage = {
	/**
	 * index
	 */
	index : number,
	/**
	 * slot
	 */
	slot : string,
}


/**
 * TabbarItem
 */
export type UxTab = {
	/**
	 * id
	 */
	id : string | null,
	/**
	 * 名称 必填
	 */
	name : string,
	/**
	 * 选中Icon
	 */
	selectedIcon : string | null,
	/**
	 * 未选中Icon
	 */
	unselectedIcon : string | null,
	/**
	 * 选中颜色
	 */
	selectedColor : string | null,
	/**
	 * 未选中颜色
	 */
	unselectedColor : string | null,
	/**
	 * 角标
	 */
	badge : number | null,
	/**
	 * 红点
	 */
	reddot : boolean | null,
	/**
	 * 仅按钮
	 */
	btn: boolean | null
	/**
	 * 原始下标
	 */
	index : number | null,
}

/**
 * UxBtn
 */
export type UxBtn = {
	/**
	 * id
	 */
	id : string | null,
	/**
	 * 名称 必填
	 */
	name : string,
	/**
	 * Icon
	 */
	icon : string | null,
}

/**
 * UxNode
 */
export type UxNode = {
	/**
	 * id
	 */
	id : string,
	/**
	 * tag
	 */
	tag : string,
	/**
	 * 高度
	 */
	height : number,
	/**
	 * 距顶距离
	 */
	top : number,
	/**
	 * 节点
	 */
	node : Element | null,
	/**
	 * 是否隐藏
	 */
	hide : boolean,
	
}

/**
 * UXQr
 */
export type UXQr = {
	text: string,
	size: number,
	level: number,
	background: string,
	foreground: string,
	locground: string,
	image: string,
	imageSize: number,
	border: number,
}

/**
 * UXPickerData
 */
export type UXPickerData = {
	name: string,
	value: any,
	children: UXPickerData[] | null
}

/**
 * UXPickerEvent
 */
export type UXPickerEvent = {
	name: string,
	index: number[],
	label: string[],
	value: any[],
}

/**
 * UXDatePickerEvent
 */
export type UXDatePickerEvent = {
	name: string,
	index: number[],
	value: string[],
	format: string,
	date: string,
	time: string,
	year: number,
	month: number,
	day: number,
	hour: number,
	minute: number,
	second: number,
	week: number
}

/**
 * UXCalendarEvent
 */
export type UXCalendarEvent = {
	name: string,
	value: UXCalendarDate[],
}

/**
 * UXCalendarDate
 */
export type UXCalendarDate = {
	_date: Date,
	fullDate : string,
	timestamp: number,
	year : number,
	month : number,
	date : number,
	day : number,
	disabled : boolean,
	lunar : string,
	holiday: string,
	isToday : boolean,
	data ?: UXCalendarLunar
}

/**
 * UXCalendarLunar
 */
export type UXCalendarLunar = {
	lYear : number,
	lMonth : number,
	lDay : number,
	IMonthCn : string,
	IDayCn : string,
	cYear : number,
	cMonth : number,
	cDay : number,
	gzYear ?: string,
	gzMonth ?: string,
	gzDay ?: string,
	isToday : boolean,
	isLeap : boolean,
	nWeek ?: number,
	ncWeek ?: string,
	isTerm ?: boolean,
	Term ?: string,
	astro ?: string
}

/**
 * UXSliderEvent
 */
export type UXSliderEvent = {
	name: string,
	value: number,
	values: number[],
}

/**
 * UXSignature
 */
export type UXSignature = {
	color : string
	size : number
	minWidth : number
	maxWidth : number
	minSpeed : number
	maxHistory : number
	disableScroll : boolean
	disabled : boolean
}

/**
 * UXCountDownTime
 */
export type UXCountDownTime = {
	days : number
	hours : number
	minutes : number
	seconds : number
	milliseconds : number
}

/**
 * UXPreview
 */
export type UXPreview = {
	current : string,
	currentId: string | null,
	urls : string[] | null,
	success: (() => void) | null,
	fail: ((err: string) => void) | null,
	close: (() => void) | null,
}

/**
 * UXNumberboxEvent
 */
export type UXNumberboxEvent = {
	name: string,
	value: number,
}

/**
 * UXRateEvent
 */
export type UXRateEvent = {
	name: string,
	value: number,
}

/**
 * UXSwitchEvent
 */
export type UXSwitchEvent = {
	name: string,
	value: boolean,
}

/**
 * UxDragInfo
 */
export type UxDragInfo = {
	id: string,
	index: number,
	old: number,
	width: number,
	height: number,
	ele: UxDragItemComponentPublicInstance
}

/**
 * UXCreateAnimationOptions
 */
export type UXCreateAnimationOptions = {
	/**
	 * 动画持续时间，单位ms
	 */
	duration ?: number;
	/**
	 * 定义动画的效果
	 * - linear: 动画从头到尾的速度是相同的
	 * - ease: 动画以低速开始，然后加快，在结束前变慢
	 * - ease-in: 动画以低速开始
	 * - ease-in-out: 动画以低速开始和结束
	 * - ease-out: 动画以低速结束
	 * - step-start: 动画第一帧就跳至结束状态直到结束
	 * - step-end: 动画一直保持开始状态，最后一帧跳到结束状态
	 */
	timingFunction ?: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out' | 'step-start' | 'step-end';
	/**
	 * 动画延迟时间，单位 ms
	 */
	delay ?: number;
	/**
	 * 设置transform-origin
	 */
	transformOrigin ?: string;
}
/**
 * UxPage
 */
export type UxPage = {
	/**
	 * index
	 */
	index : number,
	/**
	 * slot
	 */
	slot : string,
}


/**
 * TabbarItem
 */
export type UxTab = {
	/**
	 * id
	 */
	id : string | null,
	/**
	 * 名称 必填
	 */
	name : string,
	/**
	 * 选中Icon
	 */
	selectedIcon : string | null,
	/**
	 * 未选中Icon
	 */
	unselectedIcon : string | null,
	/**
	 * 选中颜色
	 */
	selectedColor : string | null,
	/**
	 * 未选中颜色
	 */
	unselectedColor : string | null,
	/**
	 * 角标
	 */
	badge : number | null,
	/**
	 * 红点
	 */
	reddot : boolean | null,
	/**
	 * 仅按钮
	 */
	btn: boolean | null
	/**
	 * 原始下标
	 */
	index : number | null,
}

/**
 * UxBtn
 */
export type UxBtn = {
	/**
	 * id
	 */
	id : string | null,
	/**
	 * 名称 必填
	 */
	name : string,
	/**
	 * Icon
	 */
	icon : string | null,
}

/**
 * UxNode
 */
export type UxNode = {
	/**
	 * id
	 */
	id : string,
	/**
	 * tag
	 */
	tag : string,
	/**
	 * 高度
	 */
	height : number,
	/**
	 * 距顶距离
	 */
	top : number,
	/**
	 * 节点
	 */
	node : Element | null,
	/**
	 * 是否隐藏
	 */
	hide : boolean,
	
}

/**
 * UXQr
 */
export type UXQr = {
	text: string,
	size: number,
	level: number,
	background: string,
	foreground: string,
	locground: string,
	image: string,
	imageSize: number,
	border: number,
}

/**
 * UXPickerData
 */
export type UXPickerData = {
	name: string,
	value: any,
	children: UXPickerData[] | null
}

/**
 * UXPickerEvent
 */
export type UXPickerEvent = {
	name: string,
	index: number[],
	label: string[],
	value: any[],
}

/**
 * UXDatePickerEvent
 */
export type UXDatePickerEvent = {
	name: string,
	index: number[],
	value: string[],
	format: string,
	date: string,
	time: string,
	year: number,
	month: number,
	day: number,
	hour: number,
	minute: number,
	second: number,
	week: number
}

/**
 * UXCalendarEvent
 */
export type UXCalendarEvent = {
	name: string,
	value: UXCalendarDate[],
}

/**
 * UXCalendarDate
 */
export type UXCalendarDate = {
	_date: Date,
	fullDate : string,
	timestamp: number,
	year : number,
	month : number,
	date : number,
	day : number,
	disabled : boolean,
	lunar : string,
	holiday: string,
	isToday : boolean,
	data ?: UXCalendarLunar
}

/**
 * UXCalendarLunar
 */
export type UXCalendarLunar = {
	lYear : number,
	lMonth : number,
	lDay : number,
	IMonthCn : string,
	IDayCn : string,
	cYear : number,
	cMonth : number,
	cDay : number,
	gzYear ?: string,
	gzMonth ?: string,
	gzDay ?: string,
	isToday : boolean,
	isLeap : boolean,
	nWeek ?: number,
	ncWeek ?: string,
	isTerm ?: boolean,
	Term ?: string,
	astro ?: string
}

/**
 * UXSliderEvent
 */
export type UXSliderEvent = {
	name: string,
	value: number,
	values: number[],
}

/**
 * UXSignature
 */
export type UXSignature = {
	color : string
	size : number
	minWidth : number
	maxWidth : number
	minSpeed : number
	maxHistory : number
	disableScroll : boolean
	disabled : boolean
}

/**
 * UXCountDownTime
 */
export type UXCountDownTime = {
	days : number
	hours : number
	minutes : number
	seconds : number
	milliseconds : number
}

/**
 * UXPreview
 */
export type UXPreview = {
	current : string,
	currentId: string | null,
	urls : string[] | null,
	success: (() => void) | null,
	fail: ((err: string) => void) | null,
	close: (() => void) | null,
}

/**
 * UXNumberboxEvent
 */
export type UXNumberboxEvent = {
	name: string,
	value: number,
}

/**
 * UXRateEvent
 */
export type UXRateEvent = {
	name: string,
	value: number,
}

/**
 * UXSwitchEvent
 */
export type UXSwitchEvent = {
	name: string,
	value: boolean,
}

/**
 * UxDragInfo
 */
export type UxDragInfo = {
	id: string,
	index: number,
	old: number,
	width: number,
	height: number,
	ele: UxDragItemComponentPublicInstance
}

/**
 * UXCreateAnimationOptions
 */
export type UXCreateAnimationOptions = {
	/**
	 * 动画持续时间，单位ms
	 */
	duration ?: number;
	/**
	 * 定义动画的效果
	 * - linear: 动画从头到尾的速度是相同的
	 * - ease: 动画以低速开始，然后加快，在结束前变慢
	 * - ease-in: 动画以低速开始
	 * - ease-in-out: 动画以低速开始和结束
	 * - ease-out: 动画以低速结束
	 * - step-start: 动画第一帧就跳至结束状态直到结束
	 * - step-end: 动画一直保持开始状态，最后一帧跳到结束状态
	 */
	timingFunction ?: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out' | 'step-start' | 'step-end';
	/**
	 * 动画延迟时间，单位 ms
	 */
	delay ?: number;
	/**
	 * 设置transform-origin
	 */
	transformOrigin ?: string;
}