WireUI components make effective use of a range of CSS utilities that are designed to cater to the needs of developers at all levels of expertise. These utilities offer a versatile toolkit for handling styling, layout, and responsiveness, making it easier for developers to create visually appealing and responsive user interfaces.
Information!
To conceal the scrollbar, simply apply the .hide-scrollbar CSS class.
To scroll through the content, press and hold the shift key while using the mouse wheel.
To scroll through the content, press and hold the shift key while using the mouse wheel.
1<div class="w-full p-2 overflow-x-auto h-52"> 2 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-negative-500" 3 style="width: 900px"> 4 <div class="absolute w-full h-8 border-white border-dashed border-y-8"></div> 5 </div> 6</div> 7 8<div class="w-full p-2 overflow-x-auto h-52 hide-scrollbar"> 9 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-positive-500"10 style="width: 900px">11 <div class="absolute w-full h-8 border-white border-dotted border-y-8"></div>12 </div>13</div>
Information!
You can customize the scrollbar appearance by applying the .soft-scrollbar CSS class.
1<div class="w-full p-2 overflow-x-auto h-52"> 2 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-negative-500" 3 style="width: 900px"> 4 <div class="absolute w-full h-8 border-white border-dashed border-y-8"></div> 5 </div> 6</div> 7 8<div class="w-full p-2 overflow-x-auto h-52 soft-scrollbar"> 9 <div class="relative flex items-center border rounded-lg shadow-lg h-44 bg-positive-500"10 style="width: 900px">11 <div class="absolute w-full h-8 border-white border-dotted border-y-8"></div>12 </div>13</div>