wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates docs

Browse source
This commit is contained in:
hobbes7878 2025-04-10 12:30:11 +01:00
parent 9adc6e4ce4
commit d9773e85b2
Failed to extract signature
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/PaddingReset/PaddingReset.mdx
View file

@ -6,7 +6,7 @@ import * as PaddingResetStories from './PaddingReset.stories.svelte';
# PaddingReset
Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on surrouding text such as ntoes or captions. The `PaddingReset` component resets padding to `0 15px` on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.
```svelte
<script>
@ -15,11 +15,13 @@ Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep pa
<Block width="fluid">
<!-- Edge-to-edge image -->
<img src="https:..." alt="Alt text" />
<img src="https:..." alt="Alt text" class="fmb-1" />
<!-- Wrap text in `PaddingReset`to add padding back in -->
<PaddingReset>
<p>A caption for the image that is padded when Block is fluid.</p>
<div class="body-note">
A caption for the image that is padded when Block is fluid.
</div>
</PaddingReset>
</Block>
```
@ -40,11 +42,13 @@ You can add the padding conditionally by setting the `containerIsFluid` prop to
<Block {width}>
<!-- Edge-to-edge image -->
<img src="https:..." alt="Alt text" />
<img src="https:..." alt="Alt text" class="fmb-1" />
<!-- Set conditional padding with the `containerIsFluid` prop -->
<PaddingReset containerIsFluid={width === 'fluid'}>
<p>A caption for the image that is padded when Block is fluid.</p>
<div class="body-note">
A caption for the image that is padded when Block is fluid.
</div>
</PaddingReset>
</Block>
```

10
src/components/PaddingReset/PaddingReset.stories.svelte
View file

@ -18,11 +18,13 @@
<Story name="Demo">
<!-- Fluid block -->
<Block {width}>
<img src={sharkSrc} alt="shark" />
<img src={sharkSrc} alt="shark" class="fmb-1" />
<PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
<p>
A caption for the image that is padded when <code>Block</code> is fluid.
</p>
<div class="body-note">
A caption for the image that is padded when its containing <code
>Block</code
> is fluid.
</div>
</PaddingReset>
</Block>
</Story>