@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.
You can install @planview/pv-details in multiple ways:
npm install @planview/pv-details --saveyarn add @planview/pv-detailsDetailsPanel 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>
)