应用顺风前缀时，preline ui offcanvas 不起作用

Question

我尝试使用 preline ui offcanvas，当复制粘贴其网站上给出的代码时，它按预期工作，但由于我也使用 bootstrap，我需要使用前缀来避免冲突

<button type="button" class="tw-m-1 tw-ms-0 tw-py-3 tw-px-4 tw-inline-flex tw-items-center tw-gap-x-2 tw-text-sm tw-font-medium tw-rounded-lg tw-border tw-border-transparent tw-bg-blue-600 tw-text-white hover:tw-bg-blue-700 focus:tw-outline-none focus:tw-bg-blue-700 disabled:tw-opacity-50 disabled:tw-pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-offcanvas-right" data-hs-overlay="#hs-offcanvas-right">
  Toggle right offcanvas
</button>


<div id="hs-offcanvas-right" class="tw-hs-overlay hs-overlay-open:tw-translate-x-0 tw-hidden tw-translate-x-full tw-fixed tw-top-0 tw-end-0 tw-transition-all tw-duration-300 tw-transform tw-h-full tw-max-w-xs tw-w-full tw-z-[80] tw-bg-white tw-border-s dark:tw-bg-neutral-800 dark:tw-border-neutral-700" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-right-label">
  <div class="tw-flex tw-justify-between tw-items-center tw-py-3 tw-px-4 tw-border-b dark:tw-border-neutral-700">
    <h3 id="hs-offcanvas-right-label" class="tw-font-bold tw-text-gray-800 dark:tw-text-white">
      Offcanvas title
    </h3>
    <button type="button" class="tw-size-8 tw-inline-flex tw-justify-center tw-items-center tw-gap-x-2 tw-rounded-full tw-border tw-border-transparent tw-bg-gray-100 tw-text-gray-800 hover:tw-bg-gray-200 focus:tw-outline-none focus:tw-bg-gray-200 disabled:tw-opacity-50 disabled:tw-pointer-events-none dark:tw-bg-neutral-700 dark:tw-hover:bg-neutral-600 dark:tw-text-neutral-400 dark:tw-focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-offcanvas-right">
      <span class="tw-sr-only">Close</span>
      <svg class="tw-shrink-0 tw-size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </div>
  <div class="tw-p-4">
    <p class="tw-text-gray-800 dark:tw-text-neutral-400">
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </p>
  </div>
</div>

我已经用前缀替换了每个类，我还确保该前缀存在于 tailwind.config.js 中并且 important 设置为 true。

Answer 1

问题是多方面的。必须应用以下每个解决方案来解决您的问题。

修复目标类别

在 off-canvases 的 JavaScript 初始化中，它搜索

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-overlay

，而不是

tw-hs-overlay

：

<div id="hs-offcanvas-right" class="hs-overlay …">

修复

hidden

类别切换

JavaScript 假设我们使用无前缀的 Tailwind 类:

this.hiddenClass = concatOptions?.hiddenClass || 'hidden';

但是在此之前的行允许我们覆盖它：

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

用法

打开画布外时，

open

和

opened

类将添加到元素中:

this.el.classList.add('open', 'opened');

hs-overlay-open

变体对应于

open

类:

addVariant('hs-overlay-open', [
    ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
            return `.open.${e(`hs-overlay-open${separator}${className}`)}`;
        });
    },

但是，使用 Tailwind

prefix

，Tailwind 将

prefix

字符串添加到

open

：

.tw-open.hs-overlay-open\:tw-translate-x-0 {

解决方案

这意味着即使存在

open

类，这些类也不会应用。 Tailwind 或 Preline 中没有 API 可以对此进行修改。因此，我们需要将

hs-overlay-open:

变体用法更改为针对

open

类的任意变体：

<div id="hs-offcanvas-right" class="hs-overlay [&.open]:tw-translate-x-0 …">