components

WideList (code)

WideLists represent a set of WideListItems displayed in a way to organize related information.

Abonnementsnummer1108298

Naam abonneeFoo Bar

import { WideList } from '@mediahuis/chameleon-react'

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>

Props

WideList

Name	Type	Default	Required	Description
children	Node	-	-	Children displayed within the WideList (WideListItem).
elevation	01234	1	-	Controls the shadow of the WideList

System Props

m, mb, ml, mr, mt, mx, my

float

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

WideListItem

Name	Type	Default	Required	Description
action	Node	-	-	Contents displayed on the right. Will not be shown when clickable is also true.
avatar	String	-	-	Controls the Avatar's src prop.
avatarCircular	Boolean	-	-	Controls the Avatar's circular prop.
clickable	Boolean	-	-	If clickable is set to true the WideListItem will show a hover state.
description	Node	-	-	The text written under title.
iconLeft	FunctionNodeObject	-	-	Controls the as prop of the Icon on the left side.
iconRight	FunctionNodeObject	-	-	Controls the as prop of the Icon on the right side.
loading	Boolean	-	-	Show a loading state (e.g. while fetching data).
title	Node	-	-	The Text written at the top of the component.

System Props

m, mb, ml, mr, mt, mx, my

float

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Title

default: undefined

Title denotes the upper textual part of the item.

If a string is passed in as the property, it will get the default styling. To customize styling, you can pass in a Text component.

Abonnementsnummer1108298

Naam abonneeFoo Bar

Fancy titleHello world

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
  <WideListItem
    title={
      <Text
        fontFamily="primary"
        color="blueBase"
        fontWeight="bold"
        size="Heading4"
      >
        Fancy title
      </Text>
    }
    description="Hello world"
  />
</WideList>

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
  <WideListItem
    title={
      <Text
        fontFamily="primary"
        color="blueBase"
        fontWeight="bold"
        size="Heading4"
      >
        Fancy title
      </Text>
    }
    description="Hello world"
  />
</WideList>

Description

default: undefined

Description denotes the lower textual part of the item.

If a string is passed in as the property, it will get the default styling. To customize styling, you can pass in a Text component.

Abonnementsnummer1108298

Naam abonneeFoo Bar

Hello worldFancy description

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
  <WideListItem
    title="Hello world"
    description={
      <Text
        fontFamily="primary"
        color="blueBase"
        fontWeight="bold"
        size="Heading4"
      >
        Fancy description
      </Text>
    }
  />
</WideList>

<WideList>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
  <WideListItem
    title="Hello world"
    description={
      <Text
        fontFamily="primary"
        color="blueBase"
        fontWeight="bold"
        size="Heading4"
      >
        Fancy description
      </Text>
    }
  />
</WideList>

Action

default: undefined

This adds an action or extra information to your item.

Abonnementsnummer1108298

Link Text

Naam abonneeFoo Bar

<WideList>
  <WideListItem
    title="Abonnementsnummer"
    description="1108298"
    action={<LinkText>Link Text</LinkText>}
  />
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    action={<Tooltip label="This is a label" />}
  />
</WideList>

<WideList>
  <WideListItem
    title="Abonnementsnummer"
    description="1108298"
    action={<LinkText>Link Text</LinkText>}
  />
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    action={<Tooltip label="This is a label" />}
  />
</WideList>

Clickable

default: false

Indicates to the user that the item can be interacted with, e.g. pointing them to a new page.

Abonnementsnummer1108298

<WideList>
  <WideListItem
    title="Abonnementsnummer"
    description="1108298"
    clickable
    as="a"
    href="#test"
  />
</WideList>

<WideList>
  <WideListItem
    title="Abonnementsnummer"
    description="1108298"
    clickable
    as="a"
    href="#test"
  />
</WideList>

Avatar

default: undefined

Displays an avatar.

Naam abonneeFoo Bar

<WideList>
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    avatar="https://images.unsplash.com/photo-1502378735452-bc7d86632805?w=200"
  />
</WideList>

<WideList>
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    avatar="https://images.unsplash.com/photo-1502378735452-bc7d86632805?w=200"
  />
</WideList>

AvatarCircular

default: false

Make the avatar circular

Naam abonneeFoo Bar

<WideList>
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    avatar="https://images.unsplash.com/photo-1502378735452-bc7d86632805?w=200"
    avatarCircular={true}
  />
</WideList>

<WideList>
  <WideListItem
    title="Naam abonnee"
    description="Foo Bar"
    avatar="https://images.unsplash.com/photo-1502378735452-bc7d86632805?w=200"
    avatarCircular={true}
  />
</WideList>

IconLeft and IconRight

default: undefined

Add an icon to the WideListItem to clarify the values.

QueenWe Will Rock You

Black SabbathParanoid

MetallicaSeek and Destroy

<WideList>
  <WideListItem
    title="Queen"
    description="We Will Rock You"
    iconLeft={<Icon as={PodcastFill} color="primaryBase" />}
    iconRight={<Icon as={Add} />}
  />
  <WideListItem
    title="Black Sabbath"
    description="Paranoid"
    iconLeft={PodcastFill}
    iconRight={Add}
  />
  <WideListItem
    title="Metallica"
    description="Seek and Destroy"
    iconLeft={<PodcastFill />}
    iconRight={<Add />}
  />
</WideList>

<WideList>
  <WideListItem
    title="Queen"
    description="We Will Rock You"
    iconLeft={<Icon as={PodcastFill} color="primaryBase" />}
    iconRight={<Icon as={Add} />}
  />
  <WideListItem
    title="Black Sabbath"
    description="Paranoid"
    iconLeft={PodcastFill}
    iconRight={Add}
  />
  <WideListItem
    title="Metallica"
    description="Seek and Destroy"
    iconLeft={<PodcastFill />}
    iconRight={<Add />}
  />
</WideList>

Loading

default: false

Indicates to the user that the data to be displayed is being loaded.

<WideList>
  <WideListItem loading={true} />
</WideList>

<WideList>
  <WideListItem loading={true} />
</WideList>

Elevation

default: 1

Controls the elevation of the WideList container.

Abonnementsnummer1108298

Naam abonneeFoo Bar

Abonnementsnummer1108298

Naam abonneeFoo Bar

<WideList mb={6}>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>
<WideList elevation={3}>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>

<WideList mb={6}>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>
<WideList elevation={3}>
  <WideListItem title="Abonnementsnummer" description="1108298" />
  <WideListItem title="Naam abonnee" description="Foo Bar" />
</WideList>