# View


## Examples

### Default

```html
<m-view
      size="${args.size}"
      margin="${args.margin}"
      sr-label="${args.srLabel || ""}"
      sr-label-aside="${args.srLabelAside || ""}">
      <m-box>
        This is main content in a view container with size ${args.size} and margin
        ${args.margin}
      </m-box>
      <m-box>The view component manages content width, spacing between elements, and vertical margins </m-box>
    </m-view>
```

### WithAside

```html
<m-view
      size="${args.size}"
      spacing="${args.spacing}"
      margin="${args.margin}"
      sr-label="${args.srLabel}"
      sr-label-aside="${args.srLabelAside}">
      <m-box slot="aside" spacing="m">
        This is the aside content
      </m-box>
      <m-box> Main content area </m-box>
      <m-box> Another content block in main area with spacing controlled by the view's spacing property </m-box>
    </m-view>
```

### SizeVariations

```html
<m-view size="xxs" margin="s">
      <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;"> Size: xxs (440px) </m-box>
    </m-view>
    <m-view size="xs" margin="s">
      <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;"> Size: xs (720px) </m-box>
    </m-view>
    <m-view size="s" margin="s">
      <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;"> Size: s (960px) </m-box>
    </m-view>
    <m-view size="m" margin="s">
      <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;"> Size: m (1200px) </m-box>
    </m-view>
    <m-view size="full" margin="s">
      <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;"> Size: full (100%) </m-box>
    </m-view>
```

### MarginVariations

```html
<div style="background-color: var(--m-color-neutral-50); padding: 1rem;">
      <m-view size="m" margin="s">
        <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;">
          Margin: s (small vertical margin)
        </m-box>
      </m-view>
      <m-view size="m" margin="m">
        <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;">
          Margin: m (medium vertical margin)
        </m-box>
      </m-view>
      <m-view size="m" margin="l">
        <m-box style="background-color: var(--m-color-neutral-100); padding: 1rem;">
          Margin: l (large vertical margin)
        </m-box>
      </m-view>
    </div>
```

## Usage

The `View` component provides a responsive layout for application views with optional aside and main content slots. It creates a responsive grid layout that can include an optional sidebar (aside) and main content area. The component automatically handles responsive behavior, switching from a two-column layout on desktop to a single-column layout on mobile devices.

### Typical usage pattern

- Use as the main content wrapper within the default slot of `m-app-layout`
- Place page content (sections, forms, lists) in the default slot
- Place navigation, filters, or secondary content in the aside slot
- Use different size variants (xxs, xs, s, m, full) to control content width
- Use margin variants (s, m, l) to control vertical spacing

```html
<m-view size="m" margin="l">
  <aside slot="aside">Sidebar</aside>
  <m-section>
    <h2 slot="title">Add main elements into default slot</h2>
  </m-section>
</m-view>
```