[RFC] Simplify the usage of icon buttons

[capdiem]

概述

简化图标按钮的使用

基本示例

<MButton IconName="mdi-star"></MButton>
<MButton LeftIconName="mdi-star">Right Text</MButton>
<MButton RightIconName="mdi-star">Left Text</MButton>

动机

目前编写一个图标按钮需要写组合 MButton 组件和 MIcon 两个组件，使用成本比较高：

<MButton Icon>
  <MIcon>mdi-star</MIcon>
</MButton>

Vuetify3 也为此做了优化：

<v-btn icon="mdi-star"></v-btn>

设计细节

Vuetify3 v-btn 中的 icon 的类型是 bool | string。对于 MasaBlazor，内置的 StringBoolean 类型也可以同时表示 bool | string。然而当 Icon 参数类型为 StringBoolean 时，razor 无法分析 <MButton Icon></MButton>这样的代码，razor 只能读懂 <MButton Icon="true"></MButton>，这意味此改动会是一个破坏性更改。但是这样的代码自项目开始就已经存在，无法估计影响的范围，因此不能改动目前的 Icon 属性的类型。
那么只能通过新增属性来实现。思来想去，似乎只有 IconName 这个命名比较合适。当 IconName 设置时，默认设置 Icon 属性为 true。
其他包含图标组件的用法：

<MButton>
  <MIcon Left>mdi-star</MIcon>
  Right Text
</MButton>

simplify:
<MButton LeftIconName="mdi-star">Right Text</MButton>

<MButton>
  Left Text
  <MIcon Right>mdi-star</MIcon>
</MButton>

simplify:
<MButton RightIconName="mdi-star">Left Text</MButton>

为此，也应该新增 LeftIconName 和 RightIconName 属性来简化以上代码的用法。

缺点

新的 IconName 属性可能会和旧的 Icon 属性语义上有点模糊不清。

替代方案

无

未解决的问题

新属性的命名可能不够好。

[capdiem]

@Lee-Lily-Lea @Yu-Core @pigwing @pankey888 @239573049 Take a look 😊

[Lee-Lily-Lea]

@capdiem
动机赞同, 因为我也做了 (虽然我老忘记用吧 经常直接写btn套icon)
但是我感觉 只是为了传递一下icon(string) 需要从官方api角度修改 有点杀鸡用牛刀了
建议要改就再带点功能 纯传一个icon意义不大
示例

old:

<Mbtn>
  <micon>mdi-home</micon>
   home
</Mbtn>

new:

<mbtn lefticon=mdi-home>
  home
</mbtn>

你甚至可以从字符串看出来变化不大
而且实际使用极大概率会增加 OnClick Color等属性的设置 总的字符数还要上升 相对的节省的字符数比率更低

我个人是做了一个tooltip嵌套, 但是没处理你提出的icon 左右位置问题 不过可以改进 问题不大

public enum DirectionType
{
    Left,
    Right,
    Top,
    Bottom,
}

示例:

<IconBtn Direction="Direction.Left"
         Color="@MDC.green.L(1)"
         OnClick="OnClick"
         Icon="@MDI.pencil"
         TooltipNote="修改">
</IconBtn>
@code {
    void OnClick()
    {
        // doing
    }
}

[capdiem]

改动是直接改MButton源码的，所以MButton原有的属性都会有。Tooltip不太合适，至少我从来没有把它和MButton一起使用过。

[Lee-Lily-Lea]

Tooltip只是我当时需求的产物, 为了减少常态UI的尺寸占用 (仅显示ICon, 然后通过悬浮查看占用空间大的文字来更好的明白Btn意义)

用不用Tooltip都不要紧 仅仅是我现有的产物 拿出来作为一个参考

我的观念是
就为了用 IconName="@Icon" 来替换掉 <MIcon Icon="@Icon"/> 从一个官方的角度 对一个高频的 组件进行这种修改 有些浪费

另外对于名称的疑惑 你完全可以做一个特例的组件 就叫做 'MIconButton' (内部实现也许仍是MButton)

同时 既然说的是IconBtn 那也不乏这种形式的
( 我并没有使用过vue 我更多的是window平台的软件开发 下图就是微软商城的IconBtn 我在WPF中有使用)

• 所以建议Icon和方向独立 Icon="string" DirectionType="enum"
• 或者你允许四个插槽 LeftIcon="string?" RightIcon="string?" …………

[capdiem]

icon button 是个比较高频的用法，目前的写法实属繁琐，如果还是要设置大小时，MButton和MIcon都要指定大小。

你说的其他特性 V2 肯定会改，但不是现在。

[Lee-Lily-Lea]

icon button 是个比较高频的用法，目前的写法实属繁琐，如果还是要设置大小时，MButton和MIcon都要指定大小。

认同 忘了还有size这回事

总之 iconbtn 有比没好

设计API的时候最好还是按照下面这两句考虑下以后的 四向的拓展 避免将来造成破坏性的变更

• 所以建议Icon和方向独立 Icon="string" DirectionType="enum"
• 或者你允许四个插槽 LeftIcon="string?" RightIcon="string?" …………

[pigwing]

是否需要跟textfiled保持一致呢,因为textfile内页存在类似的功能.FillIcon(使用icon进行填充),AppendOuterIconPrependIcon

[capdiem]

跟TextField用法不一样，此提案只针对 icon button 的用法。