Theme

Sound

Jump to a component

AniCanonKit · Story

PanelSection

PanelSection is a labelled group of rows with its count on the right ("Changes 3").

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

PanelSection is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

PanelSection is made for the web, and isn’t part of Sakuga for Android yet.

Use it for: A labelled group of rows inside a Story panel, with its count on the right ("Changes 3").
Not for: The head of the panel itselfPanelHeader
A group outside Story, such as a faction in a listSectionHeader
Studio's folded section with its current valuePanelRow
Rows outside Story that open pagesList

Guidelines

Rows are EntityRows. A short line after the rows goes in slot="footer".

PanelSectionExample.jsxReact

import { EntityRow, PanelSection } from '@anicanon/sakuga/anicanonkit';

export default function PanelSectionExample() {
  return (
    <PanelSection label="Places" count="2 changed">
      <EntityRow
        visual={{ kind: 'place' }}
        name="Sé station"
        after="Burning"
        afterVariant="alert"
        afterIcon="trait-fierce"
        chip="Ep 3"
      />
    </PanelSection>
  );
}

Props`PanelSectionProps`

labelrequired

string

childrenrequired

ReactNode

count

string | number

footer

ReactNode

The line after the rows (as slot="footer").

className

string

PanelSectionExample.swiftiOS · coming soon

PanelSectionExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

panel-section-labelPanelSection: label and count.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

Space and shape

panel-section-gap

gap-2xs

2px

panel-section-label-margin-bottom

gap-sm

6px

Type

panel-section-label-font

text-micro

700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

panel-section-label-span-font-weight

weight-medium

500