@univerjs/design
本 API 页面目前提供英文正文。代码签名与标识符不随界面语言变化。
Shared React design components, styles, and locale resources for Univer UI packages.
TypeScript
import { Button, ConfigProvider, Dialog, message, Select, Tree } from '@univerjs/design'Entry Points
- Locale:
@univerjs/design/locale/*
Exports
| Export | Kind | Related types |
|---|---|---|
ActionRow | Component | IActionRowProps |
Accordion | Component | IAccordionProps |
Avatar | Component | IAvatarProps |
Badge | Component | IBadgeProps |
Button | Component | IButtonProps |
ButtonGroup | Component | IButtonGroupProps |
Calendar | Component | - |
CascaderList | Component | ICascaderListProps, ICascaderOption |
CheckboxGroup | Component | ICheckboxGroupProps |
Checkbox | Component | ICheckboxProps |
ColorPicker | Component | IColorPickerProps |
ColorPickerPanel | Component | IColorPickerPanelProps |
ConfigContext | Context | IConfigProviderProps |
ConfigProvider | Component | IConfigProviderProps |
Confirm | Component | IConfirmProps |
DatePicker | Component | - |
DateRangePicker | Component | - |
Dialog | Component | IDialogProps |
DraggableList | Component | IDraggableListProps |
DropdownMenu | Component | IDropdownMenuProps |
Dropdown | Component | IDropdownProps |
FormDualColumnLayout | Component | IFormDualColumnLayoutProps, IFormLayoutProps |
FormLayout | Component | IFormDualColumnLayoutProps, IFormLayoutProps |
Gallery | Component | IGalleryProps |
GradientColorPicker | Component | GradientType, IGradientColorPickerProps, IGradientStop, IGradientValue |
HoverCard | Component | IHoverCardProps |
InputNumber | Component | IInputNumberProps |
Input | Component | IInputProps |
KBD | Component | IKBDProps |
message | Function | IMessageProps |
Messager | Component | IMessageProps |
MessageType | Enum | IMessageProps |
MobileActionRow | Component | IMobileActionRowProps |
MobileColorPresets | Component | IMobileColorPresetsProps |
removeMessage | Function | IMessageProps |
Pager | Component | IPagerProps |
Popup | Component | IPopupProps |
RadioGroup | Component | IRadioGroupProps |
Radio | Component | IRadioProps |
Segmented | Component | - |
SelectList | Component | ISelectListProps |
MultipleSelect | Component | IMultipleSelectProps |
Select | Component | ISelectProps |
Separator | Component | - |
Switch | Component | - |
Textarea | Component | - |
TimeInput | Component | - |
toast | Function | IToasterProps |
Toaster | Component | IToasterProps |
Tooltip | Component | ITooltipProps |
filterLeafNode | Function | ITreeNodeProps, ITreeProps |
findNodePathFromTree | Function | ITreeNodeProps, ITreeProps |
findSubTreeFromPath | Function | ITreeNodeProps, ITreeProps |
mergeTreeSelected | Function | ITreeNodeProps, ITreeProps |
Tree | Component | ITreeNodeProps, ITreeProps |
TreeSelectionMode | Enum | ITreeNodeProps, ITreeProps |
borderBottomClassName | Helper | - |
borderClassName | Helper | - |
borderLeftBottomClassName | Helper | - |
borderLeftClassName | Helper | - |
borderRightClassName | Helper | - |
borderTopClassName | Helper | - |
divideXClassName | Helper | - |
divideYClassName | Helper | - |
scrollbarClassName | Helper | - |
clsx | Helper | - |
isBrowser | Helper | - |
render | Helper | - |
unmount | Helper | - |
resizeObserverCtor | Helper | - |
Types
IAccordionProps
TypeScript
import type { ReactNode } from 'react'export interface IAccordionProps { className?: string items: IAccordionItem[]}IAvatarProps
TypeScript
import type { VariantProps } from 'class-variance-authority'import type { CSSProperties, ReactNode } from 'react'export interface IAvatarProps extends Omit<VariantProps<typeof avatarVariants>, 'size'> { children?: ReactNode className?: string style?: CSSProperties title?: string alt?: string size?: 'small' | 'middle' | number src?: string fit?: ImageFit onError?: () => void onLoad?: () => void}IBadgeProps
TypeScript
import type { ReactNode } from 'react'export interface IBadgeProps { className?: string children: ReactNode closable?: boolean onClose?: () => void}IButtonProps
TypeScript
import type { VariantProps } from 'class-variance-authority'import type { ButtonHTMLAttributes } from 'react'export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { asChild?: boolean}IButtonGroupProps
TypeScript
import type { ReactElement } from 'react'import type { IButtonProps } from './Button'export interface IButtonGroupProps { className?: string orientation?: 'horizontal' | 'vertical' children: ReactElement<IButtonProps>[]}ICascaderListProps
TypeScript
export interface ICascaderListProps { value: string[] options?: ICascaderOption[] onChange: (value: string[]) => void contentClassName?: string wrapperClassName?: string}ICascaderOption
TypeScript
export interface ICascaderOption { label: string value: string color?: string children?: ICascaderOption[]}ICheckboxGroupProps
TypeScript
import type { CSSProperties, ReactNode } from 'react'import type { ICheckboxProps } from '../checkbox/Checkbox'export interface ICheckboxGroupProps { children: ReactNode[] className?: string style?: CSSProperties value: Array<string | number | boolean> disabled?: boolean direction?: 'horizontal' | 'vertical' onChange: (value: Array<string | number | boolean>) => void}ICheckboxProps
TypeScript
import type { ChangeEvent, CSSProperties, ReactNode } from 'react'export interface ICheckboxProps { children?: ReactNode className?: string style?: CSSProperties checked?: boolean indeterminate?: boolean value?: string | number | boolean disabled?: boolean onChange?: (value: string | number | boolean) => void contentClassName?: string}IColorPickerProps
TypeScript
export interface IColorPickerProps { format?: 'hex' | 'rgba' value?: string onChange?: (value: string) => void}IConfigProviderProps
TypeScript
import type { ReactNode } from 'react'export interface IConfigProviderProps { children: ReactNode locale?: any mountContainer: HTMLElement | null}IConfirmProps
TypeScript
import type { ReactNode } from 'react'import type enUS from '../../locale/en-US'export interface IConfirmProps { children: ReactNode visible?: boolean title?: React.ReactNode cancelText?: string confirmText?: string onClose?: () => void onConfirm?: () => void width?: number | string closable?: boolean}IDialogProps
TypeScript
import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react'export interface IDialogProps { children: ReactNode style?: CSSProperties open?: boolean width?: number | string title?: ReactNode draggable?: boolean defaultPosition?: { x: number, y: number } destroyOnClose?: boolean preservePositionOnDestroy?: boolean footer?: ReactNode mask?: boolean className?: string closable?: boolean maskClosable?: boolean keyboard?: boolean onOpenChange?: (open: boolean) => void onClose?: () => void showOk?: boolean showCancel?: boolean onOk?: () => void onCancel?: () => void}IDraggableListProps
TypeScript
import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode } from 'react'export interface IDraggableListProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, 'onDragStart'>, IDraggableListDragCallbacks { list: T[] onListChange: (list: T[]) => void idKey: keyof T itemRender: (item: T, index: number) => ReactNode draggableHandle?: string rowHeight?: number margin?: [number, number]}IDropdownMenuProps
TypeScript
import type { ComponentProps, ReactNode } from 'react'export interface IDropdownMenuProps extends ComponentProps<typeof DropdownMenuContent> { children: ReactNode items: DropdownMenuType[] disabled?: boolean open?: boolean onOpenChange?: (open: boolean) => void}IDropdownProps
TypeScript
import type { ComponentProps, ReactNode } from 'react'export interface IDropdownProps extends ComponentProps<typeof PopoverContent> { children: ReactNode overlay: ReactNode disabled?: boolean open?: boolean onOpenChange?: (open: boolean) => void}IFormDualColumnLayoutProps
TypeScript
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'export type IFormDualColumnLayoutProps = PropsWithChildrenIFormLayoutProps
TypeScript
import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'export interface IFormLayoutProps { label?: ReactNode desc?: ReactNode children?: ReactNode style?: CSSProperties className?: string contentStyle?: CSSProperties error?: string collapsable?: boolean defaultCollapsed?: boolean}IGalleryProps
TypeScript
export interface IGalleryProps { className?: string images: string[] open?: boolean onOpenChange?: (open: boolean) => void}GradientType
TypeScript
export type GradientType = 'linear' | 'radial' | 'angular' | 'diamond'IGradientColorPickerProps
TypeScript
export interface IGradientColorPickerProps { className?: string value?: IGradientValue onChange?: (value: IGradientValue) => void}IGradientStop
TypeScript
export interface IGradientStop { color: string offset: number}IGradientValue
TypeScript
export interface IGradientValue { type: GradientType stops: IGradientStop[] angle?: number}IHoverCardProps
TypeScript
import type { ComponentProps, ReactNode } from 'react'export interface IHoverCardProps extends ComponentProps<typeof HoverCardContent> { children: ReactNode overlay: ReactNode disabled?: boolean openDelay?: number open?: boolean onOpenChange?: (open: boolean) => void}IInputNumberProps
TypeScript
import type { FocusEvent, InputHTMLAttributes, KeyboardEvent } from 'react'export interface IInputNumberProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> { value?: number | null defaultValue?: number size?: 'mini' | 'small' min?: number max?: number step?: number precision?: number formatter?: (value: string | number | undefined) => string parser?: (displayValue: string | undefined) => string controls?: boolean className?: string inputClassName?: string controlsClassName?: string onChange?: (value: number | null) => void onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void onPressEnter?: (e: KeyboardEvent<HTMLInputElement>) => void allowEmpty?: boolean}IInputProps
TypeScript
import type { VariantProps } from 'class-variance-authority'import type { InputHTMLAttributes } from 'react'export interface IInputProps extends Pick<InputProps, 'onFocus' | 'onBlur'>, VariantProps<typeof inputVariants> { autoFocus?: boolean className?: string style?: React.CSSProperties type?: HTMLInputElement['type'] placeholder?: string value?: string allowClear?: boolean disabled?: boolean onClick?: (e: React.MouseEvent<HTMLInputElement>) => void onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void onChange?: (value: string) => void inputClass?: string inputStyle?: React.CSSProperties slot?: React.ReactNode}IKBDProps
TypeScript
export interface IKBDProps { keyboard: string className?: string}IMessageProps
TypeScript
import type { ComponentProps, ReactNode } from 'react'export interface IMessageProps { id?: string content: string duration?: number type?: MessageType onClose?: () => void}IPagerProps
TypeScript
export interface IPagerProps { className?: string text?: string value: number total: number loop?: boolean onChange?: (value: number) => void}IPopupProps
TypeScript
import type { ReactElement } from 'react'export interface IPopupProps { children: ReactElement visible?: boolean offset?: [number, number] overflowVisible?: boolean placementY?: 'below' | 'above'}IRadioGroupProps
TypeScript
import type { CSSProperties, ReactNode } from 'react'import type { IRadioProps } from '../radio/Radio'export interface IRadioGroupProps { children: ReactNode[] className?: string style?: CSSProperties value: string disabled?: boolean direction?: 'horizontal' | 'vertical' onChange: (value: string | number | boolean) => void}IRadioProps
TypeScript
import type { ReactNode } from 'react'export interface IRadioProps { children?: ReactNode checked?: boolean value?: string | number | boolean disabled?: boolean onChange?: (value: string | number | boolean) => void}ISelectListProps
TypeScript
export interface ISelectListProps { value: string | string[] options?: Array<{ label: string value: string color?: string }> hideCheckMark?: boolean onChange: (value: string | string[] | undefined) => void multiple?: boolean optionClassName?: string className?: string}IMultipleSelectProps
TypeScript
import type { ReactNode } from 'react'import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'export interface IMultipleSelectProps { className?: string value: string[] disabled?: boolean options?: IOption[] borderless?: boolean onChange: (values: string[]) => void}ISelectProps
TypeScript
import type { ReactNode } from 'react'import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu'export interface ISelectProps { className?: string value: string disabled?: boolean options?: IOption[] borderless?: boolean onChange: (value: string) => void}IToasterProps
TypeScript
import type { ComponentProps } from 'react'export type IToasterProps = ComponentProps<typeof Sonner>ITooltipProps
TypeScript
import type { ReactElement, ReactNode } from 'react'export interface ITooltipProps { children: ReactNode className?: string asChild?: boolean title?: ReactNode placement?: 'top' | 'right' | 'bottom' | 'left' showIfEllipsis?: boolean visible?: boolean onVisibleChange?: (visible: boolean) => void}ITreeNodeProps
TypeScript
import type { CSSProperties, ReactNode } from 'react'export interface ITreeNodeProps { title: string key: string children?: ITreeNodeProps[]}ITreeProps
TypeScript
import type { CSSProperties, ReactNode } from 'react'export interface ITreeProps { data?: ITreeItemProps[] defaultExpandAll?: boolean selectionMode?: TreeSelectionMode valueGroup?: string[] onChange?: (node: ITreeNodeProps) => void onExpend?: (value: string) => void height?: number itemHeight?: number attachRender?: (node: ITreeItemProps) => ReactNode treeNodeClassName?: string style?: CSSProperties defaultCache?: Map<string, string[]>}你觉得这篇文档如何？