按钮“文本”

为什么只有图标的按钮会显示此文本 ​

好奇它的作用是什么,因为它会影响我仅图标按钮的样式 :skull_and_crossbones:

3 个赞

您可以通过 PR 查看 pmusaraj 的相关描述:

这为应用程序中的文本输入框、下拉菜单和按钮添加了统一的大小调整。这很重要,因为这些元素经常在表单中一起使用,而不同的计算高度会导致许多布局问题。

相关代码:

1 个赞

似乎有一种更健壮的方法可以实现相同的效果,而无需使用 ZeroWidthSpace

1 个赞

你说得对!这是来自 2021 年的 PR。也许在 2024 年及以后有更现代的方法来确保一致性。

2 个赞

是的,我们以前考虑过(并且将来可能还会再次考虑),但不幸的是,像给所有按钮添加最小高度这样简单的事情,会对现有主题造成更大的破坏。

3 个赞

为什么最小高度?按钮是否可以具有与下拉菜单/输入框大小相匹配的基本内边距/字体(包括行高)?

1 个赞

我认为我们正朝着一个更标准化的状态发展,这可能会成为可能,但行高会因字体而异……因此,我们默认做的任何事情都可能在主题更改为不同字体时导致高度不一致。

零宽度空格确保即使在行高和字体发生变化时,没有文本的按钮也具有与有文本的按钮相似的行为(换句话说,零宽度字符的行高会像有文本的按钮一样影响按钮的高度)。

3 个赞

在元素之间使用一致的字体是否会利用相同的行高,从而防止字体行高不同?

1 个赞

不,因为没有文本的按钮的高度不会受到行高的影响,而有文本的按钮会,因此有文本的按钮和没有文本的按钮之间存在不一致。

图标的高度能否不与字体行高绑定?我想象一个函数,它接收字体详细信息/令牌并将其应用于图标高度的行高。

1 个赞

就是这个。CSS lh 单位在现代浏览器中支持良好,所以现在将当前的行高应用于元素非常简单。

当然,我不知道在不破坏现有主题的情况下进行更改的复杂性。

3 个赞