Comments (3)
Sure!
Something like this:
<div class="flex flex-wrap">
<button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default</button>
<button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800">Light</button>
<button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-gray-800 focus:ring-gray-300 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700">Dark</button>
</div>
So, base styles (styles that applies to all variants) first, followed by variant-specific after. Ideally, within the variant specific, you could also follow an order (eg: bg-related classes first, text-related, border-related. I have not done this for all classes in the example above, but hope it's clear enough). Then, all the dark classes follow soon after.
This makes it much easier, at a glance, to see which classes are different for each variant.
While we're talking about button and it's variants, any reason the disabled variant uses color-specific classes (eg: it replaces the bg-blue-700
to bg-blue-400
instead of using: opacity-50
(or any other number) class?
from flowbite.
Hey @arthurgeek,
Can you give me an example of how you would like to see the first example of buttons?
Thanks.
from flowbite.
It makes sense and it would definitely improve the readability of the components. If you feel like you're willing to invest your time into organizing the class orders in a particular way, I would be more than glad to approve your PR for that. Others could join in helping as well.
Before doing that, however, we should decide on the order of the classes. I recommend that we should start with the non-variant related classes (ie. bg-red-100 or text-gray-200), then follow up with the state variants (ie. hover, focus), and lastly use the dark version in the same order (dark with normal classes, then dark with state variants).
Does that make sense?
So for example the buttons would be something like:
<div class="flex flex-wrap">
<button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default</button>
<button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-gray-900 bg-white border border-gray-300 focus:ring-4 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800">Light</button>
<button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-gray-800 focus:ring-4 focus:ring-gray-300 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700">Dark</button>
</div>
It would be even more awesome if this would be somehow automated using a script. In fact, this would be a future-proof solution for all components. Not sure where to start, though.
Regarding your question about the disabled button, yes, it would be better to use the opacity. With the new TW v3.0 update, however, we could also just use bg-blue-700/50
.
We've been looking into improving the code block from the documentation by also changing the primary color (which is blue) to one available from the color palette and later generating an RTL version of each component dynamically.
from flowbite.
Related Issues (20)
- Bug: Sidebar Fails to Darken When Right-Side Drawer Opens
- Flowbite Navigation Routing Mistake
- Event object isn't correctly passed to Dropdown.Item click handler
- Uncaught TypeError: Cannot read properties of null (reading 'render') Turbo-rails + Flowbite
- Support the Popover api
- Blazor SSR Flowbite not initializing after navigation HOT 1
- DatePicker does not work in Blazor wasm
- Dropdown close with trigger type hover
- Image Placeholder Should Display Only Image Without Text
- Modal Dialog not showing when navigating back to the same route using Router Outlet (Angular)
- Indeterminate Checkbox should not change on hover if disabled.
- Popover and Tooltip cause overflow (white space in page) when window resize HOT 1
- Datarange picker does not become inline HOT 1
- Modal over Modal, can not be removed appropriately HOT 1
- Two handles on range sladers
- Dropdown Component Not Initializing correctly on Navigation with Angular RouterLink
- [Feature] - make components in other framwroks also not only html HOT 1
- How to use Pause() method to stop slider on Hover in Tailwind CSS Carousel - Flowbite
- Carousel component stops working when navigating back to page in Astro with View Transitions
- Select component > Multiple selection bug HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flowbite.