Semantic-UI Popup 预先存在的类型

简介

Semantic-UI 中内建了许多不同类型的弹出框（popup），这些预设的类型可以帮助开发者更加轻松地创建弹出框。本文将对预先存在的弹出框类型进行介绍，并提供使用示例。

基本弹出框 (Basic Popup)

最基本的弹出框类型，包括标题、内容和关闭按钮。可以通过传递 content 参数来设置弹出框内容。

<div class="ui button" data-content="这是基本弹出框。" data-variation="basic" data-position="top center">
  点击我
</div>

确认弹出框 (Confirmation Popup)

用于需要用户确认的操作（例如删除操作）的弹出框类型。包含标题、内容和两个按钮（确定和取消）。可以通过传递 content 参数设置内容和 onApprove 参数设置确定按钮被点击时触发的函数。

<div class="ui button" data-content="是否确认删除？" data-variation="confirmation" data-position="top center" data-onApprove="deleteItem">
  点击我
</div>

悬停弹出框 (Hoverable Popup)

悬停在元素上时弹出来的弹出框类型。类似于浮动提示。可以通过传递 content 参数来设置内容。

<div class="ui button" data-content="这是悬停弹出框。" data-variation="hoverable" data-position="top center">
  悬停在我上面
</div>

流动弹出框 (Flowing Popup)

弹出框内容流动显示的弹出框类型。可以通过传递 content 参数来设置内容。

<div class="ui button" data-content="这是流动弹出框。" data-variation="flowing" data-position="top center">
  点击我
</div>

左侧悬停弹出框 (Left-Aligned Hover Popup)

悬停在元素左侧时弹出来的弹出框类型。可以通过传递 content 参数来设置内容。

<div class="ui button" data-content="这是左侧悬停弹出框。" data-variation="left aligned hover" data-position="top center">
  悬停在我左侧
</div>

右侧悬停弹出框 (Right-Aligned Hover Popup)

悬停在元素右侧时弹出来的弹出框类型。可以通过传递 content 参数来设置内容。

<div class="ui button" data-content="这是右侧悬停弹出框。" data-variation="right aligned hover" data-position="top center">
  悬停在我右侧
</div>

自定义布局弹出框 (Custom Layout Popup)

允许开发者使用自定义 HTML 和 CSS 创建弹出框布局的弹出框类型。可以通过传递 html 参数来设置弹出框 HTML 内容。

<div class="ui button" data-variation="custom" data-html="<div class='custom-popup'><h4>自定义布局弹出框</h4><p>这是自定义布局。</p></div>" data-position="top center">
  点击我
</div>

总结

以上便是 Semantic-UI 提供的预先存在的弹出框类型。通过 data-variation 参数可以很容易地使用这些弹出框类型。开发者也可以自定义弹出框类型，只需将 data-variation 参数值设置为 “custom”，并使用 data-html 参数传递内容即可。