diff --git a/devui/layout/index.ts b/devui/layout/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..8f6ec9b64e061adaa7b5ba0c648f8320950fbacf --- /dev/null +++ b/devui/layout/index.ts @@ -0,0 +1,41 @@ +import type { App } from 'vue' +import Layout from './src/layout' +import Content from './src/content' +import Header from './src/header' +import Footer from './src/footer' +import Aside from './src/aside' + +Layout.install = function(app: App): void { + app.component(Layout.name, Layout) +} + +Content.install = function(app: App): void { + app.component(Content.name, Content) +} + +Header.install = function(app: App): void { + app.component(Header.name, Header) +} + +Footer.install = function(app: App): void { + app.component(Footer.name, Footer) +} + +Aside.install = function(app: App): void { + app.component(Aside.name, Aside) +} + +export { Layout, Content, Header, Footer, Aside } + +export default { + title: 'Layout 布局', + category: '布局', + status: '已完成', + install(app: App): void { + app.use(Layout as any) + app.use(Content as any) + app.use(Header as any) + app.use(Footer as any) + app.use(Aside as any) + } +} diff --git a/devui/layout/src/aside.tsx b/devui/layout/src/aside.tsx new file mode 100644 index 0000000000000000000000000000000000000000..ca650fdce7a02e0250020ba5b6a9931bdb4e6932 --- /dev/null +++ b/devui/layout/src/aside.tsx @@ -0,0 +1,8 @@ +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'DAside', + setup (props, { slots }) { + return () =>
{ slots.default?.() }
+ } +}) \ No newline at end of file diff --git a/devui/layout/src/content.scss b/devui/layout/src/content.scss new file mode 100644 index 0000000000000000000000000000000000000000..3314b4c4a32fae514875e62fffca49623642b211 --- /dev/null +++ b/devui/layout/src/content.scss @@ -0,0 +1,4 @@ +.devui-content { + flex: auto; + min-height: 0; +} diff --git a/devui/layout/src/content.tsx b/devui/layout/src/content.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d2caaecd191a5cd7be7dd29c0361bd14d2a519e4 --- /dev/null +++ b/devui/layout/src/content.tsx @@ -0,0 +1,10 @@ +import './content.scss' + +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'DContent', + setup (props, { slots }) { + return () =>
{slots.default?.()}
+ } +}) \ No newline at end of file diff --git a/devui/layout/src/footer.scss b/devui/layout/src/footer.scss new file mode 100644 index 0000000000000000000000000000000000000000..eeec01542b9c1b59694b0ba7f41cac854001deb2 --- /dev/null +++ b/devui/layout/src/footer.scss @@ -0,0 +1,4 @@ +.devui-footer { + text-align: center; + line-height: 1.5; +} diff --git a/devui/layout/src/footer.tsx b/devui/layout/src/footer.tsx new file mode 100644 index 0000000000000000000000000000000000000000..457ae984d5cb1445eccdef516289deb5ff2d1c16 --- /dev/null +++ b/devui/layout/src/footer.tsx @@ -0,0 +1,10 @@ +import './footer.scss' + +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'DFooter', + setup (props, { slots }) { + return () =>
{ slots.default?.() }
+ } +}) \ No newline at end of file diff --git a/devui/layout/src/header.scss b/devui/layout/src/header.scss new file mode 100644 index 0000000000000000000000000000000000000000..ada90cec6937ac6c43ed337614a850a8ef97047b --- /dev/null +++ b/devui/layout/src/header.scss @@ -0,0 +1,4 @@ +.devui-header { + min-height: 40px; + flex: auto; +} diff --git a/devui/layout/src/header.tsx b/devui/layout/src/header.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e723aff3ab2739d1a531488adf9e9e5c15ab74d0 --- /dev/null +++ b/devui/layout/src/header.tsx @@ -0,0 +1,10 @@ +import './header.scss' + +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'DHeader', + setup (props, { slots }) { + return () =>
{ slots.default?.() }
+ } +}) \ No newline at end of file diff --git a/devui/layout/src/layout.scss b/devui/layout/src/layout.scss new file mode 100644 index 0000000000000000000000000000000000000000..a513015a70c270042dd23c04c685eb5178a42cde --- /dev/null +++ b/devui/layout/src/layout.scss @@ -0,0 +1,9 @@ +.devui-layout { + display: flex; + flex-direction: column; + flex: auto; + + &-aside { + flex-direction: row; + } +} diff --git a/devui/layout/src/layout.tsx b/devui/layout/src/layout.tsx new file mode 100644 index 0000000000000000000000000000000000000000..da9306451c60461b82b6fc4f1ba3a2c48dafcbda --- /dev/null +++ b/devui/layout/src/layout.tsx @@ -0,0 +1,16 @@ +import './layout.scss' + +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'DLayout', + emits: [], + setup(props, { slots }) { + return () => { + const slotDefault = slots.default?.() + const isAside = slotDefault.some(item => (item.type as any).name === 'DAside') + const classNames = `${isAside ? 'devui-layout-aside ': ''}devui-layout` + return
{ slotDefault }
+ } + } +}) diff --git a/docs/components/layout/index.md b/docs/components/layout/index.md new file mode 100644 index 0000000000000000000000000000000000000000..cccf1a837546cddc5e947fecd1c025fc55a19f0c --- /dev/null +++ b/docs/components/layout/index.md @@ -0,0 +1,382 @@ +# Layout 布局 + +页面的布局方式。 + +### 何时使用 + +当用户需要直接使用一些既有布局时。 + +### 基本用法 + +::: demo + +```vue + + + +``` + +::: + +:::demo + +```vue + + + +``` + +::: + +:::demo + +```vue + + + +``` + +::: + +:::demo + +```vue + + + +``` + +::: + +### 应用场景1 + +常用上中下布局。 + +:::demo + +```vue + + + + +``` + +::: + +### 应用场景2 + +常用上中下布局及侧边栏布局。 + +:::demo + +```vue + + + + + + +``` + +::: + +### API + +在页面中使用： + +```html + + + + + +``` + +### d-layout + +布局容器，可以与d-header, d-content, d-footer, d-aside组合实现布局； d-layout下可嵌套元素：d-header, d-content, d-aside, d-layout。 + +### d-header + +顶部布局，只能放在d-layout容器中，作为d-layout容器的顶部实现。 默认高度：40px。 + +### d-footer + +底部布局，只能放在d-layout容器中，作为d-layout容器的底部实现。 + +### d-content + +内容容器，只能放在d-layout容器中，作为d-layout容器d-header与d-footer之间的内容。 + +### d-aside + +侧边栏，只能放在d-layout容器中，作为d-layout容器的侧边栏部分。 \ No newline at end of file