Frame

example

code

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog">the customer with the knife is always right.</Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog">the customer with the knife is always right.</Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog">the customer with the knife is always right.</Frame>

<section class="CharcellFrame">
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" borderEnd="double" borderBottom="double">
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" borderEnd="double" borderBottom="double">
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" borderEnd="double" borderBottom="double">
  the customer with the knife is always right.
</Frame>

<section
  class="CharcellFrame CharcellFrame--border-end-double CharcellFrame--border-bottom-double"
>
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" active>
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" active>
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" active>
  the customer with the knife is always right.
</Frame>

<section class="CharcellFrame CharcellFrame--active">
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" border="none">
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" border="none">
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" border="none">
  the customer with the knife is always right.
</Frame>

<section
  class="CharcellFrame CharcellFrame--border-top-none CharcellFrame--border-end-none CharcellFrame--border-bottom-none CharcellFrame--border-start-none"
>
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" border="rounded">
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" border="rounded">
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" border="rounded">
  the customer with the knife is always right.
</Frame>

<section
  class="CharcellFrame CharcellFrame--border-top-rounded CharcellFrame--border-end-rounded CharcellFrame--border-bottom-rounded CharcellFrame--border-start-rounded"
>
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" border="heavy">
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" border="heavy">
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" border="heavy">
  the customer with the knife is always right.
</Frame>

<section
  class="CharcellFrame CharcellFrame--border-top-heavy CharcellFrame--border-end-heavy CharcellFrame--border-bottom-heavy CharcellFrame--border-start-heavy"
>
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" border="double">
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" border="double">
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" border="double">
  the customer with the knife is always right.
</Frame>

<section
  class="CharcellFrame CharcellFrame--border-top-double CharcellFrame--border-end-double CharcellFrame--border-bottom-double CharcellFrame--border-start-double"
>
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" flush>
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" flush>
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" flush>the customer with the knife is always right.</Frame>

<section class="CharcellFrame CharcellFrame--flush">
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

import { Frame } from 'charcell/react';

export function FrameExample() {
  return (
    <Frame title="quohog" quiet>
      the customer with the knife is always right.
    </Frame>
  );
}

<script setup lang="ts">
import { Frame } from 'charcell/vue';
</script>

<template>
  <Frame title="quohog" quiet>
    the customer with the knife is always right.
  </Frame>
</template>

<script lang="ts">
  import { Frame } from 'charcell/svelte';
</script>

<Frame title="quohog" quiet>the customer with the knife is always right.</Frame>

<section class="CharcellFrame CharcellFrame--quiet">
  <header class="CharcellFrame__header">
    <div class="CharcellFrame__title">
      <span class="CharcellFrame__label">quohog</span>
    </div>
  </header>
  <div class="CharcellFrame__body">
    the customer with the knife is always right.
  </div>
</section>

as text

at rest

┌─ quohog ─────────────────────────────┐
│ the customer with the knife is       │
│ always right.                        │
└──────────────────────────────────────┘

props

titlestring: The text in the ring's top row, set on the stroke.
activeboolean: The focused pane: the stroke climbs to the foreground.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the ring's start side, over borderX and border.
flushboolean: Drops the body's side padding, for edge-to-edge content.
fillboolean: Takes the container's box: grows in a flex or grid layout, and takes the full height of a block that has one.
quietboolean: A frame that groups rather than bounds: the stroke at faint, the title at mid.
as'section' | 'div' | 'li' | 'article' | 'aside'= 'section': The root element: a frame that is not a landmark region, such as a node in an editor tree, is a div or an li.

it also takes any other attribute of its <section>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

legend: Controls that belong to the frame, such as a toggle or a count, in its top row beside title.
legendEnd: Controls at the far end of the frame's top row, the stroke running on between them and title.
default: The frame's content, a cell inside its ring.

usage

example

code

as text

props

slots