底部的折叠标志是否可以移动到头部

Wdam commented 2 years ago

YogaZong commented 2 years ago

Yes, of course. 2 APIs about this feature: collapsedButtonRender, headerContentRender.

demo:

Vue Template Style

<pro-layout
    :collapsedButtonRender="false" // To invalidate CollapsedButton rendered at the bottom of the menu
>
   // use headerContentRender slot
   <template #headerContentRender>
      <div
        @click="
          () => {
            collapsed = !collapsed;
          }
        "
        style="cursor: pointer; font-size: 16px"
      >
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else-if="!collapsed" />
      </div>
    </template>
    ...
</pro-layout>

Jsx Style

return ()=>(
  <ProLayout
      collapsedButtonRender={false} // To invalidate CollapsedButton rendered at the bottom of the menu
      {...restProps}
      // use headerContentRender prop
      headerContentRender={() => {
        return (
          <div
            onClick={() => setCollapsed(!collapsed)}
            style={{
              cursor: 'pointer',
              fontSize: '16px',
            }}
          >
            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </div>
        );
      }}
  >
    {content}
  </ProLayout>
)

YogaZong commented 2 years ago

Wdam commented 2 years ago

thank you very much

YogaZong @.***> 于2021年11月15日周一下午1:34写道：

[image: image] https://user-images.githubusercontent.com/32829547/141727851-13c3b901-7a0f-43a9-ac24-1fbb96a112b4.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vueComponent/pro-layout/issues/169#issuecomment-968554295, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKDHOWPQBMFTYPYXOY7DN3DUMCLVVANCNFSM5H4IBNWQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

vueComponent / pro-components

底部的折叠标志是否可以移动到头部 #169