可扩展的

可展开 widget 使用自定义元素 <devsite-expandable>,让用户隐藏或显示可展开部分的内容。在 Markdown 中 使用标准 HTML 元素(如 <section><div>

部分切换开关

以下示例封装在 <devsite-expandable> 自定义元素中, 默认设置为隐藏位置。其标题有一个名为 showalwaysclass 属性。

此标题始终显示

此段落默认处于隐藏状态。

This code block within the custom element also defaults to a hidden
    position.

自定义控件

以下示例将 expand-control 类添加到 <devsite-expandable> 自定义元素的 button 元素,以便在不使用切换开关的情况下展开和收起该部分。

有多种选项可供选择

展开一次

以下示例将 expand-control once 类添加到 <devsite-expandable> 自定义元素中的链接,该链接会在被点击时显示额外内容,然后从页面中消失。

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

更多...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. sint occaecat cupidatat non 除外 Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

关联后自动展开

以下示例将 #sample1 ID 添加到 <devsite-expandable> 个自定义元素,用于在网页加载时自动展开此部分 。

如何在关联时自动展开

关闭此可展开部分,点击上方的 #sample1 链接,然后重新加载页面以自动展开此可展开部分。

Code block within the 'Auto-expand on linking' demo.

默认打开

以下示例将 expanded 属性添加到 <devsite-expandable> 自定义元素,使展开式广告默认处于打开状态。

默认展开

如果您有很多展开式广告,例如 但您希望保留最新的版本。