React Slides
* Adds useState * State * useEffect * Side Effects
This commit is contained in:
48
src/lib/components/slide.svelte
Normal file
48
src/lib/components/slide.svelte
Normal file
@@ -0,0 +1,48 @@
|
||||
<script lang="ts">
|
||||
type Bool = boolean | null
|
||||
type String = string | null
|
||||
type Transition =
|
||||
| 'none'
|
||||
| 'fade'
|
||||
| 'slide'
|
||||
| 'convex'
|
||||
| 'concave'
|
||||
| 'zoom'
|
||||
| null
|
||||
|
||||
export let animate: Bool = null
|
||||
export let animateEasing: String = null
|
||||
export let animateUnmatched: Bool = null
|
||||
export let animateId: String = null
|
||||
export let animateRestart: Bool = null
|
||||
export let background: String = null
|
||||
export let gradient: String = null
|
||||
export let image: String = null
|
||||
export let video: String = null
|
||||
export let iframe: String = null
|
||||
export let interactive: Bool = null
|
||||
export let transition: Transition = null
|
||||
|
||||
delete $$restProps.class
|
||||
</script>
|
||||
|
||||
<section
|
||||
on:in
|
||||
on:out
|
||||
data-auto-animate={animate}
|
||||
data-auto-animate-easing={animateEasing}
|
||||
data-auto-animate-unmatched={animateUnmatched}
|
||||
data-auto-animate-id={animateId}
|
||||
data-auto-animate-restart={animateRestart}
|
||||
data-background-color={background}
|
||||
data-background-gradient={gradient}
|
||||
data-background-image={image}
|
||||
data-background-video={video}
|
||||
data-background-iframe={iframe}
|
||||
data-background-interactive={interactive}
|
||||
data-transition={transition}
|
||||
class={$$props.class || ''}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</section>
|
||||
Reference in New Issue
Block a user