@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 --save
yarn add @planview/pv-details
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>
)