mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-04-06 16:30:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(components): [tour] Improve style and docs (#15706)

Browse Source 
* style(components): [tour] Improve style and docs

* style(theme-chalk): update
This commit is contained in:
kooriookami 2024-01-31 10:35:36 +08:00 committed by GitHub
parent 7e6f324f35
commit 2863f2fde3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/examples/tour/basic.vue
View File

@ -4,14 +4,15 @@
<el-divider />
<el-space>
<el-button ref="ref1">upload</el-button>
<el-button ref="ref2" type="primary">save</el-button>
<el-button ref="ref1">Upload</el-button>
<el-button ref="ref2" type="primary">Save</el-button>
<el-button ref="ref3" :icon="MoreFilled" />
</el-space>
<el-tour v-model="open">
<el-tour-step :target="ref1?.$el" title="Upload File">
<img
style="width: 240px"
src="https://element-plus.org/images/element-plus-logo.svg"
alt="tour.png"
/>

4
docs/examples/tour/indicator.vue
View File

@ -4,8 +4,8 @@
<el-divider />
<el-space>
<el-button ref="ref1">upload</el-button>
<el-button ref="ref2" type="primary">save</el-button>
<el-button ref="ref1">Upload</el-button>
<el-button ref="ref2" type="primary">Save</el-button>
<el-button ref="ref3" :icon="MoreFilled" />
</el-space>

4
docs/examples/tour/mask.vue
View File

@ -4,8 +4,8 @@
<el-divider />
<el-space>
<el-button ref="ref1">upload</el-button>
<el-button ref="ref2" type="primary">save</el-button>
<el-button ref="ref1">Upload</el-button>
<el-button ref="ref2" type="primary">Save</el-button>
<el-button ref="ref3" :icon="MoreFilled" />
</el-space>

4
docs/examples/tour/non-modal.vue
View File

@ -4,8 +4,8 @@
<el-divider />
<el-space>
<el-button ref="ref1">upload</el-button>
<el-button ref="ref2" type="primary">save</el-button>
<el-button ref="ref1">Upload</el-button>
<el-button ref="ref2" type="primary">Save</el-button>
<el-button ref="ref3" :icon="MoreFilled" />
</el-space>

4
docs/examples/tour/target.vue
View File

@ -4,8 +4,8 @@
<el-divider />
<el-space>
<el-button id="btn1">upload</el-button>
<el-button id="btn2" type="primary">save</el-button>
<el-button id="btn1">Upload</el-button>
<el-button id="btn2" type="primary">Save</el-button>
<el-button ref="btnRef" :icon="MoreFilled" />
</el-space>

2
packages/components/tour/src/step.vue
View File

@ -10,7 +10,7 @@
<component :is="mergedCloseIcon" />
</el-icon>
</button>
<header :class="ns.e('header')">
<header :class="[ns.e('header'), { 'show-close': showClose }]">
<slot name="header">
<span role="heading" :class="ns.e('title')">
{{ title }}

4
packages/theme-chalk/src/common/var.scss
View File

@ -800,16 +800,16 @@ $tour: () !default;
$tour: map.merge(
(
'width': 520px,
'padding-primary': 16px,
'padding-primary': 12px,
'font-line-height': getCssVar('font-line-height-primary'),
'title-font-size': 16px,
'title-text-color': getCssVar('text-color-primary'),
'title-font-weight': 400,
'close-color': getCssVar('color-info'),
'font-size': 14px,
'color': getCssVar('text-color-primary'),
'bg-color': getCssVar('bg-color'),
'border-radius': 4px,
'border-color': getCssVar('border-color-lighter'),
),
$tour
);

29
packages/theme-chalk/src/tour.scss
View File

@ -12,13 +12,13 @@
}
@include e(content) {
padding: 0;
border-radius: getCssVar('tour-border-radius');
border: 1px solid getCssVar('tour-border-color');
width: var(#{getCssVarName('tour-width')});
padding: getCssVar('tour-padding-primary');
background: getCssVar('tour-bg-color');
box-shadow: getCssVar('box-shadow-light');
box-sizing: border-box;
overflow-wrap: break-word;
$content-selector: &;
@ -32,7 +32,6 @@
@include e(arrow) {
position: absolute;
background: getCssVar('tour-bg-color');
border: 1px solid getCssVar('tour-border-color');
width: 10px;
height: 10px;
pointer-events: none;
@ -63,11 +62,11 @@
@include e(closebtn) {
position: absolute;
top: 6px;
top: 0;
right: 0;
padding: 0;
width: 44px;
height: 44px;
width: 40px;
height: 40px;
background: transparent;
border: none;
outline: none;
@ -78,7 +77,7 @@
);
.#{$namespace}-tour__close {
color: getCssVar('tour-title-text-color');
color: getCssVar('tour-close-color');
font-size: inherit;
}
@ -91,9 +90,14 @@
}
@include e(header) {
padding: getCssVar('tour', 'padding-primary');
padding-bottom: 10px;
margin-right: 16px;
padding-bottom: getCssVar('tour-padding-primary');
&.show-close {
padding-right: calc(getCssVar('tour-padding-primary') + var(
#{getCssVarName('message-close-size')},
map.get($message, 'close-size')
));
}
}
@include e(title) {
@ -104,7 +108,6 @@
}
@include e(body) {
padding: 0 getCssVar('tour-padding-primary');
color: getCssVar('tour-text-color');
font-size: getCssVar('tour-font-size');
img,
@ -114,8 +117,7 @@
}
@include e(footer) {
padding: getCssVar('tour-padding-primary');
padding-top: 10px;
padding-top: getCssVar('tour-padding-primary');
box-sizing: border-box;
display: flex;
justify-content: space-between;
@ -144,6 +146,7 @@
@include set-css-var-value('tour-title-text-color', #fff);
@include set-css-var-value('tour-text-color', #fff);
@include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
@include set-css-var-value('tour-close-color', #fff);
.#{$namespace}-tour__closebtn {
&:focus,