Outline Panel

  • Dashboard
  • state
  • render
  • computeStats
About this piece

Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

Usage

The import and the props worth knowing about, in one place.

import { Editor12 } from "@/components/beste/piece/editor12";

<Editor12
  items={[
    {
      "label": "Dashboard",
      "kind": "class",
      "depth": 0
    },
    {
      "label": "state",
      "kind": "prop",
      "depth": 1
    },
    {
      "label": "render",
      "kind": "method",
      "depth": 1,
      "active": true
    },
    {
      "label": "computeStats",
      "kind": "function",
      "depth": 0
    }
  ]}
  bordered={false}
/>

More Editor pieces

View all Editor
Feature177 Content
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'
Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F
Appearance

Images

Image entrance
Scroll effect

Motion

Section animation
Animation speed
1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}
for (let $1:i = 0; $1 < $2:arr.length; $1++) {}