5.0.0 • Published 5 months ago

@spark-web/inline v5.0.0

Weekly downloads
-
License
-
Repository
github
Last release
5 months ago

title: Inline storybookPath: page-layout-inline--default

isExperimentalPackage: false

Use to layout a group of elements together, and allow them to wrap onto multiple lines.

<Inline gap="large">
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={256} />
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={256} />
</Inline>

Examples

Gap

The spacing between children can be adjusted using the gap prop.

<Inline gap="xxlarge">
  <Inline gap="small">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="medium">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="large">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="xlarge">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
</Inline>

Vertical alignment

Items can be aligned vertically using the alignY prop.

<Stack gap="medium" align="center" dividers>
  <Inline gap="small" alignY="top">
    <Placeholder />
    <Placeholder label="top" height={64} width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" alignY="center">
    <Placeholder />
    <Placeholder label="center" height={64} width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" alignY="bottom">
    <Placeholder />
    <Placeholder label="bottom" height={64} width={128} />
    <Placeholder />
  </Inline>
</Stack>

Horizontal alignment

Items can be aligned horizontally using the align prop.

<Stack gap="medium" dividers>
  <Inline gap="small" align="left">
    <Placeholder label="left" width={128} />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="small" align="center">
    <Placeholder />
    <Placeholder label="center" width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" align="right">
    <Placeholder />
    <Placeholder />
    <Placeholder label="right" width={128} />
  </Inline>
</Stack>

Props

Box props are also included as Inline props and are not listed here (excluding display, alignItems, flexDirection, justifyContent and flexWrap).

2.0.0-rc.19

7 months ago

2.0.0-rc.2

7 months ago

2.0.0-rc.3

7 months ago

2.0.0-rc.17

7 months ago

2.0.0-rc.4

7 months ago

2.0.0-rc.18

7 months ago

2.0.0-rc.5

7 months ago

2.0.0-rc.15

7 months ago

2.0.0-rc.16

7 months ago

5.0.0

5 months ago

2.0.0-rc.13

7 months ago

2.0.0-rc.0

7 months ago

2.0.0-rc.14

7 months ago

2.0.0-rc.1

7 months ago

2.0.0-rc.11

7 months ago

2.0.0-rc.12

7 months ago

5.0.0-rc.24

6 months ago

2.0.0-rc.10

7 months ago

5.0.0-rc.25

5 months ago

5.0.0-rc.26

5 months ago

5.0.0-rc.27

5 months ago

5.0.0-rc.28

5 months ago

5.0.0-rc.29

5 months ago

2.0.0-rc.6

7 months ago

2.0.0-rc.7

7 months ago

2.0.0-rc.8

7 months ago

2.0.0-rc.9

7 months ago

5.0.0-rc.31

5 months ago

2.0.0-rc.20

6 months ago

2.0.0-rc.21

6 months ago

1.1.0

1 year ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.10

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago