主题样式变更详情 - 反馈

这是一个关于 details 样式更改实验的反馈主题。

BBCode 中 details 标签的示例:

abc

testing 123 123
123

HTML 中 details 标签的示例:

... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content...
11 个赞

使用 HTML \u003cdetails\u003e 似乎会将内容挤压到摘要中:

\u003cdetails open\u003e
\u003csummary\u003e
这是一个已打开的 details
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e

\u003cdetails\u003e
\u003csummary\u003e
这是一个 HTML details
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e

哦,我明白了。它没有自动换行,我也没手动添加:

\u003cdetails open\u003e
\u003csummary\u003e
这是一个已打开的 details
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e
Summary

This text will be hidden

5 个赞

是的,你说得对。看起来当你自己添加时,没有包含 p 标签,而使用 details 插入工具添加时,它会自动添加。\n\n你的:\n\nhtml\n\u003cdetails dir=\"ltr\" open=\"\"\u003e\n\u003csummary\u003e\nThis is a HTML details\n\u003c/summary\u003e\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.\n\u003c/details\u003e\n\n\n插入工具:\n\nhtml\n\u003cdetails dir=\"ltr\" open=\"\"\u003e\n\u003csummary\u003eSummary\u003c/summary\u003e\n\u003cp\u003eThis text will be hidden\u003c/p\u003e\n\u003c/details\u003e\n\n\n插入工具添加的 p 标签会将文本保留在新的一行上。

1 个赞

啊。您无需在现有样式中添加 \u003cp\u003e 标签。我猜这个新的更“\u003cp\u003e 粘糊糊”。 :slight_smile:

2 个赞

一些初步反馈:

  1. 我第一次看到新的 details 元素时,直接忽略了它。它没有被识别为 [details]。这可能是“因为它很新”,但是……
  2. 它与之前的设计和默认的浏览器实现脱节——箭头在摘要之后而不是之前,并且关闭状态指向的方向与之前(以及默认)表示打开状态的方向相反。
    关闭:5e2f09a3273a7776b5183413ef6f10e6527e79e0 d9740bb422e18ababe7c9a7d542c2f16fc133988
    打开:7c34c74801ab3cf04dc83e99b95e7689bb4ded71 f65dd89b62acbfaa9dcf83bd03bbe23eb0c1105a
  3. 按钮/摘要元素占用了更多空间(以前它是一个半内联元素)
    vs
  4. 如上所示,以前三角形/箭头与文本对齐,现在“Summary”文本由于按钮的内边距而不对齐(什么都没有对齐 :sweat_smile:
  5. 在移动设备上,与之交互后,按钮的背景仍然突出显示
  6. 我会选择边框而不是背景选项——我更希望隐藏一些内容就只是隐藏它,而不影响对比度(主要与嵌入式图片和表情符号相关)

更新:

  1. 可点击区域减小:

    vs
7 个赞

:baymax_yes:


这在某种程度上是故意的,使其更好意味着要与以前的方式有所不同,特别是与浏览器默认设置有所不同。我们现在遵循帖子底部“回复”按钮的模式,该按钮有多个回复。

image


观察得很仔细!


又一个很棒的发现,我会看看这个 :+1:


:thinking: 我不确定使用黑色/深色表情符号在深色/黑色背景上是否是我们可以解决的问题……


这个也有点令人困惑,你以前是点击别的地方吗?你以前经常点击这里吗?

3 个赞

是的。我经常这样做,尤其是在手机上。:raised_hand: 较小的区域更难点击。我认为这是因为我的拇指在屏幕上的位置。

5 个赞

是的!这是平台默认设置的预期之一:\u003cdetails\u003e,就像复选框/单选按钮及其 \u003clabel\u003e 一样,在外观和行为上都有特定的方式。例如,我在 GitHub 上也是这样做的:

1 条回复

我不知道让它与其他东西相似是否真的好 :stuck_out_tongue:

1 个赞

Season 3 Whatever GIF by The Office

您好!如果我的问题不太正确,请原谅 :pray:
是否可以添加一个功能,根据用户组显示隐藏内容。例如,如果用户未注册或不是某个用户组的成员,则他们将无法查看详细信息,并会显示一个模态窗口,其中包含获取访问权限的说明(例如,注册)?
我知道存在隐藏整个主题或类别的主题组件/插件。只是,有时您想让用户有机会阅读主要信息

1 个赞

这并不是一种被利用的方式,因为通常一个类别会限制给某些组或用户,而不是该类别内帖子中的详细信息。

话虽如此,我相信这可以通过插件来实现,但这个话题不适合进行此类讨论。

1 个赞

小小的吹毛求疵,但这看起来与引用的背景颜色略有不同,这种“差不多但又不是”的感觉可能看起来像个错误。我认为它应该要么匹配,要么明显不同。

其他想法……

这是一个手动引用

这是一个部分引用,可以展开

也许我们可以稍微借鉴一下这种风格?相同的内边距、背景和展开……我们至少要去掉边框,让它看起来不那么像引用。

Screenshot 2023-11-14 at 1.48.35 PM

也许是完全不同的风格?

Screenshot 2023-11-14 at 1.49.16 PM

7 个赞
我没有对齐

在这里放弃对齐有点让我困扰:

当你以 details 块开头时,这一点最为明显

4 个赞

你好 :waving_hand: 我只是在自言自语…… :thinking: 默认情况下是否需要显示标题?我的意思是,它大多数时候都在使用默认的 Summary,而且很可能大多数用户都不知道它可以是唯一的,也许如果 details 内部的文本被截断并以省略号结尾,并且在折叠时显示 ...显示更多,在展开时显示 显示更少,这样会更自然。例如,截断后的第一行内容将自动成为标题。这可以作为默认视图,但用户可以单独添加标题,如果他们愿意?

4 个赞

公平地说:实现是点击标签应设置其单选按钮,不一定点击标签后面的整个空行也有效。

2 个赞

您觉得悬停状态永久化怎么样?这样它就可以像一个“按钮”一样,文本在上方和下方。

  1. 箭头与文本未对齐(它太靠上了)
    vs image
    (而且它不是同一个箭头图标?:eyes:
  2. 组合菜单使用三角形来表示详细信息功能
  3. 添加到第 2 点。
    将图标放在文本后面会更难识别,尤其是在快速浏览帖子时
  4. 也添加到第 2 点。
    关于图标指向的方向:鉴于它充当切换功能,将其反转以表示当前状态而不是操作/未来状态是否有意义(这也适用于“回复”按钮)
  5. 使用 tab 导航到它时没有焦点状态
  6. 仅在关闭时可见悬停状态
5 个赞

也许……@awesomerobot 怎么看?

小 bug – 打开详情时,您会向上滚动直到加载更多帖子(再多一点);返回后,详情内容未呈现(编辑:或已关闭,但我在此处不期望它关闭)

3 个赞

是的,将其视为按钮可以奏效……几乎就像现有的 HTML details 标签一样(再加上一个箭头)

<details class='elided'>
<summary title='Show trimmed content'>展开我</summary>
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
</summary>
</details>

另外……

如果我使用段落作为摘要内容怎么办?这可以是任何长度,并且换行可能很奇怪。这应该有限制吗?非常非常长的摘要文本有使用场景吗?下一行箭头:

here are the deets

3 个赞