# Layout Content

## Usage

Scrollable main content area.

```ts
import { LayoutContent } from '@astryx-vue/core/Layout'
```

`LayoutContent` takes the space a `Layout` has left over between its header, its footer, and its panels, applies the region padding, and scrolls its own content once that content is taller than the space it was given. The header and the footer stay where they are.

`isScrollable` is on by default. Turn it off when the page scrolls as a whole and this region should only grow with its content. `padding` overrides the padding the surrounding `Layout` passes down, and `padding: 0` makes the region full bleed. `label` and `role` give the region a landmark role, so it shows up in a screen reader's landmark list.

```vue
<script setup lang="ts">
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        Orders
      </LayoutHeader>
    </template>
    <LayoutContent>
      Select an order.
    </LayoutContent>
  </Layout>
</template>
```

## Examples

Common configurations, variations, and states.

### Basic

A scrollable main content area below a fixed header. Use LayoutContent inside Layout to get automatic padding and scroll containment for the primary content.

```vue
<script setup lang="ts">
import { Card } from '@astryx-vue/core/Card'
import { Heading } from '@astryx-vue/core/Heading'
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
import { VStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        <Card variant="muted" />
      </LayoutHeader>
    </template>
    <LayoutContent>
      <VStack :gap="3">
        <Heading :level="5">
          Main Content
        </Heading>
        <Text type="body" color="secondary">
          LayoutContent fills the remaining space and scrolls when its content overflows, while the header stays fixed.
        </Text>
      </VStack>
    </LayoutContent>
  </Layout>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isScrollable` | `boolean` | `true` | Scrolls the region when its content is taller than the space it was given. |
| `label` | `string` | — | Accessible name for the landmark element. |
| `padding` | `SpacingStep` | — | Internal padding using the spacing scale. Overrides the padding the surrounding layout passes down. `0` makes the region full bleed. |
| `role` | `string` | — | ARIA landmark role. |

`SpacingStep` accepts these values:

```ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
```

## Slots

- `default`: the primary content.

## Template ref

`LayoutContent` exposes `element`.
Its type is `HTMLDivElement | null`.

## Native attributes

The root element receives HTML attributes, `aria-*` attributes, `data-*` attributes, `class`, and `style`. `class` is merged with the component's own classes.