@threlte/flex
<Box>
The component <Box> creates a flexbox item. It can be used as a direct child
of <Flex> or as a child of another <Box> to
create a nested flex layout.
Usage
<script lang="ts">
import { Flex, Box } from '@threlte/flex'
import Model from './Model.svelte'
</script>
<Flex
width={100}
height={100}
justifyContent="Center"
>
<Box
flex={1}
width="auto"
>
{#snippet children({ width })}
<Model {width} />
{/snippet}
</Box>
</Flex>Content Sizing
The <Box> component controls element positions only. However, if you wish to
handle element dimensions based on the layout calculated by Yoga, you’ll need to
manually adapt the content’s size. This is because @threlte/flex lacks
knowledge about the inner content’s sizing mechanisms. For this purpose,
@threlte/flex offers the computed dimensions in three ways:
- Using the
widthandheightsnippet props
<Box>
{#snippet children({ width, height })}
<T.Mesh
scale.x={width}
scale.y={height}
/>
{/snippet}
</Box>- Using the
useDimensionshook in a child component to<Box>:
<script lang="ts">
import { useDimensions } from '@threlte/flex'
const { width, height } = useDimensions()
</script>
<T.Mesh
scale.x={$width}
scale.y={$height}
/>- Using the
reflowevent
<Box
onreflow={({ width, height }) => {
console.log(width, height)
}}
>
<!-- … -->
</Box>Layout Reflow
To trigger a layout reflow, you can use the reflow slot prop:
<script lang="ts">
import { Box } from '@threlte/flex'
import { Text } from '@threlte/extras'
</script>
<Box>
{#snippet children({ reflow })}
<Text text="Hello World" onsync={reflow}>
{/snippet}
</Box>Item Ordering
By default, the order of a flex item is determined by the order of insertion in
the component tree. If for any reason you need to change the order of a flex
item manually, you can use the order prop:
<script lang="ts">
import { Box } from '@threlte/flex'
</script>
<Flex
width={100}
height={100}
>
<Box order={2} />
<Box order={1} />
<Box order={3} />
</Flex>