Property
A component used to show key/value data in a consistent manner.
A Property
can be used to format different kinds of data throughout your app.
It can be used in cards, lists, etc.
Source
Theme source
@saas-ui/property
- 2.10.0 (latest)
Import
PropertyList
: Render a list of properties.Property
: The wrapper component that handles default composition.PropertyLabel
: The property label.PropertyValue
: The property value.
import {PropertyList,Property,PropertyLabel,PropertyValue,} from '@saas-ui/react'
Usage
Basic Property
import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'function BasicProperty() {return (<Property><PropertyLabel>Name</PropertyLabel><PropertyValue>Elliot Alderson</PropertyValue></Property>)}
Label width
Label text will be truncated if it doesnt fit.
The default width is 30%
with a min-width of 100px
. When you set a width, the min-width will be ignored.
import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'export default function PropertyLabelWidth() {return (<Property><PropertyLabel width="40px">Billing plan</PropertyLabel><PropertyValue>Professional</PropertyValue></Property>)}
Property with icon
import { Property, PropertyLabel, PropertyValue } from '@saas-ui/react'import { FiMail } from 'react-icons/fi'export default function PropertyWithIcon() {return (<Property><PropertyLabel width="24px"><FiMail /></PropertyLabel><PropertyValue>hello@saas-ui.dev</PropertyValue></Property>)}
Property list
import {PropertyList,Property,PropertyLabel,PropertyValue,} from '@saas-ui/react'export default function List() {return (<PropertyList><Property><PropertyLabel>Name</PropertyLabel><PropertyValue>Elliot Alderson</PropertyValue></Property><Property><PropertyLabel>Role</PropertyLabel><PropertyValue>Hacker</PropertyValue></Property><Property><PropertyLabel>Birthday</PropertyLabel><PropertyValue>September 17, 1986</PropertyValue></Property></PropertyList>)}
Property card
import {Card,CardHeader,CardBody,Heading,Button,Text,Box,Progress,Spacer,} from '@chakra-ui/react'import { PropertyList, Property } from '@saas-ui/react'export default function PropertyCard() {return (<Card><CardHeader display="flex" flexDirection="row"><Heading size="sm">Billing details</Heading><Spacer /><Button colorScheme="green" variant="solid">Upgrade</Button></CardHeader><CardBody><PropertyList><Propertylabel="Billing plan"value={<Text fontWeight="bold">Professional</Text>}/><Property label="Billing period" value="Yearly" /><Property label="Renewal date" value="01-01-2023" /><Propertylabel="Users"value={<Box flex="1"><Text fontSize="sm">20/100</Text>{' '}<Progressvalue="20"size="xs"colorScheme="primary"borderRadius="full"/></Box>}/><Property label="Price" value="€1250,-" /></PropertyList></CardBody></Card>)}
Editable property
import { Editable, EditablePreview, EditableInput } from '@chakra-ui/react'import {PropertyList,Property,Select,SelectButton,SelectList,SelectOption,} from '@saas-ui/react'export default function Editable() {return (<PropertyList><Propertylabel="Name"value={<Editable defaultValue="Eelco" width="200px"><EditablePreviewdisplay="flex"alignItems="center"px="3"fontSize="sm"w="full"minH="8"_hover={{ bg: 'gray.100', borderRadius: 'md', cursor: 'pointer' }}_dark={{_hover: {bg: 'whiteAlpha.100',},}}/><EditableInput size="xs" /></Editable>}/><Propertylabel="Status"value={<Select value="Open"><SelectButton width="200px" size="md" variant="ghost" /><SelectList><SelectOption value="Open">Open</SelectOption><SelectOption value="Closed">Closed</SelectOption></SelectList></Select>}/></PropertyList>)}
Was this helpful?