@licuido-ui/ui_time-line v2.0.1

TimeLine

The timeline displays a list of events in chronological order.

Author

• @author Henry Dyson J henry@crayond.co

Link

Story Book Link Time line

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui//ui_time-line

Import component

import { TimeLine } from '@licuido-ui//ui_time-line';

Usage

<TimeLine timeLineData={[]} />

Image

Sample Code

<TimeLine
  variation2={false}
  rootStyle={{}}
  timeLinePosition={'right'}
  TimelineConnectorColor={''}
  TimelineConnectorWidth={2}
  TimelineDotProfileUrlHeight={24}
  TimelineDotProfileUrlWidth={24}
  TimelineDotProfileUrlRadius={1}
  TimelineDotVariant={'filled'}
  TimelineDotHeight={1.2}
  TimelineDotWidth={1.2}
  TimelineDotColor={'#929292'}
  TimelineDotBorder={''}
  profileUrlHeight={24}
  profileUrlWidth={24}
  profileUrlRadius={5}
  cardWidth={0}
  cardMinWidth={212}
  cardMaxWidth={0}
  cardMaxHeight={0}
  cardMinHeight={130}
  cardHeight={0}
  CardBackground={'#FFFFFF'}
  CardHoverStyle={{}}
  CardStyle={{}}
  hoverBorderStyle={''}
  hoverBgColor={'#EEEE'}
  text1Size={10}
  text1Color={'#929292'}
  text2Size={12}
  text2Color={'#3B3B3B'}
  text3Size={10}
  text3Color={'#929292'}
  text1Styles={{}}
  text2Styles={{}}
  text3Styles={{}}
  handleClick={() => false}
  profileComponentContainer={{}}
  timeLineData={[
  {
      id: 1,
      text1: '18 Mins ago',
      text2: 'Elit convallis',
      text3: 'invited you',
      profileComponent: '',
        profileUrl:
          'https://cdna.artstation.com/p/assets/images/images/053/054/138/large/avetetsuya-studios-alien.jpg?1661309922',
    },
    {
      id: 2,
      text1: '18 Mins ago',
      text2:
        'Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh.',
      text3: '',
      profileComponent: '',
      profileUrl:
        'https://cdna.artstation.com/p/assets/images/images/053/054/138/large/avetetsuya-studios-alien.jpg?1661309922',
    },]}
/>

Props