Skip to content

Variable: PropertyVectorCard

const PropertyVectorCard: NamedExoticComponent\<PropertyVectorCardProps>

Render a property vector as a titled card with its state badge and control.

The technical detail line (raw INDI property name and permission) only shows when the surrounding DisplaySettingsProvider enables debug info; operators see just the human label by default.

The card is a labelled group and its title is a level-3 heading, which is what makes a panel of thirty cards navigable without a mouse: the heading list is the property list. The group's name is the title and the state badge, so "Exposure, Alert" arrives as one thing rather than as a title with a coloured shape floating near it. CardTitle renders a plain div, so the heading role is declared on it rather than by swapping the vendored primitive's element.

Memoised, because a device publishes thirty of these and a set frame changes one. PropertyStore merges immutably - a set replaces only the vector it touched and leaves every other reference alone - so the default shallow compare is exactly the right test and re-rendering is confined to the card that moved.

Param

props

The vector and an optional class name.

Returns

The card element.