@page "/popovers"

<h3>Popover 弹出窗组件</h3>

<h4>点击/鼠标移入元素，弹出气泡式的卡片浮层</h4>

<DemoBlock Title="基础用法" Introduction=" 点击文本输入框弹出 <code>Popover</code> 弹出框，<code>Placement</code> 设置弹出框的位置 二次点击时关闭弹出框" Name="Normal">
    <div class="d-flex flex-column w-100 popover-demo">
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Bottom" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Right" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Left" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Top" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="按钮激活弹出框" Introduction="点击按钮后弹出 <code>Popover</code> 弹出框" Name="Button">
    <Button>
        <span>Click 激活/关闭</span>
        <Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click" />
    </Button>
</DemoBlock>

<DemoBlock Title="自定义样式" Introduction="通过设置 <code>Popover</code> 参数 <code>CssClass</code> 对弹窗进行自定义样式" Name="CssClass">
    <p>设置 <code>Popover</code> 参数 <code>CssClass="custom-popover"</code> 进行自定义样式</p>
    <Pre>.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}
</Pre>
    <Button>
        <span>Click 激活/关闭</span>
        <Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click" CssClass="custom-popover" />
    </Button>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Popovers
{
    private static readonly string ValueString = "弹出框";

    private static readonly string Title = "弹出框标题";

    private static readonly string Content = "这里是弹出框正文，此处支持 <code>html</code> 标签，也可以内置一个 <code>Table</code>";

    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem()
        {
            Name = "Cotent",
            Description = "Popover 弹窗内容",
            Type = "string",
            ValueList = "",
            DefaultValue = "Popover"
        },
        new AttributeItem()
        {
            Name = "IsHtml",
            Description = "内容中是否包含 Html 代码",
            Type = "boolean",
            ValueList = "",
            DefaultValue = "false"
        },
        new AttributeItem()
        {
            Name = "Placement",
            Description = "位置",
            Type = "Placement",
            ValueList = "Auto / Top / Left / Bottom / Right",
            DefaultValue = "Auto"
        },
        new AttributeItem()
        {
            Name = "Title",
            Description = "Popover 弹窗标题",
            Type = "string",
            ValueList = "",
            DefaultValue = "Popover"
        }
    };
}