Slots et projection de contenu

Un composant Button rend un bouton. Un composant Card rend une card. Mais qu'est-ce qui va à l'intérieur de la card ? Le composant Card ne sait pas. Il ne devrait pas savoir. Le parent qui utilise <Card> décide quel contenu va à l'intérieur.

C'est la projection de contenu. En FLIN, c'est à la fois {props.children} pour les cas simples et <slot> pour les mises en page avancées.

Slots par défaut, slots nommés, contenu de repli

flin// Modal.flin
<div class="modal">
    <div class="modal-header">
        <slot name="header">
            <Text weight="bold">Modal</Text>
        </slot>
    </div>
    <div class="modal-body">
        <slot />
    </div>
    <div class="modal-footer">
        <slot name="footer">
            <Button click={props.onClose}>Close</Button>
        </slot>
    </div>
</div>

// Utilisation
<Modal onClose={close_modal}>
    <slot:header>
        <Text size="lg" weight="bold">Confirmer la suppression</Text>
    </slot:header>
    <p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>
    <slot:footer>
        <Button click={close_modal}>Annuler</Button>
        <Button variant="danger" click={delete_item}>Supprimer</Button>
    </slot:footer>
</Modal>

La combinaison de la découverte sans import et de la composition basée sur les slots signifie que les composants FLIN se composent aussi naturellement que les éléments HTML.

Ceci est la partie 91 de la série "How We Built FLIN".

Navigation de la série : - [90] The Component Lifecycle - [91] Slots and Content Projection (vous êtes ici) - [92] Attribute Reactivity - [93] Theme Toggle and Dark Mode