1.4.3 • Published 5 months ago

@justeattakeaway/pie-divider v1.4.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 months ago

@justeattakeaway/pie-divider

Source Code | Design Documentation | NPM

@justeattakeaway/pie-divider is a Web Component built using the Lit library. It offers a customizable divider element for visual separation of content.

Table of Contents

Installation

Installation

To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

Properties

PropTypeDescriptionDefault
variant"default", "inverse"Sets the variant of the divider."default"
labelstringThe label text for the divider. Label is only available for the horizontal variant.""
orientation"horizontal", "vertical"Sets the orientation of the divider."horizontal"

Slots

This component does not expose any slots.

CSS Variables

This component does not expose any CSS variables for style overrides.

Events

This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Usage Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/divider.js';
<pie-divider orientation="horizontal" label="OR"></pie-divider>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/divider.js';

<pie-divider orientation="horizontal" label="OR"></pie-divider>

For React Applications:

import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';

<PieDivider orientation="horizontal" label="OR" />

Questions and Support

If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.

1.2.0

9 months ago

1.2.1

8 months ago

1.1.0

10 months ago

1.0.0

12 months ago

1.4.3

5 months ago

1.4.2

5 months ago

1.4.1

5 months ago

1.4.0

5 months ago

1.3.1

7 months ago

1.3.0

7 months ago

0.14.1

1 year ago

0.14.2

1 year ago

0.14.0

1 year ago

0.13.6

1 year ago

0.13.7

1 year ago

0.13.8

1 year ago

0.13.9

1 year ago

0.13.5

1 year ago

0.13.4

1 year ago

0.13.3

2 years ago

0.13.2

2 years ago

0.13.1

2 years ago

0.13.0

2 years ago

0.12.4

2 years ago

0.12.3

2 years ago

0.12.2

2 years ago

0.12.1

2 years ago

0.12.0

2 years ago

0.11.0

2 years ago

0.10.2

2 years ago

0.10.1

2 years ago

0.10.0

2 years ago

0.9.3

2 years ago

0.9.2

2 years ago

0.9.2-next.0

2 years ago

0.9.1

2 years ago

0.9.0

2 years ago

0.8.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.5.0

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago