Skip to content

P
pro-layout
Commit 172c0c09 authored by Sendya's avatar Sendya
Browse files
Options

fix: global footer

parent f81a668f
Show whitespace changes
Inline Side-by-side
Showing with 133 additions and 46 deletions
examples/index.tsx
View file @ 172c0c09
......@@ -12,7 +12,7 @@ const SimpleDemo = {
collapsed: false,
openKeys: [],
selectedKeys: [],
})
});
return () => (
<div class="components">
......@@ -31,12 +31,11 @@ const SimpleDemo = {
openKeys={menuState.openKeys}
selectedKeys={menuState.selectedKeys}
onOpenChange={$event => {
menuState.openKeys = $event
menuState.openKeys = $event;
}}
onSelect={$event => {
menuState.selectedKeys = $event
menuState.selectedKeys = $event;
}}
>
<Button
onClick={() => {
......@@ -53,11 +52,11 @@ const SimpleDemo = {
const app = createApp(SimpleDemo);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k])
})
app.component(Icon[k].displayName, Icon[k]);
});
app.use(BasicLayout).mount('#__vue-content>div');
examples/menus.ts
View file @ 172c0c09
import { RouteProps } from '../src/typings';
export const menus: RouteProps[] = [
{
path: '/welcome',
name: 'welcome',
meta: { icon: 'SmileOutlined', title: 'Welcome' },
},
{
path: '/dashboard',
name: 'Dashboard',
......
examples/side-menu.tsx
View file @ 172c0c09
import { createApp, reactive } from 'vue';
import { createApp } from 'vue';
import 'ant-design-vue/dist/antd.less';
import './side-menu.less';
import { Card, Space, Button, Layout } from 'ant-design-vue';
import { Layout } from 'ant-design-vue';
import { menus } from './menus';
import SiderMenuWrapper from '../src/SiderMenu';
import * as Icon from '@ant-design/icons-vue';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import { default as SiderMenuWrapper } from '../src/SiderMenu';
import { useMenuState } from '../src/SiderMenu/BaseMenu';
import * as Icon from '@ant-design/icons-vue';
const DemoComponent = {
setup() {
const {
state: menuState,
} = useMenuState({
const { state: menuState } = useMenuState({
collapsed: false,
openKeys: ['/dashboard'] as string[],
selectedKeys: ['/dashboard/monitor'] as string[],
openKeys: [''],
selectedKeys: ['/welcome'],
});
const handleClick = () => {
menuState.collapsed = !menuState.collapsed;
console.log('handleClick', menuState.collapsed);
const handleCollapse = (collapsed: boolean) => {
menuState.collapsed = collapsed;
};
const handleOpenChange = (openKeys: string[]) => {
menuState.openKeys = openKeys;
}
};
const handleSelect = (selectedKeys: string[]) => {
menuState.selectedKeys = selectedKeys;
}
};
return () => (
<div class="components">
......@@ -47,25 +43,26 @@ const DemoComponent = {
selectedKeys={menuState.selectedKeys}
onOpenChange={handleOpenChange}
onSelect={handleSelect}
onCollapse={handleCollapse}
matchMenuKeys={[]}
contentWidth={'Fixed'}
primaryColor={'#1890ff'}
siderWidth={208}
/>
<Layout>
<Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;">
{
menuState.collapsed
? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
: <MenuFoldOutlined class="trigger" onClick={handleClick} />
}
</Layout.Header>
<Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
<Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;"></Layout.Header>
<Layout.Content
style={{
margin: '24px 16px',
padding: '24px',
background: '#fff',
minHeight: '280px',
}}
>
<div>Context</div>
</Layout.Content>
</Layout>
</Layout>
</div>
</div>
</div>
......@@ -75,11 +72,11 @@ const DemoComponent = {
const app = createApp(DemoComponent);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k])
})
app.component(Icon[k].displayName, Icon[k]);
});
app.mount('#__vue-content>div');
src/BasicLayout.tsx
View file @ 172c0c09
......@@ -6,11 +6,13 @@ import { Layout } from 'ant-design-vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { default as ProProvider } from './ProProvider';
import { createRouteContext } from './RouteContext';
import { WrapContent } from './WrapContent';
import { default as GlobalFooter } from './GlobalFooter';
import SiderMenuWrapper from './SiderMenu';
const defaultI18nRender = (key: string) => key;
const { state, provider: RouteContextProvider } = createRouteContext({
const { state: routeContext, Provider: RouteContextProvider } = createRouteContext({
isMobile: false,
menuData: [],
sideWidth: 208,
......@@ -32,7 +34,10 @@ const BasicLayout = (props, { emit, slots }) => {
<ProProvider {...props} i18n={defaultI18nRender}>
<RouteContextProvider>
<Layout class="ant-pro-basicLayout">
<SiderMenuWrapper {...props} />
<SiderMenuWrapper
{...props}
onCollapse={(collapsed: boolean) => emit('update:collapsed', collapsed)}
/>
<Layout>
<Layout.Header style="background: #fff; padding: 0; height: 48px; line-height: 48px;">
{props.collapsed ? (
......@@ -41,7 +46,7 @@ const BasicLayout = (props, { emit, slots }) => {
<MenuFoldOutlined class="trigger" onClick={handleClick} />
)}
</Layout.Header>
<Layout.Content
<WrapContent
style={{
margin: '24px 16px',
padding: '24px',
......@@ -49,8 +54,31 @@ const BasicLayout = (props, { emit, slots }) => {
minHeight: '280px',
}}
>
{slots.default?.()}
</Layout.Content>
<div>Context</div>
</WrapContent>
<GlobalFooter
links={[
{
key: '1',
title: 'Pro Layout',
href: 'https://www.github.com/vueComponent/pro-layout',
blankTarget: true,
},
{
key: '2',
title: 'Github',
href: 'https://www.github.com/vueComponent/ant-design-vue-pro',
blankTarget: true,
},
{
key: '3',
title: '@Sendya',
href: 'https://www.github.com/sendya/',
blankTarget: true,
}
]}
copyright={(<a href="https://github.com/vueComponent" target="_blank">vueComponent</a>)}
/>
</Layout>
</Layout>
</RouteContextProvider>
......
src/SiderMenu/SiderMenu.tsx
View file @ 172c0c09
import './index.less';
import { computed, ref, VNodeChild, inject } from 'vue';
import { FunctionalComponent, computed, ref, VNodeChild } from 'vue';
// import 'ant-design-vue/es/layout/style';
// import Layout from 'ant-design-vue/es/layout';
import { Layout } from 'ant-design-vue';
import { Layout, Menu } from 'ant-design-vue';
import BaseMenu, { BaseMenuProps } from './BaseMenu';
import { WithFalse } from '../typings';
import { SiderProps } from './typings';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { defaultProProviderProps, injectProConfigKey } from '../ProProvider';
import { useProProvider } from '../ProProvider';
const { Sider } = Layout;
......@@ -85,7 +85,7 @@ export const defaultRenderLogoAndTitle = (
export const defaultRenderCollapsedButton = (collapsed?: boolean) =>
collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />;
const SiderMenu = (props: SiderMenuProps) => {
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
const {
menuData,
collapsed,
......@@ -94,8 +94,11 @@ const SiderMenu = (props: SiderMenuProps) => {
onOpenChange,
onSelect,
collapsedWidth = 48,
onCollapse,
menuFooterRender = false,
collapsedButtonRender = defaultRenderCollapsedButton,
} = props;
const { getPrefixCls } = inject(injectProConfigKey, defaultProProviderProps);
const { getPrefixCls } = useProProvider();
const baseClassName = getPrefixCls('sider');
const isMix = computed(() => props.layout === 'mix');
......@@ -136,8 +139,13 @@ const SiderMenu = (props: SiderMenuProps) => {
collapsible={false}
collapsedWidth={collapsedWidth}
>
<div class="ant-pro-sider-logo">{headerDom}</div>
<div style="flex: 1 1 0%; overflow: hidden auto;">
<div class={`${baseClassName}-logo`}>{headerDom}</div>
{extraDom && (
<div class={`${baseClassName}-extra ${!headerDom && `${baseClassName}-extra-no-logo`}`}>
{extraDom}
</div>
)}
<div style="flex: 1; overflow: hidden auto;">
<BaseMenu
menus={menuData}
theme={props.theme}
......@@ -159,6 +167,29 @@ const SiderMenu = (props: SiderMenuProps) => {
}}
/>
</div>
<div class={`${baseClassName}-links`}>
<Menu
class={`${baseClassName}-link-menu`}
inlineIndent={16}
theme={runtimeTheme.value}
selectedKeys={[]}
openKeys={[]}
mode="inline"
>
<Menu.Item
class={`${baseClassName}-collapsed-button`}
title={false}
onClick={() => {
if (onCollapse) {
onCollapse(!props.collapsed);
}
}}
>
{collapsedButtonRender(collapsed)}
</Menu.Item>
</Menu>
</div>
{menuFooterRender && <div class={`${baseClassName}-footer`}>{menuFooterRender(props)}</div>}
</Sider>
</>
);
......
src/SiderMenu/index.tsx
View file @ 172c0c09
......@@ -7,6 +7,7 @@ import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
const SiderMenuWrapper: FunctionalComponent<SiderMenuProps & PrivateSiderMenuProps> = (
props,
{ emit },
) => {
return props.isMobile ? (
<Drawer>
......
src/WrapContent.tsx 0 → 100644
View file @ 172c0c09
import { FunctionalComponent, ref, toRefs } from 'vue';
import { Layout } from 'ant-design-vue';
import { useProProvider } from './ProProvider';
import { ContentWidth } from './typings';
const { Content } = Layout;
export interface WrapContentProps {
isChildrenLayout?: boolean;
location?: string | string[] | any;
contentHeight?: number;
contentWidth?: ContentWidth;
}
export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots }) => {
const { getPrefixCls } = toRefs(useProProvider());
const prefixCls = getPrefixCls.value('basicLayout');
const classNames = ref({
[`${prefixCls}-content`]: true,
[`${prefixCls}-has-header`]: true,
});
return <Content class={classNames.value}>{slots.default?.()}</Content>;
};
export default WrapContent;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment