feat(link-menu): [link-menu]modify smb theme (#2210)
* feat(link-menu): modify smb theme * feat(link-menu): modify smb theme * fix: modify review code
This commit is contained in:
James
GitHub
parent
bcb9323496
commit
69b62088b9
|
|
@ -61,6 +61,62 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'custom-icon'
|
||||
},
|
||||
{
|
||||
name: 'expand-icon',
|
||||
type: 'Component',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示展开的图标',
|
||||
'en-US': 'Indicates the expanded icon'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'expand-icon-color',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示展开的图标色',
|
||||
'en-US': 'Indicates the expanded icon color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'shrink-icon',
|
||||
type: 'Component',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示收缩的图标',
|
||||
'en-US': 'Icon indicating shrink'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'shrink-icon-color',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '指示收缩的图标色',
|
||||
'en-US': 'Icon indicating shrink color'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-resource'
|
||||
},
|
||||
{
|
||||
name: 'keep-selected-nodes',
|
||||
type: 'boolean',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,23 @@
|
|||
<template>
|
||||
<tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
|
||||
<tiny-link-menu
|
||||
:data="datas"
|
||||
title="收藏夹菜单"
|
||||
wrap
|
||||
:expand-icon="expandIcon"
|
||||
expandIconColor="#191919"
|
||||
shrinkIconColor="#191919"
|
||||
:shrink-icon="shrinkIcon"
|
||||
:keep-selected-nodes="false"
|
||||
></tiny-link-menu>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue'
|
||||
import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
|
||||
import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
|
||||
|
||||
const shrinkIcon = iconExpand()
|
||||
const expandIcon = iconPutAway()
|
||||
|
||||
const datas = ref([
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
|
||||
<tiny-link-menu
|
||||
:data="datas"
|
||||
title="收藏夹菜单"
|
||||
wrap
|
||||
expandIconColor="#191919"
|
||||
shrinkIconColor="#191919"
|
||||
:expand-icon="expandIcon"
|
||||
:shrink-icon="shrinkIcon"
|
||||
:keep-selected-nodes="false"
|
||||
></tiny-link-menu>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { LinkMenu } from '@opentiny/vue'
|
||||
import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -11,6 +21,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
shrinkIcon: iconExpand(),
|
||||
expandIcon: iconPutAway(),
|
||||
datas: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
.component-css-vars-link-menu();
|
||||
|
||||
&__nav &__nav-item {
|
||||
color: var(--ti-link-menu-nav-item-text-color);
|
||||
font-size: var(--ti-common-font-size-1);
|
||||
border-right: 1px solid var(--ti-link-menu-nav-item-border-color);
|
||||
color: var(--tv-Link-menu-nav-item-text-color);
|
||||
font-size: var(--tv-Link-menu-item-font-size);
|
||||
border-right: 1px solid var(--tv-Link-menu-nav-item-border-color);
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-link-menu-nav-item-text-color);
|
||||
fill: var(--tv-Link-menu-nav-item-text-color);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -67,8 +67,8 @@
|
|||
}
|
||||
|
||||
&__nav {
|
||||
color: var(--ti-link-menu-btn-text-color);
|
||||
background: var(--ti-link-menu-btn-bg-color);
|
||||
color: var(--tv-Link-menu-btn-text-color);
|
||||
background: var(--tv-Link-menu-btn-bg-color);
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
outline: 0;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-link-menu-nav-item-text-color);
|
||||
fill: var(--tv-Link-menu-nav-item-text-color);
|
||||
font-size: var(--ti-common-font-size-3);
|
||||
}
|
||||
}
|
||||
|
|
@ -84,31 +84,27 @@
|
|||
&__btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--ti-link-menu-btn-border-radius);
|
||||
border: 1px solid var(--ti-link-menu-btn-border-color);
|
||||
background: var(--ti-link-menu-btn-bg-color);
|
||||
border-radius: var(--tv-Link-menu-btn-border-radius);
|
||||
border: 1px solid var(--tv-Link-menu-btn-border-color);
|
||||
background: var(--tv-Link-menu-btn-bg-color);
|
||||
.@{svg-prefix-cls} {
|
||||
fill: var(--ti-link-menu-nav-item-text-color);
|
||||
font-size: var(--ti-link-menu-btn-size);
|
||||
fill: var(--tv-Link-menu-nav-item-text-color);
|
||||
font-size: var(--tv-Link-menu-btn-size);
|
||||
}
|
||||
}
|
||||
|
||||
&__dialog-btn {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
width: 270px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.@{input-prefix-cls}__inner {
|
||||
height: var(--ti-link-menu-input-height);
|
||||
line-height: var(--ti-link-menu-input-height);
|
||||
font-size: var(--ti-link-menu-input-font-size);
|
||||
color: var(--ti-link-menu-input-text-color);
|
||||
background: var(--ti-link-menu-btn-bg-color);
|
||||
border: 1px solid var(--ti-link-menu-input-border-color);
|
||||
border-radius: var(--ti-link-menu-input-border-radius);
|
||||
height: var(--tv-Link-menu-input-height);
|
||||
line-height: var(--tv-Link-menu-input-height);
|
||||
font-size: var(--tv-Link-menu-input-font-size);
|
||||
color: var(--tv-Link-menu-input-text-color);
|
||||
background: var(--tv-Link-menu-btn-bg-color);
|
||||
border: 1px solid var(--tv-Link-menu-input-border-color);
|
||||
border-radius: var(--tv-Link-menu-input-border-radius);
|
||||
padding: 0 8px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
|
|
@ -119,14 +115,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{button-prefix-cls} {
|
||||
&:last-child {
|
||||
color: var(--ti-link-menu-nav-item-text-color);
|
||||
background-color: var(--ti-link-menu-btn-bg-color);
|
||||
border-color: var(--ti-link-menu-input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{tree-prefix-cls} {
|
||||
.@{tree-node-prefix-cls} {
|
||||
.@{checkbox-prefix-cls} {
|
||||
|
|
@ -143,16 +131,16 @@
|
|||
}
|
||||
|
||||
.tree-node-name {
|
||||
color: var(--ti-link-menu-tree-node-text-color);
|
||||
font-size: var(--ti-link-menu-input-font-size);
|
||||
border-radius: var(--ti-link-menu-input-border-radius);
|
||||
color: var(--tv-Link-menu-tree-node-text-color);
|
||||
font-size: var(--tv-Link-menu-input-font-size);
|
||||
border-radius: var(--tv-Link-menu-input-border-radius);
|
||||
padding-left: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.is-focusable {
|
||||
.tree-node-name {
|
||||
color: var(--ti-link-menu-input-text-color);
|
||||
color: var(--tv-Link-menu-input-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -178,6 +166,13 @@
|
|||
width: calc(100% - 36px);
|
||||
}
|
||||
|
||||
.tree-node-icon {
|
||||
svg.tiny-svg {
|
||||
width: var(--tv-Link-menu-icon-size);
|
||||
height: var(--tv-Link-menu-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node-name {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -12,29 +12,33 @@
|
|||
|
||||
.component-css-vars-link-menu() {
|
||||
// 收藏夹设置按钮图标色(和取消按钮文本色)
|
||||
--ti-link-menu-nav-item-text-color: var(--ti-common-color-text-gray, #191919);
|
||||
--tv-Link-menu-nav-item-text-color: var(--tv-color-text);
|
||||
// 收藏夹设置字体大小
|
||||
--tv-Link-menu-item-font-size: var(--tv-font-size-md);
|
||||
// 收藏夹菜单导航右边框色
|
||||
--ti-link-menu-nav-item-border-color: #c4c4c4;
|
||||
--tv-Link-menu-nav-item-border-color: var(--tv-color-border);
|
||||
// 收藏夹菜单按钮文本色
|
||||
--ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8);
|
||||
--tv-Link-menu-btn-text-color: var(--tv-color-info-text);
|
||||
// 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
|
||||
--ti-link-menu-btn-bg-color: var(--ti-common-color-light, #ffffff);
|
||||
--tv-Link-menu-btn-bg-color: var(--tv-color-info-bg-white);
|
||||
// 收藏夹弹出框的输入框高度
|
||||
--ti-link-menu-input-height: var(--ti-common-size-height-normal, 32px);
|
||||
--tv-Link-menu-input-height: var(--tv-size-height-md);
|
||||
// 收藏夹弹出框字号
|
||||
--ti-link-menu-input-font-size: var(--ti-common-font-size-base, 14px);
|
||||
--tv-Link-menu-input-font-size: var(--tv-font-size-md);
|
||||
// 收藏夹弹出框输入框(和列表项非节点)的文本色
|
||||
--ti-link-menu-input-text-color: var(--ti-common-color-info-normal, #191919);
|
||||
--tv-Link-menu-input-text-color: var(--tv-color-text);
|
||||
// 收藏夹弹出框的输入框和取消按钮边框色
|
||||
--ti-link-menu-input-border-color: var(--ti-common-color-border, #999999);
|
||||
--tv-Link-menu-input-border-color: var(--tv-color-border);
|
||||
// 收藏夹弹出框的输入框圆角
|
||||
--ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal, 6px);
|
||||
--tv-Link-menu-input-border-radius: var(--tv-border-radius-md);
|
||||
// 收藏夹弹出框列表项的节点文本色
|
||||
--ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
|
||||
--tv-Link-menu-tree-node-text-color: var(--tv-color-border);
|
||||
// 按钮边框颜色
|
||||
--ti-link-menu-btn-border-color: var(--ti-common-color-line-normal, #c2c2c2);
|
||||
--tv-Link-menu-btn-border-color: var(--tv-color-border);
|
||||
// 按钮圆角
|
||||
--ti-link-menu-btn-border-radius: var(--ti-common-border-radius-3, 6px);
|
||||
--tv-Link-menu-btn-border-radius: var(--tv-border-radius-md);
|
||||
// 按钮大小
|
||||
--ti-link-menu-btn-size: var(--ti-common-font-size-2, 16px);
|
||||
--tv-Link-menu-btn-size: var(--tv-font-size-lg);
|
||||
// 图标大小
|
||||
--tv-Link-menu-icon-size: var(--tv-icon-size);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,16 @@ export default defineComponent({
|
|||
keepSelectedNodes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
expandIcon: Object,
|
||||
shrinkIcon: Object,
|
||||
shrinkIconColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
expandIconColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@
|
|||
<tiny-tree
|
||||
:data="state.datas"
|
||||
:icon="icon"
|
||||
:expand-icon="expandIcon"
|
||||
:expand-icon-color="expandIconColor"
|
||||
:shrink-icon="shrinkIcon"
|
||||
:shrink-icon-color="shrinkIconColor"
|
||||
:class="{
|
||||
'tiny-link-menu__wrap': wrap,
|
||||
'tiny-link-menu__overflow': !wrap ? ellipsis : false
|
||||
|
|
@ -70,12 +74,12 @@
|
|||
<template #footer>
|
||||
<div class="tiny-link-menu__dialog-btn">
|
||||
<slot name="foot">
|
||||
<tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
|
||||
t('ui.linkMenu.sure')
|
||||
}}</tiny-button>
|
||||
<tiny-button :disabled="state.disabled" :reset-time="0" @click="hideDialog">{{
|
||||
t('ui.linkMenu.cancel')
|
||||
}}</tiny-button>
|
||||
<tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
|
||||
t('ui.linkMenu.sure')
|
||||
}}</tiny-button>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -102,6 +106,10 @@ export default defineComponent({
|
|||
'title',
|
||||
'defaultExpandAll',
|
||||
'searchIcon',
|
||||
'expandIcon',
|
||||
'expandIconColor',
|
||||
'shrinkIcon',
|
||||
'shrinkIconColor',
|
||||
'ellipsis',
|
||||
'wrap',
|
||||
'getMenuDataSync',
|
||||
|
|
|
|||
Loading…
Reference in New Issue