Skip to content

Latest commit

 

History

History
333 lines (216 loc) · 9.49 KB

list-item.md

File metadata and controls

333 lines (216 loc) · 9.49 KB
Raw

ListItem

Source

The items in a list to display related data in a structured format. Should be used inside of a List component.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { ListItem } from 'chayns-components';

// ...

<ListItem {...} />

Props

The ListItem-component takes the following props:

Name Type Default Required
title ReactNode | Array<ReactNode> ✓
subtitle ReactNode | Array<ReactNode>
image string
images Array<string>
openImageOnClick boolean false
icon string | object
className string
onClick function
right ReactNode | Array<ReactNode>
style { head: { [key: string]: string | number }, body: { [key: string]: string | number } }
headerProps object
circle boolean false
hoverItem ReactNode
onLongPress function
onMouseDown function
onMouseMove function
onMouseUp function
onTouchStart function
onTouchMove function
onTouchEnd function
onTouchCancel function
longPressTimeout number 450
noContentClass boolean
onOpen function
imageBorderColor string 'rgba(var(--chayns-color-rgb--009), .08)'
headMultiline boolean false

title

title: ReactNode | Array<ReactNode>;

A string or ReactNode that will be rendered as the title of the list item.

subtitle

subtitle?: ReactNode | Array<ReactNode>

A string or ReactNode that will be rendered as the subtitle of the list item.

image

image?: string

The URL to an image that will be shown on the left of the list item.

images

images?: Array<string>

An array of URLs for creating a puzzle of images on the left hand of the image item.

openImageOnClick

openImageOnClick?: boolean

Whether the image/images should be opened at full size when clicked only works if either image or images is defined

icon

icon?: string | object

An icon to show on the left side of the list item.

className

className?: string

A classname string that will be applied ot the outer-most <div>-element of the list item.

onClick

onClick?: function

An onClick-listener for the list item header.

right

right?: ReactNode | Array<ReactNode>

A ReactNode that should be displayed on the right side of the list item.

style

style?: { head: { [key: string]: string | number }, body: { [key: string]: string | number } }

A React style object that will be applied to the outer-most <div>-element of the list item. style.body and style.head will be applied to the body and head parts of the list item accordingly.

headerProps

headerProps?: object

Any additional props that will be applied to the head of the list item.

circle

circle?: boolean

Wether the image should be in a circular shape rather than a rectangle.

hoverItem

hoverItem?: ReactNode

A ReactNode that is shown on the right side of the list item on hover.

onLongPress

onLongPress?: function

This function will be called when the user long-presses on the list item header.

onMouseDown

onMouseDown?: function

A callback for the mousedown-event on the list item header.

onMouseMove

onMouseMove?: function

A callback for the mousemove-event on the list item header.

onMouseUp

onMouseUp?: function

A callback for the mouseup-event on the list item header.

onTouchStart

onTouchStart?: function

A callback for the touchstart-event on the list item header.

onTouchMove

onTouchMove?: function

A callback for the touchmove-event on the list item header.

onTouchEnd

onTouchEnd?: function

A callback for the touchend-event on the list item header.

onTouchCancel

onTouchCancel?: function

A callback for the touchcancel-event on the list item header.

longPressTimeout

longPressTimeout?: number

Control the time after which a press is considered a long press.

noContentClass

noContentClass?: boolean

Whether the default classname for the children container should be removed, which removes the padding around the list item content.

onOpen

onOpen?: function

This function will be called when the list item is opening.

imageBorderColor

imageBorderColor?: string

A CSS color that will be applied to the border of the image.

headMultiline

headMultiline?: boolean

Whether the head of the list item should be multiline or ellipsis in expanded state