List Items - UIKit

📋

Composant List Items

Un composant flexible pour afficher des listes d'items avec plusieurs lignes d'information. Idéal pour des listes de meetings, tâches, notifications, etc.

1. Liste de base

Une liste simple avec titre, métadonnées et badges. Parfait pour afficher des meetings ou événements.

100th GRECO Plenary

116 REC

05/06/2025 - 8:48 - 08:17:45

ITEM G03 - coemmedia+g03@gmail.com

Weekly Team Meeting

06/06/2025 - 10:00 - 01:00:00

TEAM - team@company.com

Client Presentation

12 LIVE

06/06/2025 - 14:30 - 02:15:30

SALES - sales@company.com

<div class="list-container">
    <div class="list-item">
        <div class="list-item-header">
            <h4 class="list-item-title">100th GRECO Plenary</h4>
            <div class="list-item-badges">
                <span class="badge badge-primary">116</span>
                <span class="badge badge-danger">REC</span>
            </div>
        </div>
        <div class="list-item-meta">05/06/2025 - 8:48 - 08:17:45</div>
        <div class="list-item-account">ITEM G03 - coemmedia+g03@gmail.com</div>
    </div>
</div>
            

2. Items cliquables

Ajoute la classe clickable pour rendre les items interactifs avec effet hover.

Meeting cliquable

07/06/2025 - 9:00 - 01:00:00

Cliquez pour voir les détails

Meeting sélectionné

ACTIVE

07/06/2025 - 11:00 - 00:45:00

Item actuellement sélectionné

<div class="list-item clickable">
    <!-- Contenu -->
</div>

<div class="list-item clickable selected">
    <!-- Item sélectionné -->
</div>
            

3. États visuels

Utilise les classes error, warning ou success pour indiquer des états.

Meeting terminé avec succès

COMPLETED

05/06/2025 - 9:00 - 01:00:00

Tous les objectifs atteints

Meeting à vérifier

PENDING

05/06/2025 - 14:00 - 00:30:00

Nécessite une action

Meeting annulé

CANCELLED

05/06/2025 - 16:00 - 00:45:00

Raison : conflit d'horaire

4. Items avec actions

Ajoute des boutons d'action avec list-item-actions.

Strategy Planning Session

08/06/2025 - 10:00 - 02:00:00

EXEC - executives@company.com

Product Demo

CONFIRMED

08/06/2025 - 15:00 - 01:00:00

SALES - demo@company.com

<div class="list-item">
    <div class="list-item-header">...</div>
    <div class="list-item-meta">...</div>
    <div class="list-item-account">...</div>
    <div class="list-item-actions">
        <button class="btn btn-sm">Modifier</button>
        <button class="btn btn-sm btn-danger">Annuler</button>
    </div>
</div>
            

5. Items avec icônes

Utilise list-item-with-icon pour ajouter une icône ou avatar.

📹

Video Conference

LIVE

05/06/2025 - 14:00 - 01:30:00

VIDEO - video@company.com

📞

Phone Call

05/06/2025 - 16:00 - 00:15:00

SUPPORT - support@company.com

✉️

Email Discussion

PENDING

05/06/2025 - 17:00 - 00:30:00

MAIL - mail@company.com

6. Version compacte

Ajoute la classe compact pour une version plus condensée.

Quick Sync

09/06/2025 - 9:00 - 00:15:00

TEAM - team@company.com

Daily Standup

ACTIVE

09/06/2025 - 9:15 - 00:15:00

DEV - dev@company.com

Coffee Break

OPTIONAL

09/06/2025 - 10:30 - 00:15:00

ALL - everyone@company.com

7. État vide

Affiche un message quand la liste est vide avec list-empty.

📭

Aucun meeting programmé

<div class="list-container">
    <div class="list-empty">
        <div class="list-empty-icon">📭</div>
        <div>Aucun meeting programmé</div>
    </div>
</div>
            

✓

Composant flexible et personnalisable

Combine les différentes options pour créer exactement l'interface dont tu as besoin. Le composant est responsive et s'adapte automatiquement aux petits écrans.

List Items Component