Galeries

Une galerie dessine une carte par enregistrement. Elle se lie par le module dataSource partagé et n'a pas de clé pagination qui lui soit propre : le filtrage, le tri et la pagination appartiennent tous à la liaison.

tables:
  - name: products
    fields:
      - { name: name, type: single-line-text }
      - { name: photo, type: single-attachment }
pages:
  - name: Products
    path: /products
    components:
      - type: gallery
        dataSource: { table: products }
        gridColumns: { mobile: 1, md: 2, lg: 3 }
        layout: masonry
        galleryCard:
          coverImage: '$record.photo'
          aspectRatio: '4:3'
          children:
            - { type: text, element: h3, content: '$record.name' }

La carte

galleryCard est l'endroit où se déclare la forme propre d'une carte. coverImage est généralement une référence $record.* et aspectRatio prend un rapport comme 4:3, 16:9 ou 1:1. children sont les composants rendus dans le corps de la carte, et hoverOverlay: { children } se rend par-dessus la carte au survol. onClick est l'action qu'un clic sur la carte exécute.

Comme children est un arbre de composants ordinaire, une carte se compose avec les mêmes types qu'une page : un text pour le titre, un badge pour un statut, une description-list pour une suite de faits. $record.<champ> résout dans tous.

Pages connexes

• Liaison de données — dataSource, ses filtres, ses tris et sa pagination.
• Listes — le même principe, en suite verticale.
• Conception adaptative — les points de rupture que gridColumns reprend.