MASA.Blazor

MASA.Blazor copied to clipboard

现有的tooltip语法会破坏UI代码的层级结构，降低代码可读性，是否可以对此问题进行优化，例如可以将其设计为组件的属性：MButton Tooltip="tips"

我觉得是个很好的提议，但首先要梳理出来哪些组件时可以支持Tooltip的，并要为他们抽象出来一个通用的实现。 但这里或许会有个问题，如何在不破坏现有组件的dom结构下为支持Tooltip的组件动态改变dom结构？ 如果无法动态改变dom结构会导致现有的组件dom结构会变得更复杂，可能会得不偿失。 @capdiem

我们作为组件库应该尽量保持单一组件最小的功能，Tooltip现在的设计是可以包裹任何元素，因为要依赖元素触发所以写法会有点繁琐。关于Tooltip的语法设计如果没有更好的方式，我们不会修改它，对于你的问题，我建议你再封装一下，例如TooltipButton：

@inherits MButton

<MTooltip Disabled="@Disabled" Top>
    <ActivatorContent>
        <div style="display: inline-block" @attributes="@context.Attrs">
            @base.BuildRenderTree
        </div>
    </ActivatorContent>
    <ChildContent>
        @Tooltip
    </ChildContent>
</MTooltip>

@code {

    [Parameter]
    public string? Tooltip { get; set; }

    private bool Disabled => string.IsNullOrWhiteSpace(Tooltip);

}

使用：

<TooltipButton Tooltip="Tooltip" Color="primary">CLICK ME</TooltipButton>

把这个组件抽象为 简易Tooltip，使用方式如下是不是也可以

<PSimpleTooltip Tooltip="Tooltip">
    <MButton Color="primary">CLICK ME</MButton>
</PSimpleTooltip>