Кнопки - ecvento/Material.Avalonia-Wiki GitHub Wiki

Обычные кнопки

обычные кнопки

Светлая кнопка (Light)

<Button Classes="Light" Content="Light" />

Средняя кнопка (по цвету) (mid)

<Button Content="Mid (Default)" />

В данном случае значение Classes="Mid" не выставлялось, так как оно используется по умолчанию

Темная кнопка

<Button Classes="Dark" Content="Dark" />

Кнопка с акцентом на определенный цвет

<Button Classes="Accent" Content="Accent" />

Примечание - параметр secondary color в app.axaml будет вашим цветом акцента

Кнопка с закругленными углами

<Button Content="Custom corner radius"
   CornerRadius="16" />

Примечание - для полностью закругленной кнопки вам необходимо указать в параметре CornerRadius значение равное половине высоты кнопки

Кнопка с контуром

кнопка с контуром

Что бы сделать такие кнопки нам необходимо добавить к параметру имени класса слово "Outline", что бы получилось имя класса, аналогичное этому (на примере Light) - Outline Light

В итоге выйдет:


<Button Classes="Outline Light" Content="Light" />

Это будет работать и для других классов:


 <Button Classes="Outline" Content="Mid (Default)" />

Плавающая кнопка с иконкой

плавающая кнопка с иконкой

У плавающей кнопки с иконкой возможны такие классы:

  1. Light Mini
  2. Mini
  3. Dark Mini
  4. Accent Mini
  5. Light
  6. "" (без класса)
  7. Dark
  8. Accent

Пример Плавающей кнопки без иконки

<controls:FloatingButton Classes="Light" />

Пример Плавающей кнопки с иконкой +

	<controls:FloatingButton Classes="Accent Mini">
		<avalonia:MaterialIcon Kind="Plus" Height="24" Width="24"></avalonia:MaterialIcon>
	</controls:FloatingButton>

Расширенные плавающие кнопки

расширенные плавающие кнопки

по своей сути расширенные плавающие кнопки это обычные плавающие кнопки с параметром IsExtended="True"

Пример создания такой кнопки:

<controls:FloatingButton Classes="Accent Mini" IsExtended="True" Content="Add Item" MaxWidth="200">
   <StackPanel Orientation="Horizontal" Height="24">
      <avalonia:MaterialIcon Kind="Plus" Height="24" Width="24"></avalonia:MaterialIcon>
      <TextBlock Margin="8,0" Text="ADD ITEM" Classes="Subtitle2" VerticalAlignment="Center" />
   </StackPanel>
</controls:FloatingButton>

Плоские кнопки

плосские кнопки

Плоские кнопки - это кнопки с классом flat, имеют 2 параметра - "Flat" и "Flat Accent"

Пример создания такой кнопки


<Button Classes="Flat" Content="Default" />