@univerjs/design

Cette page API est actuellement disponible en anglais. Les signatures et identifiants restent identiques dans toutes les langues.

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 = PropsWithChildren

IFormLayoutProps

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[]>}

Que pensez-vous de ce guide ?