SusButton

Основная кнопка действия — варианты, цвета, размеры, иконки, loading.

Пакет

SusKit · Атомы (коммерческий)

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Text	Prop<string>	""
Variant	Prop<string>	"elevated"
Color	Prop<string>	"primary"
Size	Prop<string>	"default"
Density	Prop<string>	"default"
PrependIcon	Prop<string>	""
AppendIcon	Prop<string>	""
Icon	Prop<string>	""
Disabled	Prop<bool>	false
Loading	Prop<bool>	false
Readonly	Prop<bool>	false
Active	Prop<bool>	false
Block	Prop<bool>	false
Stacked	Prop<bool>	false
Rounded	Prop<string>	"md"
Border	Prop<string>	""
Spaced	Prop<string>	""

Слоты

Имя
loader

События

Имя	Поле	Payload
Click	OnClick	—

Хуки стиля

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

• keyboard-focus
• sus-button
• sus-button__content
• sus-button__icon-wrap
• sus-button__icon-wrap--append
• sus-button__icon-wrap--prepend
• sus-button__label
• sus-button__loader
• sus-button--active
• sus-button--block
• sus-button--border-lg
• sus-button--border-md
• sus-button--border-sm
• sus-button--border-xl
• sus-button--border-xs
• sus-button--color-danger
• sus-button--color-info
• sus-button--color-primary
• sus-button--color-secondary
• sus-button--color-success
• sus-button--color-warning
• sus-button--density-comfortable
• sus-button--density-compact
• sus-button--disabled
• sus-button--elevated
• sus-button--flat
• sus-button--icon-only
• sus-button--loading
• sus-button--outlined
• sus-button--plain
• sus-button--readonly
• sus-button--rounded-0
• sus-button--rounded-circle
• sus-button--rounded-lg
• sus-button--rounded-md
• sus-button--rounded-pill
• sus-button--rounded-sm
• sus-button--rounded-xl
• sus-button--rounded-xs
• sus-button--size-default
• sus-button--size-lg
• sus-button--size-sm
• sus-button--size-xl
• sus-button--size-xs
• sus-button--spaced-both
• sus-button--spaced-end
• sus-button--spaced-start
• sus-button--stacked
• sus-button--text
• sus-button--tonal

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

<template>
  <sus:SusButton Text="Save"
                 Variant="elevated"
                 Color="primary"
                 PrependIcon="floppy-disk"
                 @click="OnSave" />
</template>

<script>
void OnSave() { /* … */ }
</script>

var btn = new SusButton();
btn.Text.Value = "Save";
btn.OnClick += () => { /* … */ };

Варианты

elevated · flat · tonal · outlined · text · plain

Цвета

primary · secondary · success · danger · warning · info