Skip to main content

View

Use _view attribute to show how to render different views from a single tsx.

Source​

view.tsx
import { Shape } from "@dinghy/base-components";

export default function App() {
    return (
        <Shape _title="Multiple Views Example">
            <Shape _title="Default View">
                <Shape>Default Overview Shape 1</Shape>
                <Shape>Default Overview Shape 2</Shape>
            </Shape>
            <Shape
                _view={["overview", "all-view"]}
                _title="All View"
            >
                <Shape>All View Shape 1</Shape>
                <Shape>All View Shape 2</Shape>
            </Shape>
            <Shape
                _view="sub-view-only"
                _title="Sub View Only"
            >
                <Shape>Sub View Only Shape 1</Shape>
                <Shape>Sub View Only Shape 2</Shape>
            </Shape>
        </Shape>
    );
}

Rendered​

Default Overview​

Overview

All View​

All View

Sub View​

Sub View