The timeline kit can use two different line styles in the same timeline - solid
and dotted
line styles.
To view different colors of icon circle, visit Icon Circle Kit.
import React from 'react' import Timeline from 'playbook-ui' import Body from 'playbook-ui' import TitleDetail from 'playbook-ui' const TimelineDefault = (props) => ( <div> <Timeline> <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> <Timeline.Item icon="smile" iconColor="green" > <Body color="light" text="Conversation resolved" /> </Timeline.Item> </Timeline> <br /> <br /> <Timeline> <Timeline.Item icon="user" iconColor="royal" lineStyle="dotted" > <TitleDetail detail="37-27 74th Street" title="Jackson heights" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" > <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Item> </Timeline> </div> ) export default TimelineDefault
import React from 'react' import Timeline from 'playbook-ui' import Body from 'playbook-ui' import TitleDetail from 'playbook-ui' const TimelineVertical = (props) => ( <div> <Timeline orientation="vertical"> <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> <Timeline.Item icon="smile" iconColor="green" > <Body color="light" text="Conversation resolved" /> </Timeline.Item> </Timeline> <br /> <br /> <Timeline orientation="vertical"> <Timeline.Item icon="user" iconColor="royal" lineStyle="dotted" > <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" > <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Item> </Timeline> </div> ) export default TimelineVertical
Use the optional showDate
prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
import React from 'react' import Timeline from 'playbook-ui' import TitleDetail from 'playbook-ui' const TimelineWithDate = (props) => ( <div> <Timeline orientation="horizontal" showDate > <Timeline.Item date={new Date()} icon="user" iconColor="royal" > <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Item> <Timeline.Item date={new Date().setDate(new Date().getDate() + 1)} icon="map-marker-alt" iconColor="purple" > <TitleDetail detail="72 E St Astoria" title="Society Hill" /> </Timeline.Item> </Timeline> <br /> <br /> <br /> <Timeline orientation="vertical" showDate > <Timeline.Item date={new Date()} icon="user" iconColor="royal" > <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Item> <Timeline.Item date={new Date().setDate(new Date().getDate() + 1)} icon="map-marker-alt" iconColor="purple" > <TitleDetail detail="72 E St Astoria" title="Society Hill" /> </Timeline.Item> </Timeline> <br/> <br/> <br/> <Timeline orientation="vertical" showDate > <Timeline.Item date={new Date('20 Mar 2018')} icon="user" iconColor="royal" > <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Item> <Timeline.Item date={new Date('20 May 2018')} icon="map-marker-alt" iconColor="purple" > <TitleDetail detail="72 E St Astoria" title="Society Hill" /> </Timeline.Item> </Timeline> </div> ) export default TimelineWithDate
Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
import React from 'react' import Timeline from 'playbook-ui' import Title from 'playbook-ui' import Pill from 'playbook-ui' import TitleDetail from 'playbook-ui' const TimelineWithChildren = (props) => ( <div> <Timeline orientation="horizontal" showDate > <Timeline.Item lineStyle="solid" > <Timeline.Label> <Title size={2} text='Any Kit Here' /> </Timeline.Label> <Timeline.Step icon="user" iconColor="royal" /> <Timeline.Detail> <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Detail> </Timeline.Item> <Timeline.Item lineStyle="dotted" > <Timeline.Step> <Pill text="Any Kit" variant="success" /> </Timeline.Step> <Timeline.Detail> <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Detail> </Timeline.Item> <Timeline.Item lineStyle="solid" > <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} /> <Timeline.Step icon="map-marker-alt" iconColor="purple" /> <Timeline.Detail> <TitleDetail detail="72 E St Astoria" title="Society Hill" /> </Timeline.Detail> </Timeline.Item> </Timeline> <br /> <br /> <br /> <Timeline orientation="vertical" showDate > <Timeline.Item lineStyle="solid" > <Timeline.Label> <Title size={4} text='Any Kit' /> </Timeline.Label> <Timeline.Step icon="user" iconColor="royal" /> <Timeline.Detail> <TitleDetail detail="37-27 74th Street" title="Jackson Heights" /> </Timeline.Detail> </Timeline.Item> <Timeline.Item lineStyle="dotted" > <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} /> <Timeline.Step icon="map-marker-alt" iconColor="purple" /> <Timeline.Detail> <TitleDetail detail="72 E St Astoria" title="Society Hill" /> </Timeline.Detail> </Timeline.Item> <Timeline.Item lineStyle="solid" > <Timeline.Step> <Pill text="3" variant="success" /> </Timeline.Step> <Timeline.Detail> <TitleDetail detail="81 Gate St Brooklyn" title="Greenpoint" /> </Timeline.Detail> </Timeline.Item> </Timeline> </div> ) export default TimelineWithChildren
Use the optional gap
prop to render the timeline kit with adjusted spacing between nodes. The gap
prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
import React from 'react' import Timeline from 'playbook-ui' import Flex from 'playbook-ui' import FlexItem from 'playbook-ui' import Body from 'playbook-ui' const TimelineWithGap = (props) => ( <div> <Flex justify="evenly"> <FlexItem> <Timeline gap="xs" orientation="vertical" > <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> </Timeline> </FlexItem> <FlexItem> <Timeline gap="sm" orientation="vertical" > <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> </Timeline> </FlexItem> <FlexItem> <Timeline gap="md" orientation="vertical" > <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" lineStyle="dotted" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> </Timeline> </FlexItem> <FlexItem> <Timeline gap="lg" orientation="vertical" > <Timeline.Item icon="user" iconColor="royal" > <Body color="light" text="Conversation started" /> </Timeline.Item> <Timeline.Item icon="check" iconColor="teal" lineStyle="dotted" > <Body color="light" text="Trip #12422" /> </Timeline.Item> <Timeline.Item icon="credit-card" iconColor="red" > <Body color="light" text="Refund issue #12422" /> </Timeline.Item> </Timeline> </FlexItem> </Flex> </div> ) export default TimelineWithGap