htmlstreamofficial / preline Goto Github PK

Placing the Tabs under the Accordion forces all Tab items to be active as initial when click the Accordion item.

• Accordion

  [Tab1] [Tab2]

https://preline.co/docs/accordion.html
https://preline.co/docs/tabs.html

Hi All,

Thanks for creating this amazing library.
I am facing issue with the js bundle.

The components are loading correctly on the webpage but the js functionality is not working. I followed the instructions to load the preline js file on the page, however, there seems to be some issue. Dropdown, banners and other components which require js functionality are not working.

Kindly help.

Discussed in #20

Where long content doesn't fit on the screen, change the tab bar to on mobile. Bad idea, it seems more convenient to add a kingpin from right to left for tabs...

Hello,

First of all, thank you for great library. I am using it with Vue 3 and TS and so far it works well.
I have usecase I don't know how to solve. Basically I would like to navigate from view with open modal to another view but I have to close the modal before navigation (otherwise backdrop stays). I did check the docs (https://preline.co/plugins/html/modal.html#js-methods) but I feel like I don't understand docs enough to implement programmatic closing of the modal.
How can I close the modal with Vue method on button click?

I checked the release README.md but got empty content.

Thank you

Hello, I am using prelineUI in my side project. Btw I am using the latest version of Next.js and Yarn. I wanted to use the preline navbar that has the dropdown component. But when I click on my web, it doesn't pop up. Yes, I did not add the <script> tag into my project, because I am confused where to add it.

<script src="./assets/vendor/preline/dist/hs-ui.bundle.js"></script>

How to add this code into my project? Thanks a low

Edited: By the way I use TypeScript for my Next.js project

If the offcanvas element is inside a sticky block, then the sidebar-backdrop-template background overlaps the content of the offcanvas menu(

I get an error that says ActionController::RoutingError (No route matches [GET] "/node_modules/preline/dist/hs-ui.bundle.js"):

Using Rails 7 here is my tailwind config:

module.exports = {
  plugins: [
   require('preline/plugin')
 ],
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ]
}

Any ideas on how to get this working?

Is there an example to integrate preline with remixjs?

Hello,
First of all, Thank you so much for preline, it's really amazing.
How ever, I have a little issue,
I want to change the color of the backdrop container.
I was able to do so using javascript, but opening the offcanvas, there's a flickering for the initial color.

let $offcanvasEl = document.getElementById('hs-overlay-bottom');
$offcanvasEl.addEventListener('open.hs.overlay', (event) => {
    let element = document.querySelector('[data-hs-overlay-backdrop-template]');
    element.classList.remove('bg-gray-900');
    element.classList.add('bg-[#0a0a0a99]');
});

I want to know if there's another way to change this option, initially I mean.
And Thank you again.

The website search function is unavailable, click on search to display 404 not found

The docs are wrong about how the Preline javascript should be included in an Astro project. The fault is in the last step of the integration. Specifically this line:

<script is:inline src="./assets/vendor/preline/dist/preline.js"></script>

This is from docs

Using is:inline here is the first issue. is:inline means that Astro will not bundle preline.js when building, which means that preline.js will only exist in the dev environment. This import as is will never resolve as mentioned in the Astro docs.
To avoid bundling the script, you can use the is:inline directive.

The second issue is the path to preline.js. In my case, the path didn't work even in dev mode. The path to preline.js was ../../node_modules/preline/dist/preline.js.

An elegant solution tested in production is:

<script>import "preline/dist/preline.js";</script>

I'd like to thank @MoustaphaDev for suggesting this solution.

Hi,

In the app I am working on I utilized example of Application layout (https://preline.co/examples/layouts-application.html#application-layout-sidebar-and-header) so I can make use of collapsible sidebar on mobile view.

I am facing issues when I am using modal.
As far as I understand the issue it is because sidebar has its own backdrop with z-50 so the sidebar itself has z-[60] class attached. Because of that, whenever I open the modal which also has z-50 for backdrop by default, it doesn't cover the sidebar.

Result:

I played around configuring z-index classes but I believe I can not set z-index for backdrops and get around the issue.
Any ideas? Thanks!

Can't select the last item when the Dropdown item list to long to extend out of the short screen.
for example:
Dropdown have 100 items. but the current web page only 500px height.

the dropdown list will extend out of the screen but can not select or scroll to the last one.

1. Examples aren't working as expected in the docs

2. It may be intentional, but doesn't work when ID's are nested in the data-hs-scrollspy container

Hello dev team,

Great Job yet. Hope your team is working on Carousel. Though I refer you
https://tailwindcss.com/docs/scroll-snap-stop
https://daisyui.com/components/carousel/

Please give the update ASAP.
Also, give an update for NUXT v3 Compatibility.

Good Luck & Thank you.

I am using preline 1.7.0 with NextJS and am noticing the following error logs

error - node_modules/preline/dist/preline.js (2:223) @ self
error - unhandledRejection: Error [ReferenceError]: self is not defined
    at eval (webpack-internal:///(sc_server)/./node_modules/preline/dist/preline.js:5:3)
    at (sc_server)/./node_modules/preline/dist/preline.js (/Users/felipesabino/projects/lang-app/.next/server/_sc_server_node_modules_preline_dist_preline_js.js:20:1)
    at __webpack_require__ (/Users/felipesabino/projects/lang-app/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__.t (/Users/felipesabino/projects/lang-app/.next/server/webpack-runtime.js:73:38) {
  digest: undefined
}

I am using NextJS 13.3.0 with the new appDir approach and loading preline on my template as follows

  useEffect(() => {
    const initPreline = async () => {
      // @ts-ignore
      await import('preline')
    }
    initPreline()
  }, [])

I also tried to load is via

  useEffect(() => {
    // @ts-ignore
    import('preline')
  })

And I set up my layout template to be client side to see if it prevents the issue by 'use client'.

Any idea on what is causing and how to fix it?

I installed preline ui today and the docs instruct me to link the hs-ui-bundle.js file at the bottom of the body tag.

but, where do I get the file?

theres no asset folder inside of react app.

There is a great feature for the dropdown component in your build

<svg class="hs-dropdown-open:rotate-180 ...

It would be very nice if there would be an active class for Collapse
Similar to

<svg class="hs-collapse-open:rotate-180 ...

hi, I am facing a problem with a dropdown component, dropdown did not work as expected on any card component, the dropdown menu show on the bottom and goes to the top with scrolling i can't understand

Hello,

Kindly add to your documentation guide on how to integrate with Qwik. The steps are similar to the default installation guide except for the last step which is as follows:

3. Add the Preline UI JavaScript

Update root.tsx as follows:

...
export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
      </head>
      <body lang="en">
        ...
        <script
          type="text/javascript"
          src="/node_modules/preline/dist/preline.js"
        ></script>
      </body>
    </QwikCityProvider>
  );
});

hey :)

do you have any plan for RTL edition release ?

Thank you

Hello! I am touching Preline for the first time today.
I think this is very cool, and I am looking forward to using it.

By the way, I was looking at the README and the <body> section is missing.
I don't see any mistakes, so this may be a GitHub markdown spec issue.

I was curious about this and tried to come up with a solution, and finally came up with the idea of using backquotes to deal with it, but I don't know if that is the best option.
(Also, changing only this part to backquotes may lack uniformity compared to the rest of the description, so I'm not sure about that either.)

This is a diff that I tried to fix.
shinshin86@4332f3b

In any case, I am thinking of creating a PR for the solution if you don't mind, as I think this is the part I would like to see displayed correctly for first-time visitors to the Preline repository.

What do you think about this?

When I set the backdrop to static and click outside the modal it closes the modal
data-hs-overlay-backdrop="static"

Thanks for a great product, do you have an example Navbar with Offcanvas?

In the figma components the tooltips have a carrot if you specify a direct, however in the documentation examples they don't. How can we add the carrot?

In the header-offcanvas.html example, the off-canvas feature won't work, I fixed it by changing every "offcanvas" to "overlay"

If the offcanvas menu is closed quickly (do not wait for it to close) and then opened, then it will not open

Viewing the examples from mobile,
In other sidebar examples, when the sidebar opens, a user can click outside the sidebar and the sidebar closes.
In the case of "Sidebar & Header" example the sidebar cannot be closed and the user needs to refresh the page

There is no documentation about the icons and how to add them.
There aren't any 'no icons' in the figma components. This is making it hard to match our deign document to our actual components which was the original motivation of using preline.

IF you guys could update the figma document to reflect reality, or update the website docs component examples to match that would make the project much more useful.
Ideally they should be entirely synced.
Thanks!

Another problem I found:
for the Switch, the 'disabled' examples are not using tailwind disabled prefix. so I need to reimplement them all again by hand.

This example, and the related examples, should include a hidden class on the parent offcanvas div:
https://preline.co/docs/offcanvas.html#example

Before:
<div id="hs-offcanvas-top" class="hs-offcanvas hs-offcanvas-open:translate-y-0 -translate-y-full fixed top-0 inset-x-0 transition-all duration-300 transform max-h-40 h-full w-full z-[60] bg-white border-b dark:bg-gray-800 dark:border-gray-700" tabindex="-1">

After:
<div id="hs-offcanvas-top" class="hs-offcanvas hidden hs-offcanvas-open:translate-y-0 -translate-y-full fixed top-0 inset-x-0 transition-all duration-300 transform max-h-40 h-full w-full z-[60] bg-white border-b dark:bg-gray-800 dark:border-gray-700" tabindex="-1">

It still works if adding that class. This also makes it consistent with the modal examples.

Consider removing drop shadow from switch handles and use fill colors, like bg-gray-400 or bg-gray-500.

We invite you to open a tab through JS always with an error
Uncaught ReferenceError: HSTab is not defined

I am using NextJs and on my _app.js I have the following (instructions from site)

useEffect(() => {
    import("preline")
  }, [])

Whenever I resize the window and wait for a bit I get the following runtime error: TypeError: o.closest is not a function and other errors relating to closest. How can I fix this?

Hey!
Thanks a lot for your work! I'd like to ask you for help - I've added preline to my astro-powered app, but it fails with error

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/alec/Code/Internal/Asgard Company/asgard_company_landing/node_modules/preline/dist/preline.js:2:224)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:834:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async nodeImport (file:///Users/alec/Code/Internal/Asgard%20Company/asgard_company_landing/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53516:21)

Node.js v18.4.0
make: *** [dev] Error 1

when I use import('preline'). How to fix it?

There is a console.log inside the scrollspy component which generates a lot of console activity. I'm guessing it's debug code so I've raised a PR to fix it. :-)

#23

Hello there ^^

Is TypeScript support planned ?
Do you require help doing so (if yes) ?
In that case, what do you expect from me / us ?

Hey everyone,

First of all I'm happy to see more open-source projects being built on top of the Tailwind CSS ecosystem. This is important for the overall industry and for the community to benefit from more content.

I've taken a good look at Preline and I must say that as one of the founders of Flowbite I have found a whole lot of similarities starting from the way to the documentation looks and feels and up to the components themselves.

Of course the code is not exactly the same, but the whole concept of Preline seems VERY similar to Flowbite.

As a contributor it would be nice to at least mention it if you've taken it as an inspiration.

Otherwise, I wish you good luck with the development of this library.

Thanks!

Edit: after taking a better look I've found that you've actually forked the Flowbite repository. You can see this if you take a look at the commit history on Preline and check out the authors from the package.json file:

d7f5670#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

I don't think there is anything else to comment on here until a response from the authors of Preline.

Edit: @green-cats I saw that you have just removed the evidence under the disguise of a commit message.

Commit removing the evidence: 8896fdf

Hi. I've followed the documenation at https://preline.co/docs/frameworks-nextjs.html to fully install Preline but I face an error when I require preline inside app/_app.ts file.

Error: implicitly has an 'any' type. Try npm i --save-dev @types/preline if it exists or add a new declaration (.d.ts) file containing declare module 'preline';ts(7016).
Also, if I try the above solution I get that the module cannot be found.

There are my dependencies if you need them: "dependencies": { "@prisma/client": "^4.10.1", "@types/node": "18.14.1", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "eslint": "8.35.0", "eslint-config-next": "13.2.1", "next": "13.2.1", "preline": "^1.7.0", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.43.2", "typescript": "4.9.5" }, "devDependencies": { "@tailwindcss/forms": "^0.5.3", "autoprefixer": "^10.4.13", "postcss": "^8.4.21", "prisma": "^4.10.1", "tailwindcss": "^3.2.7" }

I was told to open an issue here.

I've been browsing Preline components and I love it. But one thing was missing that I need which is typography.
Do you guys have an opinion on typography?

Mega menu on https://preline.co/examples/html/mega-menu-header.html# doesn't show in Safari 15.5, could be a browser extension interfering but I've tried disabling adguard and the few other plugins I have in incognito mode and it still doesn't show up when hovering over the link.

When investigating further, none of the click events on the preline.co page works. Menus, popovers, menus, etc. works just fine in Firefox, Chrome, Edge etc. but not in Safari, modals does not show either, just the gray faded backdrop.

Especially when you are working with react app replace <a href="#>Something with Helo it doesn't work.Navlink provided by the react router dom

I get this issue for using Tooltip classes, my project was using NextJs. this issue not oftenly happen, i can't figuring out what is the problem. I am following the installation for nextjs.
is it because the javascript not ready yet?

Hi!
I just tried this and worked pretty well! I liked the design and the components! 👍

Still, I put this in a React component and I got some warnings

Will be React supported in the future? (based on this I decided whether going fordward with this)

P.S: thanks for the UI Kit!

At present, there are only html code examples on the website, and I hope there can be jsx examples，It is more troublesome to use in react

Please tell me how to connect only Modal in Next 13. The Plugins page says to install not all Preline but only npm i @preline/overlay. I did but nothing works.

https://preline.co/plugins/html/modal.html

I am currently using the dropdown component on my web page. I have a few dropdowns in the page and all of them have the same code. The issue I am facing is that only one of the dropdowns is clickable and the others are not working properly. I would expect each dropdown to be clickable inside without closing.

According to the documentation, following code example is working well, but using this code multiple times makes conflicts somehow from js or css side.

<div class="mt-1 mx-1 sm:mt-1 hs-dropdown relative sm:inline-flex z-20 [--auto-close:inside]">
   <button id="hs-dropdown-auto-close-inside" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
     Clickable inside
     <svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
     </svg>
   </button>

   <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden mt-2 bg-white shadow-md rounded-lg p-2 mt-2 dark:bg-gray-800 dark:border dark:border-gray-700" aria-labelledby="hs-dropdown-auto-close-inside">
     <div class="relative flex items-start py-2 px-3 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
       <div class="flex items-center h-5 mt-1">
         <input id="hs-dropdown-item-checkbox-delete" name="hs-dropdown-item-checkbox-delete" type="checkbox" class="border-gray-200 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked>
       </div>
       <label for="hs-dropdown-item-checkbox-delete" class="ml-3.5">
         <span class="mt-1 block text-sm font-semibold text-gray-800 dark:text-gray-300">Delete</span>
       </label>
     </div>
     <div class="relative flex items-start py-2 px-3 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
       <div class="flex items-center h-5 mt-1">
         <input id="hs-dropdown-item-checkbox-archive" name="hs-dropdown-item-checkbox-archive" type="checkbox" class="border-gray-200 rounded text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
       </div>
       <label for="hs-dropdown-item-checkbox-archive" class="ml-3.5">
         <span class="mt-1 block text-sm font-semibold text-gray-800 dark:text-gray-300">Archive</span>
       </label>
     </div>
   </div>
 </div>

Below is a video of this bug