SusToolbar

Горизонтальная tool-полоса — title + слоты prepend / default / append.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Title	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model
Color	Prop<string>	"surface"	v-model
Flat	Prop<bool>	false	v-model

Слоты

Имя
prepend
(по умолчанию)
append

События

Публичных событий нет.

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• sus-slot
• sus-toolbar
• sus-toolbar__append
• sus-toolbar__content
• sus-toolbar__prepend
• sus-toolbar__title
• sus-toolbar--danger
• sus-toolbar--density-comfortable
• sus-toolbar--density-compact
• sus-toolbar--flat
• sus-toolbar--info
• sus-toolbar--primary
• sus-toolbar--secondary
• sus-toolbar--success
• sus-toolbar--surface
• sus-toolbar--warning

Использование

var bar = new SusToolbar();
bar.Title.Value = "Inventory";
bar.Color.Value = "surface";
bar.Density.Value = "default";

var filter = new SusButton();
filter.Text.Value = "Filter";
filter.Variant.Value = "tonal";
filter.Size.Value = "small";
bar.Slot("append")?.Add(filter);

<template>
  <sus:SusToolbar Title="Inventory"
                  Color="surface"
                  Density="default"
                  :Flat="Flat.Value">
    <template #prepend>
      <sus:SusButton Icon="menu" Variant="text" Size="small" />
    </template>
    <template #append>
      <sus:SusButton Text="Filter" Variant="tonal" Size="small" />
    </template>
  </sus:SusToolbar>
</template>

<script>
public Prop<bool> Flat = new(false);
</script>

Prop	Role
Title	Подпись в полосе контента
Density	default · compact · comfortable
Color	primary · secondary · success · danger · warning · info · surface
Flat	Скрыть нижнюю границу

Заметки

• Более лёгкий сосед SusAppBar — без Prominent / Absolute / extension.
• В C# предпочитайте Slot("prepend"|"append"|"default") для действий и inline-контента.