mirror of
https://github.com/payloadcms/payload.git
synced 2026-09-14 20:07:19 +08:00
Sean Zubrickas
4884195d71
Adds the first release of @payloadcms/ui component documentation, focused on common, visually useful components and working Payload v3 examples. - Adds component guides, usage guidance, props, and accessibility notes. - Adds an overview and curated component inventory under Features → UI Components. *_v4 as a fast follow once this gets approved_
37 lines
1.4 KiB
Plaintext
37 lines
1.4 KiB
Plaintext
---
|
|
title: Gutter
|
|
label: Gutter
|
|
order: 120
|
|
desc: Align content to Payload's horizontal Admin Panel gutters.
|
|
keywords: ui, component, gutter, layout, spacing
|
|
---
|
|
|
|
The `Gutter` component applies the standard horizontal spacing used by Payload views. Use it to align custom view content with the surrounding Admin Panel.
|
|
|
|
## Import
|
|
|
|
```tsx
|
|
import { Gutter } from '@payloadcms/ui'
|
|
```
|
|
|
|
## Basic usage
|
|
|
|
<ComponentPreview component="Gutter" example="basic" />
|
|
|
|
Left and right padding are enabled by default. Negative gutters let a child extend through spacing already applied by a parent layout.
|
|
|
|
## Common props
|
|
|
|
These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --------------- | ----------- | ------- | ------------------------------------- |
|
|
| `children` \* | `ReactNode` | — | Content positioned within the gutter. |
|
|
| `left` | `boolean` | `true` | Applies the standard left padding. |
|
|
| `right` | `boolean` | `true` | Applies the standard right padding. |
|
|
| `negativeLeft` | `boolean` | `false` | Applies a negative left margin. |
|
|
| `negativeRight` | `boolean` | `false` | Applies a negative right margin. |
|
|
| `className` | `string` | — | Adds a custom class to the wrapper. |
|
|
|
|
_\* An asterisk denotes that a prop is required._
|