mirror of
https://gitee.com/chinware/atomui.git
synced 2024-12-02 11:57:42 +08:00
325 lines
16 KiB
XML
325 lines
16 KiB
XML
<UserControl
|
|
x:Class="AtomUI.Demo.Desktop.ShowCase.ButtonShowCase"
|
|
xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:atom="https://atomui.net"
|
|
xmlns:desktop="clr-namespace:AtomUI.Demo.Desktop"
|
|
mc:Ignorable="d">
|
|
<desktop:ShowCasePanel>
|
|
<desktop:ShowCasePanel.Styles>
|
|
<Style Selector="atom|Button">
|
|
<Setter Property="Margin" Value="5" />
|
|
</Style>
|
|
</desktop:ShowCasePanel.Styles>
|
|
<desktop:ShowCaseItem
|
|
Title="Type"
|
|
Description="There are primary button, default button, dashed button, text button and link button in antd.">
|
|
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary">Primary Button</atom:Button>
|
|
<atom:Button>Default Button</atom:Button>
|
|
<atom:Button ButtonType="Text">Text Button</atom:Button>
|
|
<atom:Button ButtonType="Link">Link Button</atom:Button>
|
|
</WrapPanel>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Button Shape"
|
|
Description="Supported button shape display, such as primary, default, dashed and Text, etc.">
|
|
<StackPanel Orientation="Vertical">
|
|
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
|
|
<atom:Button ButtonType="Primary">Primary</atom:Button>
|
|
<atom:Button>Default</atom:Button>
|
|
<atom:Button ButtonType="Text">Text</atom:Button>
|
|
<atom:Button ButtonType="Link">Link</atom:Button>
|
|
</WrapPanel>
|
|
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0, 0, 0, 20">
|
|
<atom:Button ButtonType="Primary" Shape="Round">Primary</atom:Button>
|
|
<atom:Button Shape="Round">Default</atom:Button>
|
|
<atom:Button ButtonType="Text" Shape="Round">Text</atom:Button>
|
|
<atom:Button ButtonType="Link" Shape="Round">Link</atom:Button>
|
|
</WrapPanel>
|
|
<StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal" Margin="0, 0, 0, 20">
|
|
<atom:Button ButtonType="Primary" Shape="Circle">AA</atom:Button>
|
|
<atom:Button Shape="Circle">AA</atom:Button>
|
|
<atom:Button ButtonType="Text" Shape="Circle">AA</atom:Button>
|
|
<atom:Button ButtonType="Link" Shape="Circle">AA</atom:Button>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Size"
|
|
Description="AtomUI supports three sizes of buttons: small, default and large.
|
|
If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.">
|
|
<DockPanel Margin="0, 0, 0, 0">
|
|
<StackPanel Orientation="Horizontal" Spacing="5" DockPanel.Dock="Top">
|
|
<TextBlock VerticalAlignment="Center">Expand direction:</TextBlock>
|
|
<atom:OptionButtonGroup ButtonStyle="Outline" Name="ButtonSizeTypeOptionGroup">
|
|
<atom:OptionButton IsChecked="True">Large</atom:OptionButton>
|
|
<atom:OptionButton>Default</atom:OptionButton>
|
|
<atom:OptionButton>Small</atom:OptionButton>
|
|
</atom:OptionButtonGroup>
|
|
</StackPanel>
|
|
|
|
<StackPanel Orientation="Vertical" Margin="0, 20, 0, 0" Spacing="10">
|
|
<WrapPanel>
|
|
<atom:Button ButtonType="Primary" SizeType="{Binding ButtonSizeType}">Primary</atom:Button>
|
|
<atom:Button ButtonType="Default" SizeType="{Binding ButtonSizeType}">Default</atom:Button>
|
|
<atom:Button ButtonType="Link" SizeType="{Binding ButtonSizeType}">Link</atom:Button>
|
|
</WrapPanel>
|
|
<WrapPanel>
|
|
<atom:Button ButtonType="Primary" Shape="Default"
|
|
Icon="{atom:IconProvider Kind=DownloadOutlined}"
|
|
SizeType="{Binding ButtonSizeType}" />
|
|
<atom:Button ButtonType="Primary" Shape="Circle"
|
|
Icon="{atom:IconProvider Kind=DownloadOutlined}"
|
|
SizeType="{Binding ButtonSizeType}" />
|
|
<atom:Button ButtonType="Primary" Shape="Round"
|
|
Icon="{atom:IconProvider Kind=DownloadOutlined}"
|
|
SizeType="{Binding ButtonSizeType}" />
|
|
<atom:Button ButtonType="Primary" Shape="Round"
|
|
Icon="{atom:IconProvider Kind=DownloadOutlined}"
|
|
SizeType="{Binding ButtonSizeType}">
|
|
Download
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" Shape="Default"
|
|
Icon="{atom:IconProvider Kind=DownloadOutlined}"
|
|
SizeType="{Binding ButtonSizeType}">
|
|
Download
|
|
</atom:Button>
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
</DockPanel>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Icon"
|
|
Description="You can add an icon through the icon property and adjust the position of the icon using iconPosition.">
|
|
<StackPanel Orientation="Vertical">
|
|
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}" />
|
|
<atom:Button ButtonType="Primary" Shape="Round"
|
|
Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Default" Shape="Circle" Icon="{atom:IconProvider Kind=SearchOutlined}" />
|
|
<atom:Button ButtonType="Default" Shape="Round" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Text" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Link" Shape="Default" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
</WrapPanel>
|
|
<WrapPanel HorizontalAlignment="Left" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" IsDanger="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Default" Shape="Round" IsDanger="True"
|
|
Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Text" Shape="Default" IsDanger="True"
|
|
Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
|
|
<atom:Button ButtonType="Link" Shape="Default" IsDanger="True"
|
|
Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Search
|
|
</atom:Button>
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Loading"
|
|
Description="A loading indicator can be added to a button by setting the loading property on the Button.">
|
|
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
|
|
<WrapPanel>
|
|
<atom:Button ButtonType="Primary" IsLoading="True">Loading</atom:Button>
|
|
<atom:Button ButtonType="Primary" SizeType="Small" IsLoading="True">Loading</atom:Button>
|
|
<atom:Button ButtonType="Primary" IsLoading="True" Icon="{atom:IconProvider Kind=PoweroffOutlined}" />
|
|
</WrapPanel>
|
|
<WrapPanel>
|
|
<atom:Button ButtonType="Primary" Name="LoadingBtn1">Click me!</atom:Button>
|
|
<atom:Button ButtonType="Primary" Name="LoadingBtn2"
|
|
Icon="{atom:IconProvider Kind=PoweroffOutlined}">
|
|
Click me!
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" Name="LoadingBtn3"
|
|
Icon="{atom:IconProvider Kind=PoweroffOutlined}" />
|
|
</WrapPanel>
|
|
|
|
</StackPanel>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Block Button"
|
|
Description="block property will make the button fit to its parent width.">
|
|
<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Margin="10">
|
|
<atom:Button ButtonType="Primary" HorizontalAlignment="Stretch">
|
|
Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" HorizontalAlignment="Stretch">
|
|
Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" HorizontalAlignment="Stretch">
|
|
Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" HorizontalAlignment="Stretch">
|
|
Link
|
|
</atom:Button>
|
|
</StackPanel>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Danger Buttons"
|
|
Description="danger is a property of button after antd 4.0.">
|
|
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" IsDanger="True">
|
|
Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" IsDanger="True">
|
|
Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" IsDanger="True">
|
|
Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" IsDanger="True">
|
|
Link
|
|
</atom:Button>
|
|
</WrapPanel>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Ghost Button"
|
|
Description="ghost property will make button's background transparent, it is commonly used in colored background.">
|
|
<Border Background="rgb(190, 200, 200)"
|
|
Margin="10"
|
|
Padding="10">
|
|
<StackPanel Orientation="Vertical">
|
|
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" IsGhost="True">
|
|
Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" IsGhost="True">
|
|
Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" IsGhost="True">
|
|
Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" IsGhost="True">
|
|
Link
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True">
|
|
Danger
|
|
</atom:Button>
|
|
</WrapPanel>
|
|
<WrapPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" IsGhost="True" Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Link
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" IsDanger="True" IsGhost="True"
|
|
Icon="{atom:IconProvider Kind=SearchOutlined}">
|
|
Danger
|
|
</atom:Button>
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
</desktop:ShowCaseItem>
|
|
|
|
<desktop:ShowCaseItem
|
|
Title="Disabled"
|
|
Description="To mark a button as disabled, add the disabled property to the Button.">
|
|
<WrapPanel HorizontalAlignment="Stretch" Orientation="Vertical">
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary">
|
|
Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" IsEnabled="False">
|
|
Primary(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Default">
|
|
Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" IsEnabled="False">
|
|
Default(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Text">
|
|
Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" IsEnabled="False">
|
|
Text(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Link">
|
|
Link
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" IsEnabled="False">
|
|
Link(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Primary" IsDanger="True">
|
|
Danger Primary
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Primary" IsDanger="True" IsEnabled="False">
|
|
Danger Primary(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Default" IsDanger="True">
|
|
Danger Default
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Default" IsDanger="True" IsEnabled="False">
|
|
Danger Default(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Text" IsDanger="True">
|
|
Danger Text
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Text" IsDanger="True" IsEnabled="False">
|
|
Danger Text(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
<StackPanel Orientation="Horizontal">
|
|
<atom:Button ButtonType="Link" IsDanger="True">
|
|
Danger Link
|
|
</atom:Button>
|
|
<atom:Button ButtonType="Link" IsDanger="True" IsEnabled="False">
|
|
Danger Link(disabled)
|
|
</atom:Button>
|
|
</StackPanel>
|
|
</WrapPanel>
|
|
</desktop:ShowCaseItem>
|
|
</desktop:ShowCasePanel>
|
|
</UserControl> |