Open code-enginner opened 1 year ago
Hello! If you would like to add the class customization elements as a data attributes you have to use the kebab-case
instead of pascalCase
that is used in the API tab
https://tw-elements.com/docs/standard/forms/inputs/#api-section-classes
pascalCase
should be used when you are initializing a component with use of JS => for example:
new Input( myInput, options, { notchLeading: "new-classes" } )
The data attribute for notchLeading
should look like this:
<div
....
data-te-class-notch-leading="pointer-events-none border border-solid box-border bg-neutral-300 transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-l-0 rounded-r-[0.25rem] group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0"
...
Hope that helps!
Describe the bug I want to customize an input according to the documentation, but none of the data-te-class-notchLeading classes work and do not apply. for example when i set:
None of these classes work.
can you guide me, by providing an example thank you.
This is my code: