Skip to content

✨ narbarMulti add divider #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
violarong wants to merge 1 commit into
base: test
Choose a base branch
from
Open

✨ narbarMulti add divider #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/components/u-navbar-multi.vue/api.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,23 @@
type: boolean
default: false
description: 是否禁用
slots:
- name: default
description: 链接区域
title: 链接区域
support:
- name: u-navbar-item-multi
title: 添加导航项
snippet: <u-navbar-item-multi>导航项</u-navbar-item-multi>
- name: u-navbar-divider-multi
title: 添加分隔线
snippet: <u-navbar-divider-multi></u-navbar-divider-multi>
- name: left
title: 左部区域
description: 左部区域，一般放置 logo 等
- name: right
title: 右部区域
description: 右部区域，一般放置用户个人信息等
- name: u-navbar-item-multi
title: 导航栏项
attrs:
Expand Down
42 changes: 18 additions & 24 deletions src/components/u-navbar-multi.vue/docs/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,26 @@
``` html
<u-navbar-multi>
<template #left>
<u-multi-layout-item align-items="center" style="width: 200px;">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
<u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
</u-multi-layout-item>
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
<u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
</template>
<u-multi-layout-item align-items="center">
<u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
<u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
</u-multi-layout-item>
<u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
<u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
<template #right>
<u-multi-layout-item align-items="center" justify="end">
<u-dropdown style="margin-right: 10px; color: inherit">
<template #title>
<u-linear-layout gap="small" v-if="$global.userInfo">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
<span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
<u-text :text="$global.userInfo.UserName"></u-text>
</span>
</u-linear-layout>
</template>
<template #default>
<u-dropdown-item text="安全退出"></u-dropdown-item>
</template>
</u-dropdown>
</u-multi-layout-item>
<u-dropdown style="margin-right: 10px; color: inherit">
<template #title>
<u-linear-layout gap="small" v-if="$global.userInfo">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
<span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
<u-text :text="$global.userInfo.UserName"></u-text>
</span>
</u-linear-layout>
</template>
<template #default>
<u-dropdown-item text="安全退出"></u-dropdown-item>
</template>
</u-dropdown>
</template>
</u-navbar-multi>
```
42 changes: 18 additions & 24 deletions src/components/u-navbar-multi.vue/docs/examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,26 @@
``` html
<u-navbar-multi>
<template #left>
<u-multi-layout-item align-items="center" style="width: 200px;">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
<u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
</u-multi-layout-item>
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
<u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
</template>
<u-multi-layout-item align-items="center">
<u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
<u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
</u-multi-layout-item>
<u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
<u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
<template #right>
<u-multi-layout-item align-items="center" justify="end">
<u-dropdown style="margin-right: 10px; color: inherit">
<template #title>
<u-linear-layout gap="small" v-if="$global.userInfo">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
<span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
<u-text :text="$global.userInfo.UserName"></u-text>
</span>
</u-linear-layout>
</template>
<template #default>
<u-dropdown-item text="安全退出"></u-dropdown-item>
</template>
</u-dropdown>
</u-multi-layout-item>
<u-dropdown style="margin-right: 10px; color: inherit">
<template #title>
<u-linear-layout gap="small" v-if="$global.userInfo">
<u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
<span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
<u-text :text="$global.userInfo.UserName"></u-text>
</span>
</u-linear-layout>
</template>
<template #default>
<u-dropdown-item text="安全退出"></u-dropdown-item>
</template>
</u-dropdown>
</template>
</u-navbar-multi>
```
29 changes: 22 additions & 7 deletions src/components/u-navbar-multi.vue/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,33 @@
:readonly="readonly"
:disabled="disabled"
>
<u-multi-layout
:vusion-scope-id="$vnode.context.$options._scopeId"
vusion-node-tag="u-multi-layout"
>
<slot name="left"></slot>
<slot></slot>
<slot name="right"></slot>
<u-multi-layout>
<u-multi-layout-item align-items="center" :class="$style.layoutleft" vusion-slot-name="left" v-if="$slots.left || $env.VUE_APP_DESIGNER">
<slot name="left">
<s-empty v-if="(!$slots.left) && $env.VUE_APP_DESIGNER"></s-empty>
</slot>
</u-multi-layout-item>
<u-multi-layout-item align-items="center">
<slot></slot>
</u-multi-layout-item>
<u-multi-layout-item align-items="center" justify="end" :class="$style.layoutright" v-if="$slots.right || $env.VUE_APP_DESIGNER" vusion-slot-name="right">
<slot name="right">
<s-empty v-if="(!$slots.left) && $env.VUE_APP_DESIGNER"></s-empty>
</slot>
</u-multi-layout-item>
</u-multi-layout>
</div>
</template>

<script>
import { MSinglex } from '../m-singlex.vue';
import SEmpty from '../../components/s-empty.vue';

export default {
name: 'u-navbar-multi',
childName: 'u-navbar-item-multi',
extends: MSinglex,
components: { SEmpty },
props: {
router: { type: Boolean, default: true },
animation: { type: String, default: '1' },
Expand Down Expand Up @@ -237,4 +246,10 @@ export default {
.root [class^="u-dropdown__"][type=text]:not([disabled]):hover {
color: inherit;
}
.layoutleft {
max-width: var(--navbar-left-width);
}
.layoutright {
max-width: var(--navbar-right-width);
}
</style>
2 changes: 2 additions & 0 deletions src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,8 @@
--navbar-select-item-background-selected: white;
--navbar-select-divider-background: var(--list-view-divider-background);
--navbar-select-box-shadow: 0 0 6px rgba(47, 53, 58, 0.3);
--navbar-left-width: 200px;
--navbar-right-width: auto;

/* @component u-sidebar @hidden */
--sidebar-width: 240px;
Expand Down