get rid of the block inside component
This commit is contained in:
parent
cc0b2da4c5
commit
94892c94bc
2 changed files with 29 additions and 33 deletions
|
|
@ -7,6 +7,7 @@
|
|||
import CustomChildrenBlock from './demo/CustomChildrenSnippet.svelte';
|
||||
import ScrollableGraphic from './demo/ScrollableGraphic.svelte';
|
||||
import WithScrollerBaseComponent from './demo/withScrollerBase.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Components/Graphics/HorizontalScroller',
|
||||
|
|
@ -56,7 +57,9 @@
|
|||
}}
|
||||
>
|
||||
{#snippet children(args)}
|
||||
<Block width="fluid">
|
||||
<DemoComponent {...args}></DemoComponent>
|
||||
</Block>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
<script lang="ts">
|
||||
import Block from '../Block/Block.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
import { type Snippet } from 'svelte';
|
||||
import { Tween } from 'svelte/motion';
|
||||
import type { Action } from 'svelte/action';
|
||||
|
|
@ -12,8 +10,6 @@
|
|||
id?: string;
|
||||
/** Optional additional classes for the scroller container */
|
||||
class?: string;
|
||||
/** Width of the scroller container*/
|
||||
width?: ContainerWidth;
|
||||
/** Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase. */
|
||||
height?: string;
|
||||
/** Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop. */
|
||||
|
|
@ -55,7 +51,6 @@
|
|||
let {
|
||||
id = '',
|
||||
class: cls = '',
|
||||
width = 'fluid',
|
||||
height = '200lvh',
|
||||
direction = 'right',
|
||||
scrollProgress = $bindable(0),
|
||||
|
|
@ -222,15 +217,14 @@
|
|||
|
||||
<svelte:window bind:innerHeight={screenHeight} />
|
||||
|
||||
<Block {width}>
|
||||
<div
|
||||
<div
|
||||
{id}
|
||||
class={`horizontal-scroller-container ${cls}`}
|
||||
style="height: {height};"
|
||||
bind:this={container}
|
||||
bind:clientHeight={containerHeight}
|
||||
bind:clientWidth={containerWidth}
|
||||
>
|
||||
>
|
||||
<div
|
||||
class="horizontal-scroller-content"
|
||||
bind:this={content}
|
||||
|
|
@ -250,8 +244,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.horizontal-scroller-container {
|
||||
|
|
|
|||
Loading…
Reference in a new issue