@leafygreen-ui/pipeline
LeafyGreen UI Kit Pipeline
Last updated 2 months ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/pipeline 
SYNC missed versions from official npm registry.

Pipeline

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/pipeline

NPM

npm install @leafygreen-ui/pipeline

Example

<Pipeline size="xsmall" className="my-pipeline">
  <Stage>$match</Stage>
  <Stage>$addFields</Stage>
  <Stage>$limit</Stage>
</Pipeline>

Output HTML

<div data-leafygreen-ui="pipeline" class="leafygreen-ui-1hmty9x my-pipeline">
  <ol data-leafygreen-ui="pipeline-stages" class="leafygreen-ui-7mx6fb">
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk"
      data-stage-visible="true"
    >
      $match
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk leafygreen-ui-pipeline-stage--last-visible"
      data-stage-visible="true"
    >
      $addFields
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
    <li
      data-leafygreen-ui="pipeline-stage"
      class="leafygreen-ui-11gdvjk"
      data-stage-visible="false"
    >
      $limit
      <div
        data-leafygreen-ui="pipeline-stage-chevron"
        class="leafygreen-ui-pglvth"
      />
    </li>
  </ol>
  <div data-leafygreen-ui="pipeline-counter" class="leafygreen-ui-1iicq0p">
    <div
      data-leafygreen-ui="pipeline-counter-chevron"
      class="leafygreen-ui-18yu2oo"
    />
  </div>
</div>

Properties

Prop Type Description Default
className string Adds a className to the class attribute. ''
children node The content that will render inside of the component. If any nodes other than Stage components are passed in as children, the Pipeline component will automatically wrap them with Stage components. undefined
size 'xsmall' | 'small' | 'normal' | 'large' Sets the size variant of the Pipeline. 'xsmall'
... native li attributes Any other props will be spread on the root li element

All other props will be spread onto the root element.

Stage

Properties

Prop Type Description Default
className string Adds a className to the class attribute. ''
children node The content that will render inside of the component. undefined
intersectionNode React.Element The DOM element to observe intersections with. When used with the Pipeline component, this prop is automatically set to the element rendered by the Pipeline. window
threshold number Either a single number or an array of numbers which indicate at what percentage of the target's visibility, the observer's callback should be executed. 0.8
size string Sets the size variant of the Pipeline. Valid sizes are: 'xsmall'| 'small'| 'normal'| 'large' 'xsmall'

All other props will be spread onto the root element. The Pipeline component will also decorate the child Stage components with the size prop that it is supplied with.

Current Tags

  • 2.1.1                                ...           latest (2 months ago)

13 Versions

  • 2.1.1                                ...           2 months ago
  • 2.1.0                                ...           2 months ago
  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           3 months ago
  • 1.0.8                                ...           4 months ago
  • 1.0.7                                ...           4 months ago
  • 1.0.6                                ...           5 months ago
  • 1.0.5                                ...           5 months ago
  • 1.0.4                                ...           5 months ago
  • 1.0.3                                ...           6 months ago
  • 1.0.2                                ...           7 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 26
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |