import React from 'react';
import './BreadCrumb.scss';
/**
 * 面包屑单项类型定义
 */
export interface MtBreadCrumbItemType {
    /** 自定义类名 */
    className?: string;
    /** 显示文本或节点，支持 :param 占位符（如 '用户:username'） */
    title?: React.ReactNode;
    /** 链接地址，设置后该项会渲染为 <a> 标签 */
    href?: string;
    /** 特殊类型 - 分隔符项 */
    type?: 'separator';
    /** 自定义分隔符内容（仅当 type 为 'separator' 时有效） */
    separator?: React.ReactNode;
    /** 点击事件回调 */
    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
}
/**
 * 面包屑组件 Props
 */
export interface MtBreadCrumbProps {
    /** 自定义子节点（用于完全自定义面包屑内容） */
    children?: React.ReactNode;
    /** 自定义容器类名 */
    customClass?: string;
    /** 分隔符，默认 '/' */
    separator?: React.ReactNode;
    /** 面包屑项列表 */
    items?: MtBreadCrumbItemType[];
    /**
     * 路由参数 - 用于替换 title 中的占位符
     *
     * @example
     * ```tsx
     * // items: [{ title: '用户:username' }, { title: '订单:orderId' }]
     * <MtBreadCrumb
     *   items={[
     *     { title: '用户:username', href: '/user/:username' },
     *     { title: '订单:orderId' }
     *   ]}
     *   params={{ username: '张三', orderId: 12345 }}
     * />
     * // 渲染结果: 用户张三 / 订单12345
     * ```
     */
    params?: Record<string, string | number>;
}
/**
 * MtBreadCrumb 面包屑导航组件
 *
 * 用于显示当前页面在层级结构中的位置，支持链接跳转和参数替换
 *
 * @example
 * ```tsx
 * // 基础用法
 * <MtBreadCrumb
 *   items={[
 *     { title: '首页', href: '/' },
 *     { title: '用户管理', href: '/users' },
 *     { title: '详情' }
 *   ]}
 * />
 *
 * // 使用自定义分隔符
 * <MtBreadCrumb separator=">" items={[...]} />
 *
 * // 使用参数替换
 * <MtBreadCrumb
 *   items={[
 *     { title: '用户:username', onClick: () => navigate('/user') },
 *     { title: '订单详情' }
 *   ]}
 *   params={{ username: '张三' }}
 * />
 *
 * // 包含自定义分隔符项
 * <MtBreadCrumb
 *   items={[
 *     { title: '首页' },
 *     { type: 'separator', separator: '|' },
 *     { title: '列表' }
 *   ]}
 * />
 * ```
 */
declare const MtBreadCrumb: React.FC<MtBreadCrumbProps>;
export default MtBreadCrumb;