53 lines
1.6 KiB
Text
53 lines
1.6 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as PaddingResetStories from './PaddingReset.stories.svelte';
|
|
|
|
<Meta of={PaddingResetStories} />
|
|
|
|
# PaddingReset
|
|
|
|
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>
|
|
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<Block width="fluid">
|
|
<!-- Edge-to-edge image -->
|
|
<img src="https:..." alt="Alt text" class="fmb-1" />
|
|
|
|
<!-- Wrap text in `PaddingReset`to add padding back in -->
|
|
<PaddingReset>
|
|
<div class="body-note">
|
|
A caption for the image that is padded when Block is fluid.
|
|
</div>
|
|
</PaddingReset>
|
|
</Block>
|
|
```
|
|
|
|
<Canvas of={PaddingResetStories.Demo} />
|
|
|
|
## Conditional padding
|
|
|
|
You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.
|
|
|
|
```svelte
|
|
<script>
|
|
import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
|
|
|
|
let { src = 'https://...', width = 'fluid' } = $props();
|
|
</script>
|
|
|
|
<Block {width}>
|
|
<!-- Edge-to-edge image -->
|
|
<img src="https:..." alt="Alt text" class="fmb-1" />
|
|
|
|
<!-- Set conditional padding with the `containerIsFluid` prop -->
|
|
<PaddingReset containerIsFluid={width === 'fluid'}>
|
|
<div class="body-note">
|
|
A caption for the image that is padded when Block is fluid.
|
|
</div>
|
|
</PaddingReset>
|
|
</Block>
|
|
```
|