Ill formed code

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
joeycon
Posts: 1
Joined: 23 Mar 2023, 23:51

24 Mar 2023, 10:13

I've purchased PrimeBlocks. The first code which I looked at is the
Application/Multi Column Layout.

A sample of the code is below.
The code has 2 classNames for the same <a> tag
Please advise how I should use... (without actually rewriting it)


<div className="overflow-y-auto mt-3">
<ul className="list-none py-3 px-2 m-0">
<li className="mb-2">
<a className="p-ripple" onClick={() => setActiveTab(0)}
className={classNames('p-ripple flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-indigo-400 border-round text-indigo-100 hover:text-indigo-50 transition-duration-150 transition-colors', { 'bg-indigo-700': activeTab === 0 })}>
<i className="pi pi-home text-lg"></i>
<Ripple />
</a>
</li>

habubey
Posts: 89
Joined: 24 Aug 2022, 13:17

29 Mar 2023, 11:06

Hey there,

The classNames() function is a utility function that allows you to conditionally concatenate multiple class names together.
The p-ripple, flex, align-items-center, cursor-pointer, py-3, pl-0, pr-2, justify-content-center, hover:bg-indigo-600, text-indigo-100, hover:text-indigo-50, transition-duration-150 and transition-colors class names are always applied.

The object passed as the second argument { "bg-indigo-500": activeTab2 === 0 } means that the class name bg-indigo-500 will only be applied when the value of activeTab2 is equal to 0.

I hope these answer helps you
Best
Bugra Beyduz
PrimeReact Core Developer
Github profile: https://github.com/habubey

Post Reply

Return to “PrimeBlocks for PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests