Listes

Une list dessine une entrée par enregistrement, à partir d'un gabarit que vous déclarez. Tout ce qui touche à la présentation vit sous listDisplay ; ce qui est récupéré, et en quelle quantité, appartient à dataSource.

tables:
  - name: articles
    fields:
      - { name: title, type: single-line-text }
      - { name: published_at, type: datetime }
pages:
  - name: Articles
    path: /articles
    components:
      - type: list
        dataSource:
          table: articles
          sort: [{ field: published_at, direction: desc }]
          limit: 20
        listDisplay:
          itemTemplate:
            title: '$record.title'
            metadata: [{ field: published_at, format: relative-date }]
          loadMore: button

itemTemplate accepte title, subtitle, image, badge et metadata, où metadata est un tableau de { field, format } rendu dans le pied de l'entrée.

La pagination regarde la liaison, pas l'affichage

La taille de page vient de dataSource.limit : elle fixe combien d'enregistrements contient la première page, et chaque appui sur « Charger plus » ajoute une page de cette taille.

loadMore: button affiche le contrôle qui fait cet ajout. Sur une liaison dataSource.system, il n'apparaît que si cette liaison déclare aussi totalKey et que le point d'entrée y répond par un nombre — sans cela, le total rapporté est la longueur de la page elle-même, et il ne reste donc jamais rien à charger.

maxItems plafonne le nombre d'enregistrements que la liste dessine. Cela ne change pas ce qui est récupéré — une page est du transport, un plafond de l'affichage —, si bien qu'une liste arrivée à son plafond masque le contrôle « Charger plus » : tout ce que la page suivante apporterait serait coupé à l'arrivée. Pour récupérer moins d'enregistrements, réglez plutôt dataSource.limit.

Trois clés sont acceptées puis ignorées

Dit ici plutôt que laissé à la découverte : loadMore: infinite, highlight et divider n'ont aucun effet. Chacune se décode proprement et ne change rien, si bien qu'une liste déclarant loadMore: infinite pagine exactement comme une liste n'en déclarant aucune.

Elles sont documentées parce qu'une clé non lue est la configuration la plus difficile à déboguer : elle valide, elle s'affiche, et le comportement qu'elle nomme n'arrive jamais. S'il vous faut un défilement infini aujourd'hui, loadMore: button est ce qui existe.

Pages connexes

• Liaison de données — dataSource, ses filtres, ses tris et sa limit.
• Galeries — le même principe, en grille de cartes.