Skip to main content

List

img

Usage​

import React from 'react'
import { List, ListItem } from 'qdm-component-library'

function App() {
  return (
    <List>
      <ListItem
        title="QDM List Component"
        description="QDM Design, a design language for background applications, is refined by QDM Team"
        profile={
          <img
            alt="img"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfHRwXVNT_dDa2D2k3zJKqoUueCT9iMbDkaA&usqp=CAU"
          />
        }
        action={
          <img
            width="20px"
            height="20px"
            src="https://image.flaticon.com/icons/png/512/742/742751.png"
            alt="Contact Person"
          />
        }
      />
      <ListItem
        title="QDM List Component"
        description="QDM Design, a design language for background applications, is refined by QDM Team"
        profile={
          <img
            alt="img"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfHRwXVNT_dDa2D2k3zJKqoUueCT9iMbDkaA&usqp=CAU"
          />
        }
        action={
          <img
            width="20px"
            height="20px"
            src="https://image.flaticon.com/icons/png/512/742/742751.png"
            alt="Contact Person"
          />
        }
      />
    </List>
  )
}
export default App

Reference​

Props for List​

here all the list of Props you can use for List Component

id​

props to uniquely identify string

className​

props for adding classname string

name​

props for addding name attribute string

inLineStyles​

props for addding extra styling to the List component object

children​

props for providing children for List Component React Node

width​

props for providing width to the List Component number

height​

props for providing height to the List Component number

orientation​

props for providing orientation to the List Component 'horizontal'|'vertical'

listItemWidth​

props for providing listItemWidth to the List Item Component '100%' | number

marginVertical​

props for providing margin top and bottom to the list number

marginHorizontal​

props for providing margin left and right to the list number

paddingVertical​

props for providing padding top and bottom to the list number

paddingHorizontal​

props for providing padding left and right to the list number

Reference​

Props for ListItem​

id​

props to uniquely identify string

className​

props for adding classname string

name​

props for addding name attribute string

inLineStyles​

props for addding extra styling to the ListItem component object

children​

props for providing children for ListItem Component React Node

title​

props for providing title to ListItem Component string

description​

props for providing description to ListItem Component string

profile​

props for providing image or icon to ListItem Component to the left any

action​

props for providing image or icon to ListItem Component to the right any

marginVertical​

props for providing margin top and bottom to the listItem number

marginHorizontal​

props for providing margin left and right to the listItem number

paddingVertical​

props for providing padding top and bottom to the listItem number

paddingHorizontal​

props for providing padding left and right to the listItem number