4. Слоты

Слоты позволяют родительскому компоненту оставлять пустые места для контента, который вставляет потребитель (consumer).

Именованные слоты

Родитель (Card.sharq):

<template>
<ui:VisualElement $MainElement class="card">
    <slot name="header" />
    <ui:VisualElement class="card__body">
        <slot /> <!-- default — slot without name -->
    </ui:VisualElement>
    <slot name="footer" />
</ui:VisualElement>
</template>

Потребитель:

<sus:Card>
    <!-- v-slot:header → falls into <slot name="header"> -->
    <template v-slot:header>
        <ui:Label text="Card Header" style="font-size: 18px;" />
    </template>

    <!-- Without v-slot → falls into <slot /> (default) -->
    <ui:Label text="Main content goes here" />

    <!-- v-slot:footer → hits <slot name="footer"> -->
    <template v-slot:footer>
        <sus:SusButton text="OK" />
    </template>
</sus:Card>

SlotPropMap

public class SlotPropMap : Dictionary<string, object>
{
    // Passes data from the parent slot to the consumer
}

Как это работает

Компилятор генерирует в родительском компоненте:

var __slot_header = GetSlotContainer("header");
this.Add(__slot_header);
BuildSlot("header", null, __slot_header);

var __slot_default = GetSlotContainer("default");
this.Add(__slot_default);
BuildSlot("default", null, __slot_default);

В потребителе:

RegisterSlotContent("header", __el, null);

Стилизация контейнера слота

GetSlotContainer() возвращает настоящий VisualElement, который находится внутри элемента, оборачивающего <slot> в вашем шаблоне. У него два устойчивых USS-класса:

• sus-slot — у каждого контейнера слота;
• sus-slot--<name> — например, sus-slot--header, sus-slot--default.

Сам контейнер не задаёт собственную раскладку (по умолчанию в UI Toolkit: flex-direction: column). Поэтому обёртка с row-направлением раскладывает только этот один бокс — спроецированные дети всё равно выстраиваются вертикально. Повторите направление на самом контейнере:

.my-card__actions { flex-direction: row; align-items: center; }
.my-card__actions > .sus-slot { flex-direction: row; align-items: center; }

Никогда не полагайтесь здесь на селектор по типу (> VisualElement) — контракт задаёт именно класс.