test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(docs): [tour] use ButtonInstance and format code (#15304)

Browse Source
This commit is contained in:
btea 2023-12-28 22:53:10 +08:00 committed by GitHub
parent ef4fbe3be2
commit 4c6d7f9ca2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 79 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
docs/en-US/component/tour.md
View File

@ -57,7 +57,6 @@ tour/indicator
:::
## Tour API
:::tip
@ -66,64 +65,64 @@ tour-step component configuration with the same name has higher priority
### Tour Attributes
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| show-arrow | whether to show the arrow | `boolean` | true |
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
| content-style | custom style for content | `CSSProperties` | - |
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
| model-value / v-model | open tour | `boolean` | - |
| current / v-model:current | what is the current step | `number` | - |
| scroll-into-view-options | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | ^[Object]`{ block: 'center' }` |
| z-index | Tour's zIndex | `number` | `2001` |
| show-close | whether to show a close button | `boolean` | `true` |
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | `boolean` | `true` |
| target-area-clickable | whether the target element can be clickable, when using mask | `boolean` | `true` |
| Property | Description | Type | Default |
| ------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| show-arrow | whether to show the arrow | `boolean` | true |
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
| content-style | custom style for content | `CSSProperties` | - |
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
| model-value / v-model | open tour | `boolean` | - |
| current / v-model:current | what is the current step | `number` | - |
| scroll-into-view-options | support pass custom scrollIntoView options | `boolean` \| `ScrollIntoViewOptions` | ^[Object]`{ block: 'center' }` |
| z-index | Tour's zIndex | `number` | `2001` |
| show-close | whether to show a close button | `boolean` | `true` |
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
| close-on-press-escape | whether the Dialog can be closed by pressing ESC | `boolean` | `true` |
| target-area-clickable | whether the target element can be clickable, when using mask | `boolean` | `true` |
### Tour slots
| Name | Description |
| ------------------- | -------------------------- |
| default | tourStep component list |
| indicators | custom indicator, The scope parameter is `{ current, total }` |
| Name | Description |
| ---------- | ------------------------------------------------------------- |
| default | tourStep component list |
| indicators | custom indicator, The scope parameter is `{ current, total }` |
### Tour events
| Name | Description | Type |
| --- | --- | --- |
| close | callback function on shutdown | ^[Function]`(current: number) => void` |
| finish | callback function on finished | ^[Function]`() => void` |
| Name | Description | Type |
| ------ | ------------------------------ | -------------------------------------- |
| close | callback function on shutdown | ^[Function]`(current: number) => void` |
| finish | callback function on finished | ^[Function]`() => void` |
| change | callback when the step changes | ^[Function]`(current: number) => void` |
### TourStep Attributes
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| target | get the element the guide card points to. Empty makes it show in center of screen | `HTMLElement` | - |
| show-arrow | whether to show the arrow | `boolean` | `true` |
| title | title | `string` | - |
| description | description | `string` | - |
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
| content-style | custom style for content | `CSSProperties` | - |
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
| next-button-props | properties of the Next button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
| prev-button-props | properties of the previous button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean` \| `ScrollIntoViewOptions` | - |
| show-close | whether to show a close button | `boolean` | `true` |
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
| Property | Description | Type | Default |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| target | get the element the guide card points to. Empty makes it show in center of screen | `HTMLElement` | - |
| show-arrow | whether to show the arrow | `boolean` | `true` |
| title | title | `string` | - |
| description | description | `string` | - |
| placement | position of the guide card relative to the target element | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom` |
| content-style | custom style for content | `CSSProperties` | - |
| mask | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }` | `true` |
| type | type, affects the background color and text color | `default` \| `primary` | `default` |
| next-button-props | properties of the Next button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
| prev-button-props | properties of the previous button | ^[Object]`{ children: VueNode \| string; onClick: Function }` | - |
| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | `boolean` \| `ScrollIntoViewOptions` | - |
| show-close | whether to show a close button | `boolean` | `true` |
| close-icon | custom close icon, default is Close | `string` \| `Component` | - |
### TourStep slots
| Name | Description |
| ------------------- | ---------------------------- |
| default | description |
| title | title |
| Name | Description |
| ------- | ----------- |
| default | description |
| title | title |
### TourStep events
| Name | Description | Arguments |
| ----------- | ----------------------------- | ---------- |
| close | callback function on shutdown | ^[Function]`() => void` |
| Name | Description | Arguments |
| ----- | ----------------------------- | ----------------------- |
| close | callback function on shutdown | ^[Function]`() => void` |

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

@ -32,12 +32,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { type ElButton } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'
import type { ButtonInstance } from 'element-plus'
const ref1 = ref<InstanceType<typeof ElButton> | null>(null)
const ref2 = ref<InstanceType<typeof ElButton> | null>(null)
const ref3 = ref<InstanceType<typeof ElButton> | null>(null)
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const open = ref(false)
</script>

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

@ -33,12 +33,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { type ElButton } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'
import type { ButtonInstance } from 'element-plus'
const ref1 = ref<InstanceType<typeof ElButton> | null>(null)
const ref2 = ref<InstanceType<typeof ElButton> | null>(null)
const ref3 = ref<InstanceType<typeof ElButton> | null>(null)
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const open = ref(false)
</script>

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

@ -47,12 +47,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { type ElButton } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'
import type { ButtonInstance } from 'element-plus'
const ref1 = ref<InstanceType<typeof ElButton> | null>(null)
const ref2 = ref<InstanceType<typeof ElButton> | null>(null)
const ref3 = ref<InstanceType<typeof ElButton> | null>(null)
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const open = ref(false)
</script>

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

@ -30,12 +30,12 @@
<script setup lang="ts">
import { ref } from 'vue'
import { type ElButton } from 'element-plus'
import { MoreFilled } from '@element-plus/icons-vue'
import type { ButtonInstance } from 'element-plus'
const ref1 = ref<InstanceType<typeof ElButton> | null>(null)
const ref2 = ref<InstanceType<typeof ElButton> | null>(null)
const ref3 = ref<InstanceType<typeof ElButton> | null>(null)
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const open = ref(false)
</script>

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

@ -25,9 +25,9 @@
<script setup lang="ts">
import { ref } from 'vue'
import { type ElButton } from 'element-plus'
import type { ButtonInstance } from 'element-plus'
const btnRef = ref<InstanceType<typeof ElButton> | null>(null)
const btnRef = ref<ButtonInstance>()
const open = ref(false)
</script>

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

@ -11,7 +11,7 @@
transition: all getCssVar('transition-duration') ease;
}
@include e(content) {
@include e(content) {
padding: 0;
border-radius: getCssVar('tour-border-radius');
border: 1px solid getCssVar('tour-border-color');
@ -40,8 +40,13 @@
box-sizing: border-box;
@each $side,
$adjacency
in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
$adjacency
in (
'top': 'left',
'bottom': 'right',
'left': 'bottom',
'right': 'top'
)
{
#{$content-selector}[data-side^='#{$side}'] & {
border-#{$side}-color: transparent;
@ -56,7 +61,6 @@
}
}
@include e(closebtn) {
position: absolute;
top: 6px;
@ -103,7 +107,8 @@
padding: 0 getCssVar('tour-padding-primary');
color: getCssVar('tour-text-color');
font-size: getCssVar('tour-font-size');
img, video {
img,
video {
max-width: 100%;
}
}
@ -136,19 +141,19 @@
}
&.#{$namespace}-tour--primary {
@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-title-text-color', #fff);
@include set-css-var-value('tour-text-color', #fff);
@include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
.#{$namespace}-button--default {
color: getCssVar('color', 'primary');
border-color: getCssVar('color', 'primary');
background: #fff;
}
}
.#{$namespace}-button--primary {
border-color: #fff;
}
}
@include b(tour-indicator) {
background: rgba(255, 255, 255, 0.15);
@ -163,4 +168,4 @@
@include m(hidden) {
overflow: hidden;
}
}
}