这个问题是多方面的。必须应用以下每个解决方案来解决您的问题。
修复目标类
In
the JavaScript initialization for off-canvases
,它搜索
hs-overlay
类别:
document
.querySelectorAll('.hs-overlay:not(.--prevent-on-load-init)')
.forEach((el: HTMLElement) => {
if (
!window.$hsOverlayCollection.find(
(elC) => (elC?.element?.el as HTMLElement) === el,
)
)
new HSOverlay(el);
});
解决方案
因此,画布上的类应该是
hs覆盖层
,不
tw-hs-overlay
:
<div id="hs-offcanvas-right" class="hs-overlay â¦">
修复
hidden
班级切换
The JavaScript assumes we're using unprefixed Tailwind classes
:
this.hiddenClass = concatOptions?.hiddenClass || 'hidden';
但是
the lines before this
允许我们覆盖此内容:
const data = el.getAttribute('data-hs-overlay-options');
const dataOptions: IOverlayOptions = data ? JSON.parse(data) : {};
const concatOptions = {
...dataOptions,
...toggleDataOptions,
...options,
};
解决方案
因此,我们可以使用
data-hs-overlay-options
对于我们的前缀
tw-hidden
类代替:
<div
id="hs-offcanvas-right"
class="â¦"
data-hs-overlay-options='{"hiddenClass":"tw-hidden"}'
>
修复
hs-overlay-open
使用
当打开画布外时,
the
open
and
opened
classes are added to the element
:
this.el.classList.add('open', 'opened');
这个
hs-overlay-open
variant corresponds to the
open
class
:
addVariant('hs-overlay-open', [
({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.open.${e(`hs-overlay-open${separator}${className}`)}`;
});
},
然而,随着顺风
prefix
,Tailwind补充道
前缀
字符串到
打开
:
.tw-open.hs-overlay-open\:tw-translate-x-0 {
解决方案
这意味着即使在以下情况下,这些类也不适用
打开
班上有人。Tailwind或Preline中没有API对此进行修改。所以我们需要改变
hs-overlay-open:
变量用法,可能是针对特定对象的任意变量
打开
类别:
<div id="hs-offcanvas-right" class="hs-overlay [&.open]:tw-translate-x-0 â¦">
Here's a working StackBlitz project with all the above solutions applied
.
