@page "/components/button"


<PageLayout Title="Button 按钮" Description="按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。"
    ComponentType="typeof(TButton)"
    Anchors="@(new[]{"示例","幽灵按钮","图标按钮","Block 按钮","不同颜色主题按钮","不同状态的按钮","不同尺寸的按钮","不同形状的按钮","OnClick 点击事件","自定义渲染元素"})">
<Example Title="示例">
    <RunContent>
<TButton>普通按钮</TButton>
<TButton Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Varient="ButtonVarient.Text">文本按钮</TButton>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
 ```cshtml-razor
<TButton>普通按钮</TButton>
<TButton Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Varient=""ButtonVarient.Text"">文本按钮</TButton>
```
")
    </CodeContent>
</Example>
<Example Title="幽灵按钮">
    <Description>
        幽灵按钮将按钮的内容反色，背景变为透明，一般是底色透明。常用于有色背景上，例如 banner 图等。
    </Description>
    <RunContent>
        <div style="background:#000;padding:50px;">

            <TButton Ghost>普通按钮</TButton>
            <TButton Ghost Varient="ButtonVarient.Outline">边框按钮</TButton>
            <TButton Ghost Varient="ButtonVarient.Dashed">虚框按钮</TButton>
            <TButton Ghost Varient="ButtonVarient.Text">文本按钮</TButton>
            <br />
            <br />
            <TButton Ghost Theme="Theme.Primary">普通按钮</TButton>
            <TButton Ghost Theme="Theme.Primary" Varient="ButtonVarient.Outline">边框按钮</TButton>
            <TButton Ghost Theme="Theme.Primary" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
            <TButton Ghost Theme="Theme.Primary" Varient="ButtonVarient.Text">文本按钮</TButton>
            <br />
            <br />
            <TButton Ghost Theme="Theme.Success">普通按钮</TButton>
            <TButton Ghost Theme="Theme.Success" Varient="ButtonVarient.Outline">边框按钮</TButton>
            <TButton Ghost Theme="Theme.Success" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
            <TButton Ghost Theme="Theme.Success" Varient="ButtonVarient.Text">文本按钮</TButton>
            <br />
            <br />

            <TButton Ghost Theme="Theme.Warning">普通按钮</TButton>
            <TButton Ghost Theme="Theme.Warning" Varient="ButtonVarient.Outline">边框按钮</TButton>
            <TButton Ghost Theme="Theme.Warning" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
            <TButton Ghost Theme="Theme.Warning" Varient="ButtonVarient.Text">文本按钮</TButton>
            <br />
            <br />

            <TButton Ghost Theme="Theme.Danger">普通按钮</TButton>
            <TButton Ghost Theme="Theme.Danger" Varient="ButtonVarient.Outline">边框按钮</TButton>
            <TButton Ghost Theme="Theme.Danger" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
            <TButton Ghost Theme="Theme.Danger" Varient="ButtonVarient.Text">文本按钮</TButton>
</div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton Ghost>普通按钮</TButton>
<TButton Ghost Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Ghost Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Ghost Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Ghost Theme=""Theme.Primary"">普通按钮</TButton>
<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Ghost Theme=""Theme.Primary"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Ghost Theme=""Theme.Success"">普通按钮</TButton>
<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Ghost Theme=""Theme.Success"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Ghost Theme=""Theme.Warning"">普通按钮</TButton>
<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Ghost Theme=""Theme.Warning"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Ghost Theme=""Theme.Danger"">普通按钮</TButton>
<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Ghost Theme=""Theme.Danger"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
```
")
    </CodeContent>
</Example>
<Example Title="图标按钮">
    <Description>
            图标按钮由图标+文字或图标构成。通过图标可增强识别性，以便直观理解。
    </Description>
        <RunContent>
            <TSpace>
                <TSpaceItem>
                    <TButton Icon="IconName.Add" Theme="Theme.Primary">新建</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Icon="IconName.CloudUpload" Varient="ButtonVarient.Outline">上传</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Icon="IconName.Add" Theme="Theme.Primary"></TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Icon="IconName.Tools"></TButton>
                </TSpaceItem>
            </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton Icon=""IconName.Add"" Theme=""Theme.Primary"">新建</TButton>
<TButton Icon=""IconName.CloudUpload"" Varient=""ButtonVarient.Outline"">上传</TButton>
<TButton Icon=""IconName.Add"" Theme=""Theme.Primary""></TButton>
<TButton Icon=""IconName.Tools""></TButton>
```
")
    </CodeContent>
</Example>
<Example Title="Block 按钮">
    <Description>
        幽灵按钮将按钮的内容反色，背景变为透明，一般是底色透明。常用于有色背景上，例如 banner 图等。
    </Description>
    <RunContent>
        <div style="margin:0 auto; width:30%">
        <TButton Block>普通按钮</TButton>
        <br />
<TButton Varient="ButtonVarient.Outline" Block>边框按钮</TButton>
<br />
<TButton Varient="ButtonVarient.Dashed" Block>虚框按钮</TButton>
<br />
<TButton Varient="ButtonVarient.Text" Block>文本按钮</TButton>
</div>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton Block>普通按钮</TButton>
<TButton Varient=""ButtonVarient.Outline"" Block>边框按钮</TButton>
<TButton Varient=""ButtonVarient.Dashed"" Block>虚框按钮</TButton>
<TButton Varient=""ButtonVarient.Text"" Block>文本按钮</TButton>
```
")
    </CodeContent>
</Example>
<Example Title="不同颜色主题按钮">
    <Description>提供浅灰色、蓝色、红色、黄色和绿色为主题的按钮。</Description>
    <RunContent>        
<TButton>普通按钮</TButton>
<TButton Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Varient="ButtonVarient.Text">文本按钮</TButton>
        <br />
        <br />
<TButton Theme="Theme.Primary">普通按钮</TButton>
<TButton Theme="Theme.Primary" Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Theme="Theme.Primary" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Theme="Theme.Primary" Varient="ButtonVarient.Text">文本按钮</TButton>
        <br />
        <br />
<TButton Theme="Theme.Success">普通按钮</TButton>
<TButton Theme="Theme.Success" Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Theme="Theme.Success" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Theme="Theme.Success" Varient="ButtonVarient.Text">文本按钮</TButton>
<br />
<br />

<TButton Theme="Theme.Warning">普通按钮</TButton>
<TButton Theme="Theme.Warning" Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Theme="Theme.Warning" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Theme="Theme.Warning" Varient="ButtonVarient.Text">文本按钮</TButton>
        <br />
        <br />

<TButton Theme="Theme.Danger">普通按钮</TButton>
<TButton Theme="Theme.Danger" Varient="ButtonVarient.Outline">边框按钮</TButton>
<TButton Theme="Theme.Danger" Varient="ButtonVarient.Dashed">虚框按钮</TButton>
<TButton Theme="Theme.Danger" Varient="ButtonVarient.Text">文本按钮</TButton>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton>普通按钮</TButton>
<TButton Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Theme=""Theme.Primary"">普通按钮</TButton>
<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Theme=""Theme.Primary"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Theme=""Theme.Success"">普通按钮</TButton>
<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Theme=""Theme.Success"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Theme=""Theme.Warning"">普通按钮</TButton>
<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Theme=""Theme.Warning"" Varient=""ButtonVarient.Text"">文本按钮</TButton>

<TButton Theme=""Theme.Danger"">普通按钮</TButton>
<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Outline"">边框按钮</TButton>
<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
<TButton Theme=""Theme.Danger"" Varient=""ButtonVarient.Text"">文本按钮</TButton>
```
")
    </CodeContent>
</Example>
<Example Title="不同状态的按钮">
    <Description>
        提供加载、禁用两种状态。
    </Description>
    <RunContent>
        <TButton Loading>加载中...</TButton>
        <TButton Disabled>禁止状态</TButton>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton Loading>加载中...</TButton>
<TButton Disabled>禁止状态</TButton>
``` 
")
    </CodeContent>
</Example>
<Example Title="不同尺寸的按钮">
    <Description>提供大、中（默认）、小三种尺寸。</Description>
    <RunContent>
        <TButton Size="Size.Large">大按钮</TButton>
        <TButton Size="Size.Medium">中按钮</TButton>
        <TButton Size="Size.Small">小按钮</TButton>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton Size=""Size.Large"">大按钮</TButton>
<TButton Size=""Size.Medium"">中按钮</TButton>
<TButton Size=""Size.Small"">小按钮</TButton>
```
")
    </CodeContent>
</Example>
不同形状的按钮
<Example Title="不同形状的按钮">
    <Description>提供长方形、正方形、圆角长方形、圆形四种形状。</Description>
    <RunContent>
        <TSpace Vertical>
            <TSpace>
                <TSpaceItem>
                    <TButton Theme="Theme.Primary">填充按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Theme="Theme.Primary" Icon="IconName.Calendar" Shape="ButtonShape.Square" />
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Theme="Theme.Primary" Shape="ButtonShape.Round">填充按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Theme="Theme.Primary" Icon="IconName.Calendar" Shape="ButtonShape.Circle" />
                </TSpaceItem>
            </TSpace>
            <TSpace>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Outline">描边按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Outline" Icon="IconName.Calendar" Shape="ButtonShape.Square" />
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Outline" Shape="ButtonShape.Round">描边按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Outline" Icon="IconName.Calendar" Shape="ButtonShape.Circle" />
                </TSpaceItem>
            </TSpace>
            <TSpace>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Dashed">虚框按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Dashed" Icon="IconName.Calendar" Shape="ButtonShape.Square" />
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Dashed" Shape="ButtonShape.Round">虚框按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Dashed" Icon="IconName.Calendar" Shape="ButtonShape.Circle" />
                </TSpaceItem>
            </TSpace>
            <TSpace>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Text">文字按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Text" Icon="IconName.Calendar" Shape="ButtonShape.Square" />
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Text" Shape="ButtonShape.Round">文字按钮</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton Varient="ButtonVarient.Text" Icon="IconName.Calendar" Shape="ButtonShape.Circle" />
                </TSpaceItem>
                </TSpace>
            </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSpace>
    <TSpaceItem>
        <TButton Theme=""Theme.Primary"">填充按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Theme=""Theme.Primary"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Square"" />
    </TSpaceItem>
    <TSpaceItem>
        <TButton Theme=""Theme.Primary"" Shape=""ButtonShape.Round"">填充按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Theme=""Theme.Primary"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Circle"" />
    </TSpaceItem>
</TSpace>
<TSpace>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Outline"">描边按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Outline"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Square"" />
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Outline"" Shape=""ButtonShape.Round"">描边按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Outline"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Circle"" />
    </TSpaceItem>
</TSpace>
<TSpace>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Dashed"">虚框按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Dashed"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Square"" />
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Dashed"" Shape=""ButtonShape.Round"">虚框按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Dashed"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Circle"" />
    </TSpaceItem>
</TSpace>
<TSpace>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Text"">文字按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Text"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Square"" />
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Text"" Shape=""ButtonShape.Round"">文字按钮</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton Varient=""ButtonVarient.Text"" Icon=""IconName.Calendar"" Shape=""ButtonShape.Circle"" />
    </TSpaceItem>
</TSpace>
```
")
    </CodeContent>
</Example>
<Example Title="OnClick 点击事件">
    <Description>@Code.Create("设置 `OnClick` 点击事件的触发函数")</Description>
    <RunContent>
        <TButton OnClick="@(e=>JS.InvokeVoidAsync("alert","按钮被点击"))">点击我</TButton>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TButton OnClick=""@(e=>JS.InvokeVoidAsync(""alert"",""按钮被点击""))"">点击我</TButton>
```
")
    </CodeContent>
</Example>
    <Example Title="自定义渲染元素">
        <Description>支持自定义渲染元素</Description>
        <RunContent>
            <TSpace>
                <TSpaceItem>
                    <TButton TagName="div" Theme="Theme.Primary">div</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton TagName="a" Theme="Theme.Primary">a</TButton>
                </TSpaceItem>
                <TSpaceItem>
                    <TButton TagName="span" Theme="Theme.Primary">span</TButton>
                </TSpaceItem>
            </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TSpace>
    <TSpaceItem>
        <TButton TagName=""div"" Theme=""Theme.Primary"">div</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton TagName=""a"" Theme=""Theme.Primary"">a</TButton>
    </TSpaceItem>
    <TSpaceItem>
        <TButton TagName=""span"" Theme=""Theme.Primary"">span</TButton>
    </TSpaceItem>
</TSpace>
```
")
    </CodeContent>
</Example>
</PageLayout>
@inject IJSRuntime JS