@planview/pv-details
v1.5.1
Published
Implementation of Planview Design system details panel
Downloads
2,122
Readme
@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>
)