Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-14 10:04:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): add default slot to <NuxtLoadingIndicator> (#7128)

Browse Source 
Co-authored-by: Alexander Lichter <github@lichter.io>
This commit is contained in:
Daniil Chudo 2022-10-10 14:12:36 +04:00 committed by GitHub
parent e94c3b3704
commit 75f4a54f7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/3.api/2.components/4.nuxt-loading-indicator.md
View File

@ -19,6 +19,10 @@ Add `<NuxtLoadingIndicator/>` in your `app.vue` or layouts.
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/routing/pages?terminal=dev&file=/app.vue" blank} :button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/framework/tree/main/examples/routing/pages?terminal=dev&file=/app.vue" blank}
## Slots
You can pass custom HTML or components through the loading indicator's default slot.
## Props ## Props
- **color**: The color of the loading bar. - **color**: The color of the loading bar.

4
packages/nuxt/src/app/components/nuxt-loading-indicator.ts
View File

@ -21,7 +21,7 @@ export default defineComponent({
default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)' default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
} }
}, },
setup (props) { setup (props, { slots }) {
const indicator = useLoadingIndicator({ const indicator = useLoadingIndicator({
duration: props.duration, duration: props.duration,
throttle: props.throttle throttle: props.throttle
@ -50,7 +50,7 @@ export default defineComponent({
transition: 'width 0.1s, height 0.4s, opacity 0.4s', transition: 'width 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999 zIndex: 999999
} }
}) }, slots)
} }
}) })