StackItem

StackItem is a sub-component that is used to define the placement of a child element within a Stack component.

All docs for StackItem will use a Stack component as a parent. This is to ensure that the StackItem is rendered correctly.

Basic Usage


import { Stack, StackItem } from '@krakentech/coral';
 
<Stack>
    <StackItem>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor.

Properties

flex


<Stack>
    <StackItem flex="2 1 200px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
 
    <StackItem flex="0 1 200px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem flex="1 1 200px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor.

flexGrow


<Stack>
    <StackItem flexGrow={2}>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem flexGrow={0}>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem flexGrow={1}>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor.

flexShrink


<Stack>
    <StackItem flexShrink={2}>
        <Card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Card>
    </StackItem>
    <StackItem flexShrink={0}>
        <Card>Lorem ipsum dolor, sit amet consectetur.</Card>
    </StackItem>
    <StackItem flexShrink={1}>
        <Card>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

flexBasis


<Stack>
    <StackItem flexBasis="100px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem flexBasis="200px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem flexBasis="300px">
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor.

order


<Stack>
    <StackItem order={2}>
        <Card>Second</Card>
    </StackItem>
    <StackItem order={3}>
        <Card>Third</Card>
    </StackItem>
    <StackItem order={1}>
        <Card>First</Card>
    </StackItem>
</Stack>

Second

Third

First

alignSelf


<Stack>
    <StackItem alignSelf="end">
        <Card padding="small">Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
    <StackItem>
        <Card>Lorem ipsum dolor.</Card>
    </StackItem>
</Stack>

Lorem ipsum dolor.

Responsiveness


<Stack>
    <StackItem order={{ base: "1", lg: "3" }}>
        <Card>First, third at lg</Card>
    </StackItem>
    <StackItem order="2">
        <Card>Second</Card>
    </StackItem>
    <StackItem order={{ base: "3", lg: "1" }}>
        <Card>Third, first at lg</Card>
    </StackItem>
</Stack>

First, third at lg

Second

Third, first at lg

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`flex`	ConditionalValue<"1" \| `var(--${string})` \| AnyString \| Flex<String \| Number> \| readonly NonNullable<Flex<String \| Number> \| undefined>[] \| undefined> The CSS `alignSelf` property to apply.
`order`	`ConditionalValue<AnyString \| Order \| readonly NonNullable<Order \| undefined>[] \| undefined>` The CSS `order` property to apply.
`alignSelf`	ConditionalValue<WithEscapeHatch<OnlyKnown<"alignSelf", `var(--${string})` \| AlignSelf \| readonly string[] \| undefined>>> \| undefined The CSS `alignSelf` property to apply.
`flexGrow`	`ConditionalValue<AnyString \| FlexGrow \| readonly NonNullable<FlexGrow \| undefined>[] \| undefined>` The CSS `flexGrow` property to apply.
`flexShrink`	`ConditionalValue<AnyString \| FlexShrink \| readonly NonNullable<FlexShrink \| undefined>[] \| undefined>` The CSS `flexShrink` property to apply.
`flexBasis`	ConditionalValue<`var(--${string})` \| SizeToken \| AnyString \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "2/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5" \| "1/6" \| "2/6" \| "3/6" \| "4/6" \| "5/6" \| ... 14 more ... \| undefined> The CSS `flexBasis` property to apply.
`component`	`"symbol" \| "object" \| "base" \| "clipPath" \| "filter" \| "mask" \| "marker" \| "center" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "bdi" \| "bdo" \| "big" \| ... 154 more ... \| ComponentType<...>` What HTML element should render?	`div`
`children`	`ReactNode`