如何固定侧面弹出窗口
How To Have Fixed Side Popup
我正在尝试找出如何创建类似于在 mac 上单击鼠标右键并按 search
时出现的弹出窗口的方法 popup/banner。
我不太确定要搜索什么或如何开始,有人可以告诉我该怎么做并把我推向正确的方向(最好使用 tailwind,但我可以适应)?提前致谢。
它叫做 popovers
,您可以搜索任何顺风元素或组件站点,您会发现很多
- https://tailwind-elements.com/docs/standard/components/popover/
- https://tailwinduikit.com/components/webapp/UI_element/popover
- 更多 https://www.google.com/search?q=make+popovers+in+tailwind
注意:代码片段在 cdn tailwind 上有问题,它适用于正常的 tailwind CLI one
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new Popover(popoverTriggerEl);
});
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex justify-center flex-wrap">
<button type="button" class="
px-7
py-3
bg-red-600
text-white
font-medium
text-sm
leading-snug
uppercase
rounded
shadow-md
hover:bg-red-700 hover:shadow-lg
focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-red-800 active:shadow-lg
transition
duration-150
ease-in-out
" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
</div>
<!-- Required popper.js -->
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>
我正在尝试找出如何创建类似于在 mac 上单击鼠标右键并按 search
时出现的弹出窗口的方法 popup/banner。
我不太确定要搜索什么或如何开始,有人可以告诉我该怎么做并把我推向正确的方向(最好使用 tailwind,但我可以适应)?提前致谢。
它叫做 popovers
,您可以搜索任何顺风元素或组件站点,您会发现很多
- https://tailwind-elements.com/docs/standard/components/popover/
- https://tailwinduikit.com/components/webapp/UI_element/popover
- 更多 https://www.google.com/search?q=make+popovers+in+tailwind
注意:代码片段在 cdn tailwind 上有问题,它适用于正常的 tailwind CLI one
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new Popover(popoverTriggerEl);
});
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex justify-center flex-wrap">
<button type="button" class="
px-7
py-3
bg-red-600
text-white
font-medium
text-sm
leading-snug
uppercase
rounded
shadow-md
hover:bg-red-700 hover:shadow-lg
focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-red-800 active:shadow-lg
transition
duration-150
ease-in-out
" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
</div>
<!-- Required popper.js -->
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>