htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

Accordion button doesn't toggle with open accordion #403

Closed craigharman closed 4 months ago

craigharman commented 4 months ago

Summary

Clicking an accordion button to open it doesn't rotate the ^

Steps to Reproduce

  1. Copy the accordion HTML from this example: https://preline.co/docs/accordion.html#with-title-and-arrow-stretched
  2. Install preline via npm i preline
  3. Import via import preline from 'preline/dist/preline'
  4. Load the page

Demo Link

https://codesandbox.io/p/devbox/competent-thompson-fcfyzj?file=/src/index.mjs:3,1&welcome=true

Expected Behavior

The ^ character should turn upside down when a panel is opened (like it does on the demo page).

Actual Behavior

The character stays the same.

All other behaviour works as expected.

Screenshots

No response

olegpix commented 4 months ago

Summary

Clicking an accordion button to open it doesn't rotate the ^

Steps to Reproduce

  1. Copy the accordion HTML from this example: https://preline.co/docs/accordion.html#with-title-and-arrow-stretched
  2. Install preline via npm i preline
  3. Import via import preline from 'preline/dist/preline'
  4. Load the page

Demo Link

https://codesandbox.io/p/devbox/competent-thompson-fcfyzj?file=/src/index.mjs:3,1&welcome=true

Expected Behavior

The ^ character should turn upside down when a panel is opened (like it does on the demo page).

Actual Behavior

The character stays the same.

All other behaviour works as expected.

Screenshots

No response

Hi, It seems you forgot to add the preline/plugin.js file to the the tailwind.config.js.

export default {
  content: ["src/index.html"],
  theme: {},
  plugins: [require("./node_modules/preline/plugin")],
};
craigharman commented 3 months ago

I've added that to the demo via:

import preline from 'preline/plugin'

export default {
  content: ["src/index.html"],
  theme: {},
  plugins: [preline],
};

Still doesn't seem to work.