关于ant-design-pro 隐藏面包屑和路由导航栏

隐藏路由导航栏

可以参考 : https://pro.ant.design/zh-CN/docs/advanced-menu
主要属性是
export interface Setting {
/**

  • @name false 时不展示顶栏
    /
    headerRender?: false;
    /
    *
  • @name false 时不展示页脚
    /
    footerRender?: false;
    /
    *
  • @name false 时不展示菜单
    /
    menuRender?: false;
    /
    *
  • @name false 时不展示菜单顶栏
    */
    menuHeaderRender?: false;

/**

  • @name 固定顶栏
    **/
    fixedHeader: boolean;

/**

  • @name 固定菜单
    */
    fixSiderbar: boolean;

/**

  • @name theme for nav menu
  • @name 导航菜单的主题
    /
    navTheme: ‘dark’ | ‘light’ | ‘realDark’ | undefined;
    /
    *
  • @name nav menu position: side or top
  • @name 导航菜单的位置
  • @description side 为正常模式,top菜单显示在顶部,mix 两种兼有
    /
    layout: ‘side’ | ‘top’ | ‘mix’;
    /
    *
  • @name 顶部导航的主题,mix 模式生效
    */
    headerTheme: ‘dark’ | ‘light’;
    }

隐藏面包屑

<PageContainer  ghost={true} breadcrumbRender={false}>

需要添加 ghost 不然上面会有一条杠

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 的侧边导航栏隐藏可以通过 `Layout` 和 `Menu` 组件以及一些 CSS 样式实现。以下是一个简单的示例: ```vue <template> <a-layout :style="{ minHeight: '100vh' }"> <a-layout-sider :style="{ display: collapsed ? 'none' : 'block' }"> <a-menu :default-selected-keys="['1']" mode="inline"> <a-menu-item key="1"> <a-icon type="user" /> <span slot="title">用户管理</span> </a-menu-item> <a-menu-item key="2"> <a-icon type="team" /> <span slot="title">团队管理</span> </a-menu-item> </a-menu> </a-layout-sider> <a-layout-content> <a-icon class="trigger" type="menu-fold" v-show="collapsed" @click="collapsed = false" /> <a-icon class="trigger" type="menu-unfold" v-show="!collapsed" @click="collapsed = true" /> Content </a-layout-content> </a-layout> </template> <script> export default { data() { return { collapsed: false, }; }, }; </script> <style> .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; } .trigger:hover { color: #1890ff; } </style> ``` 在这个示例中,我们使用了 `Layout` 和 `Menu` 组件来实现侧边导航栏。`Layout` 组件用于布局,`LayoutSider` 组件用于设置侧边栏的位置和宽度。通过 `:style="{ display: collapsed ? 'none' : 'block' }"` 控制侧边栏的显示和隐藏。其中,`:style` 是一个动态绑定的样式对象,根据 `collapsed` 的值来设置侧边栏的显示和隐藏。通过两个 `a-icon` 组件来切换侧边栏的显示和隐藏,通过 `v-show` 控制两个组件的显示和隐藏。 您可以根据自己的需求对侧边导航栏进行进一步的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值