diff --git a/components/doc/gmap/basicdoc.js b/components/doc/gmap/basicdoc.js deleted file mode 100644 index dc5e73d797..0000000000 --- a/components/doc/gmap/basicdoc.js +++ /dev/null @@ -1,71 +0,0 @@ -import { useRef } from 'react'; -import { FileUpload } from '../../lib/fileupload/FileUpload'; -import { Toast } from '../../lib/toast/Toast'; -import { DocSectionCode } from '../common/docsectioncode'; -import { DocSectionText } from '../common/docsectiontext'; -import getConfig from 'next/config'; - -export function BasicDoc(props) { - const toast = useRef(null); - const uploadPath = getConfig().publicRuntimeConfig.uploadPath; - - const onBasicUpload = () => { - toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' }); - }; - - const code = { - basic: ` - - - `, - javascript: ` -import { useRef } from 'react'; -import { Toast } from 'primereact/toast'; -import { FileUpload } from 'primereact/fileupload'; - -export default function BasicDoc() { - const toast = useRef(null); - - const onBasicUpload = () => { - toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' }); - }; - - return ( - - - ) -} - `, - typescript: ` -import { useRef } from 'react'; -import { Toast } from 'primereact/toast'; -import { FileUpload } from 'primereact/fileupload'; - -export default function BasicDoc() { - const toast = useRef(null); - - const onBasicUpload = () => { - toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' }); - }; - - return ( - - - ) -} - ` - }; - - return ( - <> - -

FileUpload basic mode provides a simpler UI as an alternative to advanced mode.

- -
- - -
- - - ); -} diff --git a/components/doc/timeline/aligndoc.js b/components/doc/timeline/aligndoc.js new file mode 100644 index 0000000000..0aaa341d14 --- /dev/null +++ b/components/doc/timeline/aligndoc.js @@ -0,0 +1,94 @@ +import { Timeline } from '../../lib/timeline/Timeline'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function AlignmentDoc(props) { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + const code = { + basic: ` +
Left Align
+ item.status} /> + +
Right Align
+ item.status} /> + +
Alternate Align
+ item.status} /> + `, + javascript: ` +import { Timeline } from 'primereact/timeline'; + +export default function AlignmentDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + return ( +
+
Left Align
+ item.status} /> + +
Right Align
+ item.status} /> + +
Alternate Align
+ item.status} /> +
+ ) +} + `, + typescript: ` +import { Timeline } from 'primereact/timeline'; + +export default function AlignmentDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + return ( +
+
Left Align
+ item.status} /> + +
Right Align
+ item.status} /> + +
Alternate Align
+ item.status} /> +
+ ) +} + ` + }; + + return ( + <> + +

Alignment content.

+ +
+
Left Align
+ item.status} /> + +
Right Align
+ item.status} /> + +
Alternate Align
+ item.status} /> +
+ + + ); +} diff --git a/components/doc/timeline/apidoc.js b/components/doc/timeline/apidoc.js new file mode 100644 index 0000000000..0cd480b644 --- /dev/null +++ b/components/doc/timeline/apidoc.js @@ -0,0 +1,154 @@ +import { CodeHighlight } from '../common/codehighlight'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSubSection } from '../common/docsubsection'; +import Link from 'next/link'; + +export function ApiDoc(props) { + return ( + <> + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of events to display.
alignstringleftPosition of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.
layoutstringverticalOrientation of the timeline, valid values are "vertical" and "horizontal".
dataKeystringnullName of the field that uniquely identifies the a record in the data.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
+
+ + +

+ Following is the list of structural style classes, for theming classes visit theming page. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-timelineContainer element.
p-timeline-leftContainer element when alignment is left.
p-timeline-rightContainer element when alignment is right.
p-timeline-topContainer element when alignment is top.
p-timeline-bottomContainer element when alignment is bottom.
p-timeline-alternateContainer element when alignment is alternating.
p-timeline-verticalContainer element of a vertical timeline.
p-timeline-horizontalContainer element of a horizontal timeline.
p-timeline-eventEvent element.
p-timeline-event-oppositeOpposite of an event content.
p-timeline-event-contentEvent content.
p-timeline-event-separatorSeparator element of an event.
p-timeline-event-markerMarker element of an event.
p-timeline-event-connectorConnector element of an event.
+
+ + + +
Screen Reader
+

Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

+ +
Keyboard Support
+

Component does not include any interactive elements.

+ + + + ); +} diff --git a/components/doc/timeline/customizeddoc.js b/components/doc/timeline/customizeddoc.js new file mode 100644 index 0000000000..22812cb056 --- /dev/null +++ b/components/doc/timeline/customizeddoc.js @@ -0,0 +1,138 @@ +import getConfig from 'next/config'; +import { Timeline } from '../../lib/timeline/Timeline'; +import { Card } from '../../lib/card/Card'; +import { Button } from '../../lib/button/Button'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function CustomizedDoc(props) { + const contextPath = getConfig().publicRuntimeConfig.contextPath; + + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + const customizedMarker = (item) => { + return ( + + + + ); + }; + + const customizedContent = (item) => { + return ( + + {item.image && (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} width={200} className="shadow-1" />} +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque + quas! +

+ + + ); + }; + + const code = { + basic: ` + + `, + javascript: ` +import { Timeline } from 'primereact/timeline'; +import { Card } from 'primereact/card'; +import { Button } from 'primereact/button'; + +export default function CustomizedDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + const customizedMarker = (item) => { + return ( + + + + ); + }; + + const customizedContent = (item) => { + return ( + + { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt + quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

+ + + ); + }; + + return ( +
+
Customized
+ +
+ ) +} + `, + typescript: ` +import { Timeline } from 'primereact/timeline'; +import { Card } from 'primereact/card'; +import { Button } from 'primereact/button'; + +export default function CustomizedDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + const customizedMarker = (item) => { + return ( + + + + ); + }; + + const customizedContent = (item) => { + return ( + + { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt + quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

+ + + ); + }; + + + return ( +
+
Customized
+ +
+ ) +} + ` + }; + + return ( + <> + +

Customized content.

+ +
+
Customized
+ +
+ + + ); +} diff --git a/components/doc/timeline/horizontaldoc.js b/components/doc/timeline/horizontaldoc.js new file mode 100644 index 0000000000..2f868821ab --- /dev/null +++ b/components/doc/timeline/horizontaldoc.js @@ -0,0 +1,77 @@ +import { Timeline } from '../../lib/timeline/Timeline'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function HorizontalDoc(props) { + const events = ['2020', '2021', '2022', '2023']; + + const code = { + basic: ` +
Top Align
+ item} /> +
Bottom Align
+ item} /> +
Alternate Align
+ item} opposite={ } /> + `, + javascript: ` +import { Timeline } from 'primereact/timeline'; + +export default function HorizontalDoc() { + const events = ['2020', '2021', '2022', '2023']; + + return ( +
+
Top Align
+ item} /> + +
Bottom Align
+ item} /> + +
Alternate Align
+ item} opposite={ } /> +
+ ) +} + `, + typescript: ` +import { Timeline } from 'primereact/timeline'; + +export default function HorizontalDoc() { + const events = ['2020', '2021', '2022', '2023']; + + return ( +
+
Top Align
+ item} /> + +
Bottom Align
+ item} /> + +
Alternate Align
+ item} opposite={ } /> +
+ ) +} + ` + }; + + return ( + <> + +

Horizontal Connect content.

+ +
+
Top Align
+ item} /> + +
Bottom Align
+ item} /> + +
Alternate Align
+ item} opposite={ } /> +
+ + + ); +} diff --git a/components/doc/timeline/importdoc.js b/components/doc/timeline/importdoc.js new file mode 100644 index 0000000000..4f0473fbf7 --- /dev/null +++ b/components/doc/timeline/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { Timeline } from 'primereact/timeline'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/timeline/index.js b/components/doc/timeline/index.js deleted file mode 100644 index 754ab8b49a..0000000000 --- a/components/doc/timeline/index.js +++ /dev/null @@ -1,632 +0,0 @@ -import React, { memo } from 'react'; -import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; - -const TimelineDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { Timeline } from 'primereact/timeline'; -import { Card } from 'primereact/card'; -import { Button } from 'primereact/button'; -import './TimelineDemo.css'; - -export class TimelineDemo extends Component { - - constructor(props) { - super(props); - - this.events1 = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - this.events2 = [ - '2020', '2021', '2022', '2023' - ]; - } - - render() { - const customizedMarker = (item) => { - return ( - - - - ); - }; - - const customizedContent = (item) => { - return ( - - { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - - ); - }; - - return ( -
-
-
Left Align
- item.status} /> -
- -
-
Right Align
- item.status} /> -
- -
-
Alternate Align
- item.status} /> -
- -
-
Opposite Content
- item.status} content={(item) => {item.date}} /> -
- -
-
Customized
- -
- -
-
Horizontal
-
Top Align
- item} /> - -
Bottom Align
- item} /> - -
Alternate Align
- item} opposite={ } /> -
-
- ); - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useRef } from 'react'; -import { Timeline } from 'primereact/timeline'; -import { Card } from 'primereact/card'; -import { Button } from 'primereact/button'; -import './TimelineDemo.css'; - -const TimelineDemo = () => { - const events1 = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - const events2 = [ - '2020', '2021', '2022', '2023' - ]; - - const customizedMarker = (item) => { - return ( - - - - ); - }; - - const customizedContent = (item) => { - return ( - - { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - - ); - }; - - return ( -
-
-
Left Align
- item.status} /> -
- -
-
Right Align
- item.status} /> -
- -
-
Alternate Align
- item.status} /> -
- -
-
Opposite Content
- item.status} content={(item) => {item.date}} /> -
- -
-
Customized
- -
- -
-
Horizontal
-
Top Align
- item} /> - -
Bottom Align
- item} /> - -
Alternate Align
- item} opposite={ } /> -
-
- ); -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useRef } from 'react'; -import { Timeline } from 'primereact/timeline'; -import { Card } from 'primereact/card'; -import { Button } from 'primereact/button'; -import './TimelineDemo.css'; - -const TieredMenuDemo = () => { - - const events1 = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - const events2 = [ - '2020', '2021', '2022', '2023' - ]; - - const customizedMarker = (item) => { - return ( - - - - ); - }; - - const customizedContent = (item) => { - return ( - - { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - - ); - }; - - return ( -
-
-
Left Align
- item.status} /> -
- -
-
Right Align
- item.status} /> -
- -
-
Alternate Align
- item.status} /> -
- -
-
Opposite Content
- item.status} content={(item) => {item.date}} /> -
- -
-
Customized
- -
- -
-
Horizontal
-
Top Align
- item} /> - -
Bottom Align
- item} /> - -
Alternate Align
- item} opposite={ } /> -
-
- ); -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - - - `, - content: ` -const { useState, useRef } = React; -const { Timeline } = primereact.timeline; -const { Card } = primereact.card; -const { Button } = primereact.button; - -const TimelineDemo = () => { - const events1 = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } - ]; - - const events2 = [ - '2020', '2021', '2022', '2023' - ]; - - const customizedMarker = (item) => { - return ( - - - - ); - }; - - const customizedContent = (item) => { - return ( - - { item.image && e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={item.name} width={200} className="shadow-1" />} -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt - quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - - ); - }; - - return ( -
-
-
Left Align
- item.status} /> -
- -
-
Right Align
- item.status} /> -
- -
-
Alternate Align
- item.status} /> -
- -
-
Opposite Content
- item.status} content={(item) => {item.date}} /> -
- -
-
Customized
- -
- -
-
Horizontal
-
Top Align
- item} /> - -
Bottom Align
- item} /> - -
Alternate Align
- item} opposite={ } /> -
-
- ); -} - ` - } - }; - - const extFiles = { - 'demo/TimelineDemo.css': { - content: ` -.timeline-demo .custom-marker { - display: flex; - width: 2rem; - height: 2rem; - align-items: center; - justify-content: center; - color: #ffffff; - border-radius: 50%; - z-index: 1; -} - -.timeline-demo .p-timeline-event-content, -.timeline-demo .p-timeline-event-opposite { - line-height: 1; -} - -@media screen and (max-width: 960px) { - .timeline-demo .customized-timeline .p-timeline-event:nth-child(even) { - flex-direction: row !important; - } - .timeline-demo .customized-timeline .p-timeline-event:nth-child(even) .p-timeline-event-content { - text-align: left !important; - } - .timeline-demo .customized-timeline .p-timeline-event-opposite { - flex: 0; - } - .timeline-demo .customized-timeline .p-card { - margin-top: 1rem; - } -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { Timeline } from 'primereact/timeline'; -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

- Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content property is required to display the representation of an event. Example below is a sample events - array that is used throughout the documentation. -

- - {` -const events = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } -]; -`} - - - - {` - item.status} /> -`} - - -
Layout
-

- Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally. -

- - {` - item.status} /> -`} - - -
Alignment
-

- Location of the timeline bar is defined using the align property. -

- - {` - item.status} /> -`} - - -

In addition, the "alternate" alignment option make the contents take turns around the timeline bar.

- - {` - item.status} /> -`} - - -
Opposite
-

- Content to be placed at the other side of the bar is defined with the opposite property. -

- - {` - item.status} content={(item) => {item.date}} /> -`} - - -
Custom Markers
-

- marker property allows placing a custom event marker instead of the default one. Below is an example with custom markers and content. -

- - {` - } content={(item) => item.status}} /> -`} - - -
Properties
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of events to display.
alignstringleftPosition of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.
layoutstringverticalOrientation of the timeline, valid values are "vertical" and "horizontal".
dataKeystringnullName of the field that uniquely identifies the a record in the data.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
-
- -
Styling
-

- Following is the list of structural style classes, for theming classes visit theming page. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-timelineContainer element.
p-timeline-leftContainer element when alignment is left.
p-timeline-rightContainer element when alignment is right.
p-timeline-topContainer element when alignment is top.
p-timeline-bottomContainer element when alignment is bottom.
p-timeline-alternateContainer element when alignment is alternating.
p-timeline-verticalContainer element of a vertical timeline.
p-timeline-horizontalContainer element of a horizontal timeline.
p-timeline-eventEvent element.
p-timeline-event-oppositeOpposite of an event content.
p-timeline-event-contentEvent content.
p-timeline-event-separatorSeparator element of an event.
p-timeline-event-markerMarker element of an event.
p-timeline-event-connectorConnector element of an event.
-
- -
Accessibility
- -
Screen Reader
-

Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

- -
Keyboard Support
-

Component does not include any interactive elements.

- - -
Dependencies
-

None.

- - - {useLiveEditorTabs({ name: 'TimelineDemo', sources: sources, extFiles: extFiles })} - -
- ); -}); - -export default TimelineDoc; diff --git a/components/doc/timeline/oppositecontentdoc.js b/components/doc/timeline/oppositecontentdoc.js new file mode 100644 index 0000000000..98b1e77fc4 --- /dev/null +++ b/components/doc/timeline/oppositecontentdoc.js @@ -0,0 +1,66 @@ +import { Timeline } from '../../lib/timeline/Timeline'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function OppositeContentDoc(props) { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + const code = { + basic: ` + item.status} content={(item) => {item.date}} /> + `, + javascript: ` +import { Timeline } from 'primereact/timeline'; + +export default function OppositeContentDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + return ( +
+ item.status} content={(item) => {item.date}} /> +
+ ) +} + `, + typescript: ` +import { Timeline } from 'primereact/timeline'; + +export default function OppositeContentDoc() { + const events = [ + { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, + { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, + { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, + { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + ]; + + return ( +
+ item.status} content={(item) => {item.date}} /> +
+ ) +} + ` + }; + + return ( + <> + +

Opposite Connect content.

+ +
+ item.status} content={(item) => {item.date}} /> +
+ + + ); +} diff --git a/pages/timeline/index.js b/pages/timeline/index.js index 1f35b53ba9..26d8474fd4 100644 --- a/pages/timeline/index.js +++ b/pages/timeline/index.js @@ -1,50 +1,70 @@ +import Head from 'next/head'; import React from 'react'; -import { Timeline } from '../../components/lib/timeline/Timeline'; -import { Card } from '../../components/lib/card/Card'; -import { Button } from '../../components/lib/button/Button'; -import TimelineDoc from '../../components/doc/timeline'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; import { DocActions } from '../../components/doc/common/docactions'; -import Head from 'next/head'; -import getConfig from 'next/config'; +import { ApiDoc } from '../../components/doc/timeline/apidoc'; +import { HorizontalDoc } from '../../components/doc/timeline/horizontaldoc'; +import { AlignmentDoc } from '../../components/doc/timeline/aligndoc'; +import { OppositeContentDoc } from '../../components/doc/timeline/oppositecontentdoc'; +import { CustomizedDoc } from '../../components/doc/timeline/customizeddoc'; +import { ImportDoc } from '../../components/doc/timeline/importdoc'; const TimelineDemo = () => { - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const events1 = [ - { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' }, - { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' }, - { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' }, - { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' } + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'alignment', + label: 'Alignment', + component: AlignmentDoc + }, + { + id: 'oppositecontent', + label: 'Opposite Content', + component: OppositeContentDoc + }, + { + id: 'customized', + label: 'Customized', + component: CustomizedDoc + }, + { + id: 'horizontal', + label: 'Horizontal', + component: HorizontalDoc + }, + { + id: 'apidoc', + label: 'API', + component: ApiDoc, + children: [ + { + id: 'properties', + label: 'Properties' + }, + { + id: 'styling', + label: 'Styling' + }, + { + id: 'accessibility', + label: 'Accessibility' + } + ] + } ]; - const events2 = ['2020', '2021', '2022', '2023']; - - const customizedMarker = (item) => { - return ( - - - - ); - }; - - const customizedContent = (item) => { - return ( - - {item.image && (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} alt={item.name} width={200} className="shadow-1" />} -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque - quas! -

- - - ); - }; - return (
React Timeline Component +

Timeline

@@ -53,46 +73,11 @@ const TimelineDemo = () => {
-
-
-
Left Align
- item.status} /> -
-
-
Right Align
- item.status} /> -
- -
-
Alternate Align
- item.status} /> -
- -
-
Opposite Content
- item.status} content={(item) => {item.date}} /> -
- -
-
Customized
- -
- -
-
Horizontal
-
Top Align
- item} /> - -
Bottom Align
- item} /> - -
Alternate Align
- item} opposite={ } /> -
+
+ +
- -
); };