| 1 | ---
|
| 2 | title: Inline
|
| 3 | storybookPath: page-layout-inline--default
|
| 4 | isExperimentalPackage: false
|
| 5 | ---
|
| 6 |
|
| 7 | Use to layout a group of elements together, and allow them to wrap onto multiple
|
| 8 | lines.
|
| 9 |
|
| 10 | ```jsx live
|
| 11 | <Inline gap="large">
|
| 12 | <Placeholder width={128} />
|
| 13 | <Placeholder width={32} />
|
| 14 | <Placeholder width={64} />
|
| 15 | <Placeholder width={256} />
|
| 16 | <Placeholder width={128} />
|
| 17 | <Placeholder width={32} />
|
| 18 | <Placeholder width={64} />
|
| 19 | <Placeholder width={128} />
|
| 20 | <Placeholder width={32} />
|
| 21 | <Placeholder width={64} />
|
| 22 | <Placeholder width={256} />
|
| 23 | </Inline>
|
| 24 | ```
|
| 25 |
|
| 26 | ## Examples
|
| 27 |
|
| 28 | ### Gap
|
| 29 |
|
| 30 | The spacing between children can be adjusted using the `gap` prop.
|
| 31 |
|
| 32 | ```jsx live
|
| 33 | <Inline gap="xxlarge">
|
| 34 | <Inline gap="small">
|
| 35 | <Placeholder />
|
| 36 | <Placeholder />
|
| 37 | <Placeholder />
|
| 38 | </Inline>
|
| 39 | <Inline gap="medium">
|
| 40 | <Placeholder />
|
| 41 | <Placeholder />
|
| 42 | <Placeholder />
|
| 43 | </Inline>
|
| 44 | <Inline gap="large">
|
| 45 | <Placeholder />
|
| 46 | <Placeholder />
|
| 47 | <Placeholder />
|
| 48 | </Inline>
|
| 49 | <Inline gap="xlarge">
|
| 50 | <Placeholder />
|
| 51 | <Placeholder />
|
| 52 | <Placeholder />
|
| 53 | </Inline>
|
| 54 | </Inline>
|
| 55 | ```
|
| 56 |
|
| 57 | ### Vertical alignment
|
| 58 |
|
| 59 | Items can be aligned vertically using the `alignY` prop.
|
| 60 |
|
| 61 | ```jsx live
|
| 62 | <Stack gap="medium" align="center" dividers>
|
| 63 | <Inline gap="small" alignY="top">
|
| 64 | <Placeholder />
|
| 65 | <Placeholder label="top" height={64} width={128} />
|
| 66 | <Placeholder />
|
| 67 | </Inline>
|
| 68 | <Inline gap="small" alignY="center">
|
| 69 | <Placeholder />
|
| 70 | <Placeholder label="center" height={64} width={128} />
|
| 71 | <Placeholder />
|
| 72 | </Inline>
|
| 73 | <Inline gap="small" alignY="bottom">
|
| 74 | <Placeholder />
|
| 75 | <Placeholder label="bottom" height={64} width={128} />
|
| 76 | <Placeholder />
|
| 77 | </Inline>
|
| 78 | </Stack>
|
| 79 | ```
|
| 80 |
|
| 81 | ### Horizontal alignment
|
| 82 |
|
| 83 | Items can be aligned horizontally using the `align` prop.
|
| 84 |
|
| 85 | ```jsx live
|
| 86 | <Stack gap="medium" dividers>
|
| 87 | <Inline gap="small" align="left">
|
| 88 | <Placeholder label="left" width={128} />
|
| 89 | <Placeholder />
|
| 90 | <Placeholder />
|
| 91 | </Inline>
|
| 92 | <Inline gap="small" align="center">
|
| 93 | <Placeholder />
|
| 94 | <Placeholder label="center" width={128} />
|
| 95 | <Placeholder />
|
| 96 | </Inline>
|
| 97 | <Inline gap="small" align="right">
|
| 98 | <Placeholder />
|
| 99 | <Placeholder />
|
| 100 | <Placeholder label="right" width={128} />
|
| 101 | </Inline>
|
| 102 | </Stack>
|
| 103 | ```
|
| 104 |
|
| 105 | ## Props
|
| 106 |
|
| 107 | <PropsTable displayName="Inline" />
|
| 108 |
|
| 109 | [`Box`](/package/box) props are also included as `Inline` props and are not
|
| 110 | listed here (excluding `display`, `alignItems`, `flexDirection`,
|
| 111 | `justifyContent` and `flexWrap`).
|
| 112 |
|
| 113 | [align]:
|
| 114 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L16
|
| 115 | [align-y]:
|
| 116 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L18
|
| 117 | [data-attribute-map]:
|
| 118 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|