@planview/pv-details

@planview/pv-details

@planview/pv-details is a set of components meant to be composed to follow the patterns and specifications of the Planview Design System.

The Details panel allows users to view and modify information about selected artifacts. It typically displays specific details, attributes and actions related to the artifact in a structured format, providing users with access to relevant information and editing capabilities.

Setup

You can install @planview/pv-details in multiple ways:

NPM

npm install @planview/pv-details --save

Yarn

yarn add @planview/pv-details

Usage

DetailsPanel is meant to be used in the ContentLayout right panel:

import { ContentLayout } from '@planview/pv-uikit'
import { Input } from '@planview/pv-form'
import { DetailsPanel, DetailsPanelSection } from '@planview/pv-details'

const MyView = () => (
    <ContentLayout right={true}>
        <ContentLayout.Middle>{/*main content*/}</ContentLayout.Middle>
        <ContentLayout.Right label="Selected artifact details">
            <DetailsPanel header="My artifact">
                <DetailsPanelSection label="Details">
                    <Input label="Name" value="My artifact">
                </DetailsPanelSection>
            </DetailsPanel>
        </ContentLayout.Right>
    </ContentLayout>
)