lole-ui
Version:
React UI Component which like a love letter
43 lines (42 loc) • 1.69 kB
TypeScript
import React, { Context, HTMLAttributes } from "react";
export interface SiderContextProps {
siderCollapsed?: boolean;
}
export declare const SiderContext: Context<SiderContextProps>;
export declare type CollapseType = 'clickTrigger' | 'responsive';
export declare type SiderTheme = 'light' | 'dark';
export declare type BreakPointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
export interface SiderProps extends HTMLAttributes<HTMLDivElement> {
/** 前缀 */
prefixCls?: string;
/** 是否可关闭 */
collapsible?: boolean;
/** 是否为关闭状态 */
collapsed?: boolean;
/** 默认状态 */
defaultCollapsed?: boolean;
/** 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 */
reverseArrow?: boolean;
/** 展开-收起时的回调函数 */
onCollapse?: (collapsed: boolean, type: CollapseType) => void;
/** 指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式 */
zeroWidthTriggerStyle?: React.CSSProperties;
/** 自定义 trigger，设置为 null 时隐藏 trigger */
trigger?: React.ReactNode;
/** 宽度 */
width?: number | string;
/** 收缩宽度，设置为 0 会出现特殊 trigger */
collapsedWidth?: number | string;
/** 相应式布局断点 */
breakpoint?: BreakPointType;
/** 主题颜色 */
theme?: SiderTheme;
/** 触发断点的回调 */
onBreakpoint?: (broken: boolean) => void;
}
export interface SiderState {
collapsed?: boolean;
below: boolean;
}
declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement>>;
export default Sider;