SusAppBar

Верхняя полоса со слотами prepend / default / append (+ опциональный extension при Prominent).

Пакет

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

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

SusKit · Molecules

Свойства

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

Слоты

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

События

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

Хуки стиля

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

• sus-app-bar
• sus-app-bar__append
• sus-app-bar__content
• sus-app-bar__extension
• sus-app-bar__prepend
• sus-app-bar__row
• sus-app-bar__title
• sus-app-bar--absolute
• sus-app-bar--danger
• sus-app-bar--density-comfortable
• sus-app-bar--density-compact
• sus-app-bar--flat
• sus-app-bar--info
• sus-app-bar--primary
• sus-app-bar--prominent
• sus-app-bar--secondary
• sus-app-bar--success
• sus-app-bar--surface
• sus-app-bar--warning
• sus-slot

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

Default slot чаще всего содержит SusTabs; append — action chips / валюту.

var bar = new SusAppBar();
bar.Title.Value = "";
bar.Color.Value = "surface";
bar.Density.Value = "default";
bar.Flat.Value = true;

var tabs = new SusTabs();
tabs.Items.Value = new List<TabItem>
{
    new() { Title = "Gear", Value = "0" },
    new() { Title = "Bag", Value = "1" },
    new() { Title = "Vendor", Value = "2" },
};
tabs.Model.Value = "0";
bar.Slot("default")?.Add(tabs);

var chip = new SusChip();
chip.Label.Value = "Glimmer  1200";
chip.Variant.Value = "tonal";
bar.Slot("append")?.Add(chip);

<template>
  <sus:SusAppBar Title="Mission"
                 Color="primary"
                 Density="default"
                 :Flat="Flat.Value"
                 :Prominent="Prominent.Value">
    <template #prepend>
      <sus:SusButton Icon="menu" Variant="text" />
    </template>
    <template #append>
      <sus:SusChip Label="Shards  42" Variant="tonal" />
    </template>
  </sus:SusAppBar>
</template>

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

Prop	Role
Title	Подпись в полосе контента
Density	default · compact · comfortable
Color	primary · secondary · … · surface
Flat / Absolute / Prominent	Модификаторы вида / позиционирования

См. также Layout recipes.