All files / src/tabs TabProps.ts

0% Statements 0/0
0% Branches 0/0
0% Functions 0/0
0% Lines 0/0

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97                                                                                                                                                                                                 
import { StyledProps } from "../_type";
 
export interface TabsProps extends StyledProps {
  /**
   * 选项卡列表
   */
  tabs?: Tab[];
 
  /**
   * 是否在切换时销毁未激活的 TabPanel
   * @default true
   */
  destroyInactiveTabPanel?: boolean;
 
  /**
   * 当前选中的选项卡
   */
  activeId?: string;
 
  /**
   * 当用户激活指定选项卡时回调
   */
  onActive?: (tab: Tab, evt: React.SyntheticEvent) => void;
 
  /**
   * 默认选中的选项卡。
   * 如果已经提供了 `activeId`,此属性会被忽略。
   */
  defaultActiveId?: string;
 
  /**
   * 在 <Tabs /> 的子节点中:
   *
   * - 如果是 <TabPanel />,则只有 `tabId` 和当前 `activeId` 匹配的才会被渲染
   * - 如果是其它节点,会直接渲染
   */
  children?: React.ReactNode;
 
  /**
   * 自定义 TabBar 中项渲染
   *
   * @default children => <a>{children}</a>
   */
  tabBarRender?: (children: JSX.Element, tab: Tab) => JSX.Element;
 
  /**
   * 是否开启切换带动画效果
   * @default true
   */
  animated?: boolean;
 
  /**
   * 选项卡书签位置
   * @default "top"
   */
  placement?: "top" | "left";
 
  /**
   * 是否使用 ceiling 样式(搭配 Layout 使用)
   * @default
   */
  ceiling?: boolean;
 
  /**
   * 在选项卡后可选的内容。可以附加跳转按钮、操作按钮等
   */
  addon?: React.ReactNode;
 
  /**
   * 垂直(`placement = "left"`)时选项卡容器的最大高度
   */
  maxHeight?: number;
}
 
export interface Tab {
  /**
   * 选项卡标签 ID
   */
  id: string;
 
  /**
   * 选项卡标签内容
   */
  label: React.ReactNode;
 
  /**
   * 如果提供了关闭回调处理函数,则选项卡会渲染关闭按钮,点击时调用
   */
  onClose?: (tab: Tab, event: React.SyntheticEvent) => void;
 
  /**
   * 禁用当前选项卡
   * @default false
   */
  disabled?: boolean;
}