Item component

[rolfsmeds]

A component for creating the types of multi-text items typical in lists etc.

• Primary text (also supports slotting elements)
• Secondary text (configurable to be above or below primary text; also supports slotting elements)
• Prefix slot (e.g. for avatar or icon)
• Suffix slot (e.g. for a button or icon)

Example of Item with secondary text below, avatar prefix and button/icon in suffix:

DOM / semantic structure:

• Item root (generic role)
  • slot="prefix"
  • span : primary text
    • slot="primary-content"
  • span : secondary text
    • slot="secondary-content"
  • slot="suffix"

(Note that, although this component will typically be used in lists, it does not have list semantics on its own by default, as many other use cases are equally valid and useful. When used as list item, either apply role="listitem" manually or wrap in one.)

Open questions

Name: vaadin-item is already taken.

[knoobie]

How about vaadin-list-item like the corresponding "LI" stands for list item? :)

[web-padawan]

See also #459 where prefix / suffix slots for item were originally discussed.