44 lines
1.4 KiB
Plaintext
44 lines
1.4 KiB
Plaintext
|
# Providers::Dimension
|
||
|
|
|
||
|
|
A provider component that helps you to make a container fill the remaining space of the viewport.
|
||
|
|
Usually, you would **use flexbox** to do so but for scenarios where this isn't possible you
|
||
|
|
can use this component to make it easy to take up the remaining space.
|
||
|
|
|
||
|
|
```hbs
|
||
|
|
<Providers::Dimension as |p|>
|
||
|
|
<div style={{p.data.fillRemainingHeightStyle}}>
|
||
|
|
Fill remaining space
|
||
|
|
</div>
|
||
|
|
</Providers::Dimension>
|
||
|
|
```
|
||
|
|
|
||
|
|
By default, this component will take up the remaining viewport space by taking the
|
||
|
|
top of itself as the top-boundary and the `footer[role="contentinfo"]` as the
|
||
|
|
bottom-boundary. In terms of Consul-UI this means _take up the entire space but
|
||
|
|
stop at the footer that holds the consul version info at the bottom of the screen_.
|
||
|
|
|
||
|
|
You can pass a different `bottomBoundary` if need be:
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<div class='h-48 relative flex border border-hds-consul-foreground'>
|
||
|
|
<div class='h-full w-24 relative'>
|
||
|
|
<div
|
||
|
|
class='absolute bottom-0 w-full h-12 bg-hds-consul-gradient-primary-start flex items-center justify-center'
|
||
|
|
id='bottom-boundary'
|
||
|
|
>
|
||
|
|
Boundary
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='flex-1'>
|
||
|
|
<Providers::Dimension @bottomBoundary='#bottom-boundary' as |p|>
|
||
|
|
<div
|
||
|
|
style={{p.data.fillRemainingHeightStyle}}
|
||
|
|
class='bg-hds-consul-surface flex items-center justify-center'
|
||
|
|
>
|
||
|
|
We could use flexbox here instead
|
||
|
|
</div>
|
||
|
|
</Providers::Dimension>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
```
|