forked from opentiny/tiny-vue
develop split for smb-design theme (#1830)
* fix(split): adjust smb theme for split * fix(split): update slot demo to smb theme * fix(split): fix
This commit is contained in:
parent
b2cfcfba75
commit
47a74045f5
|
@ -5,7 +5,10 @@
|
||||||
<div class="demo-split-pane">自定义左面板</div>
|
<div class="demo-split-pane">自定义左面板</div>
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<div class="trigger-line"></div>
|
<div class="trigger-line">
|
||||||
|
<div class="trigger-line__inner"></div>
|
||||||
|
<tiny-icon-pause class="trigger-line__icon" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #right>
|
<template #right>
|
||||||
<div class="demo-split-pane">自定义右面板</div>
|
<div class="demo-split-pane">自定义右面板</div>
|
||||||
|
@ -17,8 +20,10 @@
|
||||||
<script setup lang="jsx">
|
<script setup lang="jsx">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { Split as TinySplit } from '@opentiny/vue'
|
import { Split as TinySplit } from '@opentiny/vue'
|
||||||
|
import { IconPause } from '@opentiny/vue-icon'
|
||||||
|
|
||||||
const split2 = ref(0.4)
|
const split2 = ref(0.4)
|
||||||
|
const TinyIconPause = IconPause()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -37,8 +42,26 @@ const split2 = ref(0.4)
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger-line {
|
.trigger-line {
|
||||||
|
position: relative;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 200px;
|
height: 100%;
|
||||||
background-color: black;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.trigger-line__inner {
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
margin-left: 2px;
|
||||||
|
background: #c2c2c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trigger-line__icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -7px;
|
||||||
|
font-size: 18px;
|
||||||
|
fill: #c2c2c2;
|
||||||
|
}
|
||||||
|
.trigger-line__icon:hover {
|
||||||
|
fill: #777;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -4,5 +4,5 @@ test('拖拽插槽', async ({ page }) => {
|
||||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
await page.goto('split#trigger-slot')
|
await page.goto('split#trigger-slot')
|
||||||
const centerDiv = page.locator('.trigger-line')
|
const centerDiv = page.locator('.trigger-line')
|
||||||
await expect(centerDiv).toHaveCSS('background-color', 'rgb(0, 0, 0)')
|
await expect(centerDiv).toBeVisible()
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,7 +5,10 @@
|
||||||
<div class="demo-split-pane">自定义左面板</div>
|
<div class="demo-split-pane">自定义左面板</div>
|
||||||
</template>
|
</template>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<div class="trigger-line"></div>
|
<div class="trigger-line">
|
||||||
|
<div class="trigger-line__inner"></div>
|
||||||
|
<tiny-icon-pause class="trigger-line__icon" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #right>
|
<template #right>
|
||||||
<div class="demo-split-pane">自定义右面板</div>
|
<div class="demo-split-pane">自定义右面板</div>
|
||||||
|
@ -16,10 +19,12 @@
|
||||||
|
|
||||||
<script lang="jsx">
|
<script lang="jsx">
|
||||||
import { Split } from '@opentiny/vue'
|
import { Split } from '@opentiny/vue'
|
||||||
|
import { IconPause } from '@opentiny/vue-icon'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
TinySplit: Split
|
TinySplit: Split,
|
||||||
|
TinyIconPause: IconPause()
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -45,8 +50,26 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger-line {
|
.trigger-line {
|
||||||
|
position: relative;
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 200px;
|
height: 100%;
|
||||||
background-color: black;
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.trigger-line__inner {
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
margin-left: 2px;
|
||||||
|
background: #c2c2c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trigger-line__icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -7px;
|
||||||
|
font-size: 18px;
|
||||||
|
fill: #c2c2c2;
|
||||||
|
}
|
||||||
|
.trigger-line__icon:hover {
|
||||||
|
fill: #777;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -139,7 +139,7 @@
|
||||||
.@{split-prefix-cls}-trigger-left-button {
|
.@{split-prefix-cls}-trigger-left-button {
|
||||||
transform: translate(0, -50%);
|
transform: translate(0, -50%);
|
||||||
left: -6px;
|
left: -6px;
|
||||||
border-radius: 4px 0 0 4px;
|
border-radius: var(--ti-split-trigger-button-border-radius) 0 0 var(--ti-split-trigger-button-border-radius);
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
|
|
||||||
.@{split-prefix-cls}-trigger-right-button {
|
.@{split-prefix-cls}-trigger-right-button {
|
||||||
transform: translate(0, -50%);
|
transform: translate(0, -50%);
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 var(--ti-split-trigger-button-border-radius) var(--ti-split-trigger-button-border-radius) 0;
|
||||||
left: 9px;
|
left: 9px;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
}
|
}
|
||||||
|
@ -204,7 +204,7 @@
|
||||||
|
|
||||||
.@{split-prefix-cls}-trigger-top-button {
|
.@{split-prefix-cls}-trigger-top-button {
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: var(--ti-split-trigger-button-border-radius) var(--ti-split-trigger-button-border-radius) 0 0;
|
||||||
top: -6px;
|
top: -6px;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
||||||
|
@ -219,7 +219,7 @@
|
||||||
|
|
||||||
.@{split-prefix-cls}-trigger-bottom-button {
|
.@{split-prefix-cls}-trigger-bottom-button {
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
border-radius: 0 0 4px 4px;
|
border-radius: 0 0 var(--ti-split-trigger-button-border-radius) var(--ti-split-trigger-button-border-radius);
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
top: 9px;
|
top: 9px;
|
||||||
|
|
||||||
|
@ -267,8 +267,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid rgba(25, 25, 25, 0.1);
|
border: var(--ti-split-trigger-button-border-width) solid var(--ti-split-trigger-button-border-color);
|
||||||
background: #fff;
|
background: var(--ti-split-trigger-button-bg-color);
|
||||||
transition: all 0.1s;
|
transition: all 0.1s;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
export const tinySplitSmbTheme = {
|
||||||
|
'ti-split-trigger-button-border-width': '0', // 不显示边框线
|
||||||
|
'ti-split-trigger-button-bg-color': 'var(--ti-base-color-transparent)' // 不显示背景
|
||||||
|
}
|
|
@ -33,4 +33,13 @@
|
||||||
--ti-split-trigger-bar-margin-top: var(--ti-common-space-base, 4px);
|
--ti-split-trigger-bar-margin-top: var(--ti-common-space-base, 4px);
|
||||||
// 垂直分割线鼠标
|
// 垂直分割线鼠标
|
||||||
--ti-split-trigger-con-row-cursor: n-resize;
|
--ti-split-trigger-con-row-cursor: n-resize;
|
||||||
|
|
||||||
|
// 简易模式的按钮的边框色
|
||||||
|
--ti-split-trigger-button-border-color: #1919191a;
|
||||||
|
// 简易模式的按钮的边框宽度
|
||||||
|
--ti-split-trigger-button-border-width: var(--ti-common-border-weight-normal, 1px);
|
||||||
|
// 简易模式的按钮的边框圆角
|
||||||
|
--ti-split-trigger-button-border-radius: var(--ti-common-border-radius-1, 4px);
|
||||||
|
// 简易模式的按钮的背景色
|
||||||
|
--ti-split-trigger-button-bg-color: var(--ti-common-color-icon-white, #fff);
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,7 +84,9 @@ export default class TinyThemeTool {
|
||||||
* 示例2:输入:month-table,输出:.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
|
* 示例2:输入:month-table,输出:.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
|
||||||
*/
|
*/
|
||||||
getSelectorByKey(key) {
|
getSelectorByKey(key) {
|
||||||
if (!definedComponents[key]) return
|
if (!definedComponents[key]) {
|
||||||
|
return '.tiny-' + key + '[class*=tiny]'
|
||||||
|
}
|
||||||
|
|
||||||
let selector = ''
|
let selector = ''
|
||||||
const keyItems = definedComponents[key].split(',')
|
const keyItems = definedComponents[key].split(',')
|
||||||
|
@ -105,9 +107,7 @@ export default class TinyThemeTool {
|
||||||
const twoKey = `${compNameList[1]}-${compNameList[2]}`
|
const twoKey = `${compNameList[1]}-${compNameList[2]}`
|
||||||
|
|
||||||
// 优先三段式命名的组件名,优先级从高到低为三段-二段-一段
|
// 优先三段式命名的组件名,优先级从高到低为三段-二段-一段
|
||||||
return (
|
return this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || this.getSelectorByKey(compNameList[1])
|
||||||
this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || '.tiny-' + compNameList[1] + '[class*=tiny]'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
formatCSSVariables(themeData) {
|
formatCSSVariables(themeData) {
|
||||||
|
|
|
@ -80,7 +80,7 @@ export default {
|
||||||
'user-head': 'user-head',
|
'user-head': 'user-head',
|
||||||
'user-link': 'user-link',
|
'user-link': 'user-link',
|
||||||
'year-table': 'year-table',
|
'year-table': 'year-table',
|
||||||
'skeleton': 'skeleton',
|
|
||||||
'skeleton-item': 'skeleton-item',
|
'skeleton-item': 'skeleton-item',
|
||||||
'radio-button': 'radio-button'
|
'radio-button': 'radio-button',
|
||||||
|
'split': 'split-wrapper'
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue