cleans up children snippet
This commit is contained in:
MinamiFunakoshiTR
parent
ae9522ce5c
commit
f6c3d91681
3 changed files with 34 additions and 69 deletions
|
|
@ -6,7 +6,7 @@ import * as BlockStories from './Block.stories.svelte';
|
|||
|
||||
# Block
|
||||
|
||||
The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece. The contents of each block are rendered as [snippets](https://svelte.dev/docs/svelte/snippet).
|
||||
The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece.
|
||||
|
||||
Blocks are stacked vertically within the well created by the [Article](./?path=/docs/components-page-layout-article--docs) component. They can have different widths on larger screens depending on the `width` prop.
|
||||
|
||||
|
|
@ -18,9 +18,7 @@ Blocks are stacked vertically within the well created by the [Article](./?path=/
|
|||
</script>
|
||||
|
||||
<Block>
|
||||
{#snippet content()}
|
||||
<!-- Contents for this block goes here -->
|
||||
{/snippet}
|
||||
<!-- Contents for this block goes here -->
|
||||
</Block>
|
||||
```
|
||||
|
||||
|
|
@ -52,9 +50,7 @@ You can use the `snap` prop to force the container to snap to each block width s
|
|||
|
||||
```svelte
|
||||
<Block width="wider" snap={true}>
|
||||
{#snippet content()}
|
||||
<!-- Contents for this block -->
|
||||
{/snippet}
|
||||
<!-- Contents for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
||||
|
|
@ -67,9 +63,7 @@ If you want to skip certain block widths entirely, you can add one or more class
|
|||
```svelte
|
||||
<!-- Will skip wide and go straight to normal column width on resize. -->
|
||||
<Block width="wider" snap={true} class="skip-wide">
|
||||
{#snippet content()}
|
||||
<!-- Contents for this block -->
|
||||
{/snippet}
|
||||
<!-- Contents for this block -->
|
||||
</Block>
|
||||
```
|
||||
|
||||
|
|
@ -83,9 +77,7 @@ Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you
|
|||
|
||||
```svelte
|
||||
<Block width="wider" snap={true} class="custom-blocks">
|
||||
{#snippet content()}
|
||||
<!-- Contents for this block -->
|
||||
{/snippet}
|
||||
<!-- Contents for this block -->
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@
|
|||
<div class="article-boundaries">
|
||||
<div class="label">Article</div>
|
||||
<Block>
|
||||
{#snippet content()}
|
||||
<div class="label">Block</div>
|
||||
{/snippet}
|
||||
<div class="label">Block</div>
|
||||
</Block>
|
||||
</div>
|
||||
</Article>
|
||||
|
|
@ -44,20 +42,18 @@
|
|||
|
||||
<Story name="Custom layout" exportName="CustomLayout">
|
||||
<Block width="fluid">
|
||||
{#snippet content()}
|
||||
<!-- Enter bootstrap grid! -->
|
||||
<div id="block-flex-example">
|
||||
<div class="row">
|
||||
<div class="col">Column</div>
|
||||
<div class="col-6">Column</div>
|
||||
<div class="col">Column</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">Column</div>
|
||||
<div class="col">Column</div>
|
||||
</div>
|
||||
<!-- Enter bootstrap grid! -->
|
||||
<div id="block-flex-example">
|
||||
<div class="row">
|
||||
<div class="col">Column</div>
|
||||
<div class="col-6">Column</div>
|
||||
<div class="col">Column</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
<div class="row">
|
||||
<div class="col">Column</div>
|
||||
<div class="col">Column</div>
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</Story>
|
||||
|
||||
|
|
@ -67,9 +63,7 @@
|
|||
<div class="label">Article</div>
|
||||
<h4>snap widths</h4>
|
||||
<Block snap={true}>
|
||||
{#snippet content()}
|
||||
<div class="label">Block</div>
|
||||
{/snippet}
|
||||
<div class="label">Block</div>
|
||||
</Block>
|
||||
</div>
|
||||
</Article>
|
||||
|
|
@ -82,69 +76,49 @@
|
|||
<h4>Regular layout</h4>
|
||||
|
||||
<Block width="narrower" snap={true} class="block-snap-widths-demo">
|
||||
{#snippet content()}
|
||||
narrower
|
||||
{/snippet}
|
||||
narrower
|
||||
</Block>
|
||||
<Block width="narrow" snap={true} class="block-snap-widths-demo">
|
||||
{#snippet content()}
|
||||
narrow
|
||||
{/snippet}</Block
|
||||
>
|
||||
narrow
|
||||
</Block>
|
||||
<Block width="normal" snap={true} class="block-snap-widths-demo">
|
||||
{#snippet content()}
|
||||
normal
|
||||
{/snippet}
|
||||
normal
|
||||
</Block>
|
||||
<Block width="wide" snap={true} class="block-snap-widths-demo">
|
||||
{#snippet content()}
|
||||
wide
|
||||
{/snippet}
|
||||
wide
|
||||
</Block>
|
||||
<Block width="wider" snap={true} class="block-snap-widths-demo">
|
||||
{#snippet content()}
|
||||
wider
|
||||
{/snippet}
|
||||
wider
|
||||
</Block>
|
||||
|
||||
<h4>with snap and skip</h4>
|
||||
<Block width="narrower" snap={true} class="block-snap-widths-demo even">
|
||||
{#snippet content()}
|
||||
narrower
|
||||
{/snippet}
|
||||
narrower
|
||||
</Block>
|
||||
<Block width="narrow" snap={true} class="block-snap-widths-demo even">
|
||||
{#snippet content()}
|
||||
narrow
|
||||
{/snippet}</Block
|
||||
>
|
||||
narrow
|
||||
</Block>
|
||||
<Block
|
||||
width="normal"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-narrow"
|
||||
>
|
||||
{#snippet content()}
|
||||
normal.skip-narrow
|
||||
{/snippet}
|
||||
normal.skip-narrow
|
||||
</Block>
|
||||
<Block
|
||||
width="wide"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-normal skip-narrow"
|
||||
>
|
||||
{#snippet content()}
|
||||
wide.skip-normal.skip-narrow
|
||||
{/snippet}
|
||||
wide.skip-normal.skip-narrow
|
||||
</Block>
|
||||
<Block
|
||||
width="wider"
|
||||
snap={true}
|
||||
class="block-snap-widths-demo even skip-wide"
|
||||
>
|
||||
{#snippet content()}
|
||||
wider.skip-wide
|
||||
{/snippet}</Block
|
||||
>
|
||||
wider.skip-wide
|
||||
</Block>
|
||||
</div>
|
||||
</Article>
|
||||
</Story>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
interface Props {
|
||||
/** Content that goes inside `<Block>`*/
|
||||
content: Snippet;
|
||||
children: Snippet;
|
||||
/** Width of the block within the article well. */
|
||||
width?: ContainerWidth;
|
||||
/** Add an id to the block tag to target it with custom CSS. */
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
let {
|
||||
content,
|
||||
children,
|
||||
width = 'normal',
|
||||
id = '',
|
||||
class: cls = '',
|
||||
|
|
@ -38,8 +38,7 @@
|
|||
{role}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<!-- block content -->
|
||||
{@render content()}
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in a new issue