Comments (5)
It is a feature carried over from AdminLTE and adapted to work with Tabler.
Accordions are using card internally, but to me they are two different features.
The issue appears if you use other card action buttons (I will update the demo app to include examples):
So if we change it, it must go hand in hand with additional buttons and change their appearance as well.
I updated the demo app to showcase the issue in combination with the available action_cardtoolbutton
macro:
If you use action buttons in card headers, they should all look the same. The accordion button style is different.
And regular end user already have an issue finding action buttons, let alone if we would remove the border.
Probably we should add an embed and helper macros for the accordion and then come back here? Or do you have another proposal?
from tablerbundle.
IMO from a dev perspective (not Bundle dev),
action buttons in "card headers" and "collapsible" cannot be together.
With your example, it's weird to be able to a edit card that is not "open" or readable.
Even if the edit button trigger the collapse event.
Anyway,
with what Tabler has done on the accordion, we cannot add multiple button on the header.
Because the title is one GIANT button.
What is cool with that is the click event which open the "card" is binded anywhere on the "header".
At the end, I don't know what is the better 😄
Collapsible card is useful, but out of bound from Tabler.
Accordion is cool, but need a full implementation like card embed today..
I don't know if I have the time, but I can take a look how to make a macro about that
from tablerbundle.
I've achieved to make a false "card" from an accordion. (live code with Firefox from Tabler.io)
<div class="page-body">
<div class="container-xl">
<div id="accordion-example" class="card accordion">
<div class="">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
<i class="fas fa-search me-1"></i>Filtre </button>
</h2>
<div id="collapse-1" data-bs-parent="#accordion-example" style="" class="accordion-collapse border-top collapse show">
<div class="accordion-body">
<div class="row">
<div class="col-auto">
<div class="mb-3">
<label class="form-label" for="tiers_filter_type">Type</label>
<select id="tiers_filter_type" name="tiers_filter[type]" class="form-select">
<option value="">Tous</option>
<option value="client">Client</option>
<option value="entreprise">Entreprise</option>
</select>
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="tiers_filter_socialReason" class="form-label">Raison sociale</label>
<input type="text" id="tiers_filter_socialReason" name="tiers_filter[socialReason]" placeholder="Raison sociale" class="form-control">
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="d-flex">
<button type="submit" id="tiers_filter_reset" name="tiers_filter[reset]" class="btn btn-warning reset-cookie-form-action btn">
<i class="fas fa-eraser me-1"></i>Effacer filtre </button>
<button type="submit" id="tiers_filter_filter_data" name="tiers_filter[filter_data]" class="btn btn-primary ms-auto btn">
<i class="fas fa-search me-1"></i>Filtrer </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
from tablerbundle.
@kevinpapst new version of Cards from Tabler.io is here : https://preview.tabler.io/card-actions.html
There's now an .card-actions
class to allow buttons and other.
ATE, we should implement accordions
and new cards
from tablerbundle.
The class card-actions
is already in use in the card embed.
I updated to the latest beta release and there were no changes showing.
Maybe you can double check.
Yes to the accordion! I'd like to have that as well, then we can remove the collapsible button from the card.
from tablerbundle.
Related Issues (20)
- Component - Carousel HOT 3
- Include a Screenshot from the demo project in the project readme HOT 1
- Menu item allows `null` route name but not when rendered HOT 1
- Card embed block names HOT 5
- Update Tabler to beta15 HOT 2
- [Twig] File Name convention HOT 1
- [Button] `btn-sm` and `icon` class
- [Menu] Set it more customizable? HOT 5
- [Trans] Auto trans on devs content should not be a thing HOT 10
- [Twig] Rename all `url` params to `href`
- Support Symfony 7 in TablerBundle HOT 2
- release 1.0 HOT 2
- support ux components HOT 6
- Flash messages not displayed after redirectToRoute() HOT 9
- [Docs] Dynamic theme options (like dark mode) HOT 3
- Update to beta 20 HOT 1
- [Feature] Image Check Checkbox/Radio Inputs HOT 3
- [Icon] Bye bye `tabler_icon` ➡️ Welcome Symfony UX Icon 🎉 HOT 9
- [Help needed] How do I use this bundle with Symfony's new AssetMapper? HOT 1
- addChild() return void, docs show fluent setter
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 tablerbundle.