Your bookmarks

TripSegment / React

When you want to show info about each connection to user.

To implement TripSegment component into your project you’ll need import component itself and pass any other component you want as children.

import TripSegment from "@kiwicom/orbit-components/lib/TripSegment";

// e.g. List component
import List from "@kiwicom/orbit-components/lib/List";
import ListItem from "@kiwicom/orbit-components/lib/List/ListItem";

After adding import into your project you can use it simply like:

    <ListItem>Hello, World!</ListItem>
    <ListItem>Lorem Ipsum</ListItem>


Table below contains all types of the props available in TripSegment component.

Name Type Default Description
arrival Translation The arrival city name and short code.
arrivalTime Translation The arrival time.
carrier Carrier It’s used to render proper icon in the Milestone, by Carrier type. See Carrier type
children React.Node The content of the component.
departure Translation The departure city and short code.
departureTime Translation The departure time.
duration Translation The flight duration.
initialExpanded boolean false If true, the children will be displayed by default.
onClick () => void | Promise Function for handling onClick event.
tabIndex string "0" Specifies the tab order of an element