@jouwomgeving/ui-list NPM | npm.io

3.0.1 • Published 1 year ago

Install

Weekly downloads

28

License

UNLICENSED

Repository

Last release

1 year ago

ui-list

Usage

import React from 'react';
import * as List from '@jouwomgeving/ui-list';

function Layout() {
  return (
    <List.Container>
      <List.Row>
        <List.Cell>
          Header
        </List.Cell>
      </List.Row>
      <List.Delimiter />
      <List.Row>
        <List.Cell
          width="120px"
          weight="0"
        >
          Column 1
        </List.Cell>
        <List.Cell>
          Column 2
        </List.Cell>
      </List.Row>
      <List.Delimiter type="secondary" />
      <List.Row>
        <List.Cell
          width="120px"
          weight="0"
        >
          Column 1
        </List.Cell>
        <List.Cell>
          Column 2
        </List.Cell>
      </List.Row>
      <List.Delimiter type="secondary" />
    </List.Container>
  )
}

export default Layout;

Container

About

Basic container for ui-list, this exist just for the document structure of this project, so it will behave like a real list in the document.

PropTypes

Props	Values	Default	Required
children	ReactElement		Yes

Delimiter

About

The Delimiter for the list components, this supports the two kinds of JO Delimiters; 1. Primary 2. Secondary

PropTypes

Props	Values	Default	Required
type	primary, secondary	primary	No

Row

About

A wrapper which creates a full accessible row for the ui-list package.

The component also exposes some event handlers:

onSelect | onDeselect
Will be triggered when there is a select or deselect event happening, this can be controlled with the selected property.
onHover
This can be used to listen to hover events within the component.
onFocus This can be used to listen to focus events within the component.
onClick The normal onClick handler

PropTypes

Props	Values	Default	Required
children	ReactElement		Yes
onSelect	function		No
onDeselect	function		No
selected	boolean		No
onHover	function		No
onFocus	function		No
onClick	function		No

Cell

About

A Cell for usage within the Row component.

PropTypes

Props	Values	Default	Required
children	ReactElement		Yes
size	CSS unit	100%	Yes
weight	0, 1, 2	1	Yes
vertical	top, center, bottom	top	No

@jouwomgeving/ui-form @jouwomgeving/ui-avatar

1 year ago

1 year ago

3 years ago

3 years ago

3 years ago

3 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

1.0.1-alpha.e781bb8c

8 years ago

8 years ago

8 years ago

0.0.1-alpha.28c4eb24

8 years ago

0.0.1-alpha.fe9d0183

8 years ago

0.0.1-alpha.43023f3f

8 years ago

0.0.1-alpha.77247233

8 years ago

0.0.1-alpha.19ce49d2

8 years ago

0.0.1-alpha.5e42e7ac

8 years ago

0.0.1-alpha.3155ade1

8 years ago

0.0.1-alpha.a2e0952c

8 years ago

0.0.1-alpha.f0d6bf8d

8 years ago

0.0.1-alpha.d0907d09

8 years ago

0.0.1-alpha.a97c8c0e

8 years ago

0.0.1-alpha.413ebe41

8 years ago

0.0.1-alpha.a1026d9e

8 years ago

0.0.1-alpha.9cb74244

8 years ago

0.0.1-alpha.b0f9af8c

8 years ago

0.0.1-alpha.65a9fb6d

8 years ago

0.0.1-alpha.09865e54

8 years ago

0.0.1-alpha.6625dcef

8 years ago

0.0.1-alpha.dd263a31

8 years ago

0.0.1-alpha.0a419f5c

8 years ago

0.0.1-alpha.cc06f6d1

8 years ago

0.0.1-alpha.9700e6b7

8 years ago

0.0.1-alpha.6ac8ec77

8 years ago

0.0.1-alpha.402245b2

8 years ago

0.0.1-alpha.d13b9431

8 years ago

0.0.1-alpha.4a84b4c9

8 years ago

0.0.1-alpha.ccd31e2d

8 years ago

0.0.1-alpha.710460a7

8 years ago

0.0.1-alpha.c2804b05

8 years ago

0.0.1-alpha.2dd5997e

8 years ago

0.0.1-alpha.05080e21

8 years ago

0.0.1-alpha.a99ca140

8 years ago

0.0.1-alpha.7e770c6b

9 years ago

0.0.1-alpha.d06de809

9 years ago

0.0.1-alpha.2135edaa

9 years ago

0.0.1-alpha.1f3d7bbe

9 years ago

0.0.1-alpha.c0331752

9 years ago

0.0.1-alpha.c9e6ffaf

9 years ago

0.0.1-alpha.f7711be2

9 years ago

0.0.1-alpha.2ad65bcf

9 years ago

0.0.1-alpha.c540fc9a

9 years ago

0.0.1-alpha.e6929997

9 years ago

0.0.1-alpha.f19605ca-alpha.d00a59aa

9 years ago

0.0.1-alpha.f19605ca

9 years ago

0.0.1-alpha.c64964d1

9 years ago

0.0.1-alpha.23b9ea74

9 years ago

0.0.1-alpha.d883595a

9 years ago

0.0.1-alpha.ba844123

9 years ago

0.0.1-alpha.4adc3daf

9 years ago

0.0.1-alpha.df8e9ace

9 years ago

0.0.1-alpha.9f89f48a

9 years ago

0.0.1-alpha.5ffe785b

9 years ago

0.0.1-alpha.aeba4fc0

9 years ago

9 years ago

0.0.1-alpha.6c50c73c

9 years ago

0.0.1-alpha.cbb988d6

9 years ago

0.0.1-alpha.de4d1e08

9 years ago

0.0.1-alpha.3f2ac2a2

9 years ago

0.0.1-alpha.fc056251

9 years ago

0.0.1-alpha.0ffb8cc3

9 years ago

0.0.1-alpha.0f6db0b8

9 years ago

0.0.1-alpha.17ce3a35

9 years ago

0.0.1-alpha.8cca619b

9 years ago

0.0.1-alpha.345f02d9

9 years ago

0.0.1-alpha.edda282c

9 years ago

0.0.1-alpha.a976b92b

9 years ago

0.0.1-alpha.7b489a17

9 years ago

0.0.1-alpha.a5c9be92

9 years ago

0.0.1-alpha.596db516

9 years ago

0.0.1-alpha.88dae801

9 years ago

0.0.1-alpha.2256f13a

9 years ago

0.0.1-alpha.423dbde7

9 years ago

0.0.1-alpha.be832e38

9 years ago

0.0.1-alpha.66842441

9 years ago

0.0.1-alpha.9f8ca493

9 years ago

0.0.1-alpha.d26166cf

9 years ago

0.0.1-alpha.2d0be568

9 years ago

0.0.1-alpha.d11cf6d2

9 years ago

0.0.1-alpha.e81a9ee0

9 years ago

0.0.1-alpha.3cab2b43

9 years ago

0.0.1-alpha.bad133db

9 years ago

0.0.1-alpha.3f0f8e53

9 years ago

0.0.1-alpha.5ddf3c44

9 years ago

0.0.1-alpha.a9bb6472

9 years ago

0.0.1-alpha.e3c2ef5e

9 years ago

0.0.1-alpha.bf7a9298

9 years ago

0.0.1-alpha.532647f7

9 years ago

0.0.1-alpha.c7dd9778

9 years ago

0.0.1-alpha.e3046510

9 years ago

0.0.1-alpha.0bde5c2b

9 years ago

0.0.1-alpha.406ca721

9 years ago

0.0.1-alpha.55df3d80

9 years ago

0.0.1-alpha.0d838b77

9 years ago

0.0.1-alpha.499779ad

9 years ago

0.0.1-alpha.fec9980b

9 years ago

0.0.1-alpha.4c18d00c

9 years ago

0.0.1-alpha.6d44f4e7

9 years ago

0.0.1-alpha.3e129a50

9 years ago

0.0.1-alpha.b532edda

9 years ago

0.0.1-alpha.e2c616be

9 years ago

0.0.1-alpha.7da6ad9c

9 years ago

0.0.1-alpha.ef806f9c

9 years ago

0.0.1-alpha.b8293e98

9 years ago

0.0.1-alpha.0c44fa16

9 years ago

0.0.1-alpha.3c2eaec8

9 years ago

0.0.1-alpha.caecece5

9 years ago

0.0.1-alpha.14c3c699

9 years ago

0.0.1-alpha.54922617

9 years ago

0.0.1-alpha.5ed268a6

9 years ago

0.0.1-alpha.45a4fa31

9 years ago

0.0.1-alpha.2c5540b4

9 years ago

0.0.1-alpha.d224284e

9 years ago

0.0.1-alpha.02bfa1b8

9 years ago

0.0.1-alpha.977f75f5

9 years ago

0.0.1-alpha.c78b82cc

9 years ago

0.0.1-alpha.edd50df7

9 years ago

0.0.1-alpha.b0840b61

9 years ago

0.0.1-alpha.cbd2d357

9 years ago

0.0.1-alpha.0dbcf13f

9 years ago

0.0.1-alpha.1d4426e8

9 years ago

0.0.1-alpha.92691fe3

9 years ago

0.0.1-alpha.8727e00e

9 years ago

0.0.1-alpha.2043bf6e

9 years ago

0.0.1-alpha.9bc6812a

9 years ago

0.0.1-alpha.95954483

9 years ago

0.0.1-alpha.81fd6a97

9 years ago

0.0.1-alpha.8f1d1e41

9 years ago

0.0.1-alpha.a5eecef8

9 years ago

0.0.1-alpha.f2206543

9 years ago

0.0.1-alpha.9b57260a

9 years ago

0.0.1-alpha.f9f3c93a

9 years ago

0.0.1-alpha.da94108c

9 years ago

0.0.1-alpha.539874e0

9 years ago

0.0.1-alpha.9b5c0cd8

9 years ago

0.0.1-alpha.c0a56b6f

9 years ago

0.0.1-alpha.ef7bf050

9 years ago

0.0.1-alpha.c2964d11

9 years ago

0.0.1-alpha.33f54b45

9 years ago