A convenient way to group Item components together
The list component is meant to be used with the item component. Combined with its robust selection of slots and other Tecton elements, there are endless possibilities and combinations that you can create to display lists of content to your users. Here are a few examples:
<q2-list
label="Primary Accounts"
bordered
>
<q2-item>
<q2-avatar
slot="bullet"
src="/examples/logo.svg"
></q2-avatar>
<div slot="header">Family Account</div>
<q2-detail
label="Account Number"
description="xxxx-xxx-9538"
slot="body"
></q2-detail>
<q2-detail
label="Account type"
description="Checking"
slot="body"
></q2-detail>
<div slot="footer">
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Account Balance"
size="medium"
stacked
>
<q2-currency amount="3415.89"></q2-currency>
</q2-detail>
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Available Balance"
size="medium"
stacked
>
<q2-currency amount="3104.94"></q2-currency>
</q2-detail>
<q2-detail label="Last Updated">
<q2-relative-time
date="2024-12-10"
unit="day"
></q2-relative-time>
</q2-detail>
</div>
</q2-item>
<q2-item>
<q2-avatar
slot="bullet"
src="/examples/logo.svg"
></q2-avatar>
<div slot="header">Emergency Fund</div>
<q2-detail
label="Account Number"
description="xxxx-xxx-9424"
slot="body"
></q2-detail>
<q2-detail
label="Account type"
description="Savings"
slot="body"
></q2-detail>
<div slot="footer">
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Account Balance"
size="medium"
stacked
>
<q2-currency amount="17845.90"></q2-currency>
</q2-detail>
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Available Balance"
size="medium"
stacked
>
<q2-currency amount="17845.90"></q2-currency>
</q2-detail>
<q2-detail label="Last Updated">
<q2-relative-time
date="2024-12-10"
unit="day"
></q2-relative-time>
</q2-detail>
</div>
</q2-item>
<q2-item>
<q2-avatar
slot="bullet"
src="/examples/logo.svg"
></q2-avatar>
<div slot="header">Ford Focus</div>
<q2-detail
label="Account Number"
description="xxxx-xxx-0745"
slot="body"
></q2-detail>
<q2-detail
label="Account type"
description="Loan"
slot="body"
></q2-detail>
<q2-detail
label="APR"
description="7.4%"
slot="body"
></q2-detail>
<div slot="footer">
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Remaining Balance"
size="medium"
stacked
>
<q2-currency amount="12953.25"></q2-currency>
</q2-detail>
<q2-detail
class="mrg-y(3x)"
alignment="left"
label="Amount Due"
size="medium"
stacked
>
<q2-currency amount="440.50"></q2-currency>
</q2-detail>
</div>
</q2-item>
</q2-list><q2-list label="Messages">
<q2-item>
<div slot="header">You Got Paid</div>
<q2-detail
label="From"
description="Thrive Bank"
slot="body"
></q2-detail>
<q2-detail
slot="body"
label="Received"
>
<q2-relative-time
date="2024-12-15"
unit="day"
></q2-relative-time>
</q2-detail>
</q2-item>
<q2-item>
<div slot="header">Transfer Received</div>
<q2-detail
label="From"
description="Deborah Burrs"
slot="body"
></q2-detail>
<q2-detail
slot="body"
label="Received"
>
<q2-relative-time
date="2024-12-10"
unit="day"
></q2-relative-time>
</q2-detail>
</q2-item>
<q2-item>
<div slot="header">Payment Due</div>
<q2-detail
label="From"
description="Thrive Bank"
slot="body"
></q2-detail>
<q2-detail
slot="body"
label="Received"
>
<q2-relative-time
date="2024-12-10"
unit="day"
></q2-relative-time>
</q2-detail>
</q2-item>
</q2-list><q2-list label="Contacts">
<q2-item>
<q2-avatar
slot="bullet"
icon="person"
></q2-avatar>
<div slot="header">Maria Chen</div>
<q2-detail
label="Occupation"
description="Mountaintop Souvenirs"
slot="body"
></q2-detail>
<q2-dropdown
slot="action"
type="icon"
label="My dropdown"
icon="options"
popover-alignment="right"
hide-label
>
<q2-dropdown-item value="first">First</q2-dropdown-item>
<q2-dropdown-item value="second">Second</q2-dropdown-item>
<q2-dropdown-item value="third">Third</q2-dropdown-item>
</q2-dropdown>
</q2-item>
<q2-item>
<q2-avatar
slot="bullet"
icon="person"
></q2-avatar>
<div slot="header">Robert Thompson</div>
<q2-detail
label="Occupation"
description="Thompson Contracting"
slot="body"
></q2-detail>
<q2-dropdown
slot="action"
type="icon"
label="My dropdown"
icon="options"
popover-alignment="right"
hide-label
>
<q2-dropdown-item value="first">First</q2-dropdown-item>
<q2-dropdown-item value="second">Second</q2-dropdown-item>
<q2-dropdown-item value="third">Third</q2-dropdown-item>
</q2-dropdown>
</q2-item>
<q2-item>
<q2-avatar
slot="bullet"
icon="person"
></q2-avatar>
<div slot="header">Amanda Foster</div>
<q2-detail
label="Occupation"
description="Nurse"
slot="body"
></q2-detail>
<q2-dropdown
slot="action"
type="icon"
label="My dropdown"
icon="options"
popover-alignment="right"
hide-label
>
<q2-dropdown-item value="first">First</q2-dropdown-item>
<q2-dropdown-item value="second">Second</q2-dropdown-item>
<q2-dropdown-item value="third">Third</q2-dropdown-item>
</q2-dropdown>
</q2-item>
</q2-list>The q2-list element has one slot that can be used to insert custom content into the component.
An optional slot to display custom content for filtering the list items.
borderedAdds a border between each items
labellabel text on header area
This component uses other components in the Tecton library, including:
Other components in the Tecton library use this component, including:
q2-file-pickerThe following CSS variables are available to override the default theme styles of the q2-listcomponent.