Comments (4)
If you could open the dropdowns individually, it will work, for now if you make a nested menu when opening the main one, it opens the second one automatically, I understand your point anyway, thank you very much for your attention.
from bulmajs.
Hey @hellokvn ,
Thanks for your suggestion. I believe this will be possible when the extended API is implemented as this would allow you to listen for an open even and then manually close all of your other drop downs.
This may even be possible now by using one of the internal methods drop down has. Although this is undocumented and could change since its not intended for public use.
I'll make sure this is possible as part of the API additions as I do think it would be useful.
from bulmajs.
What is the best way to implement multiple dropdowns at this time ?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="w0-dropdown">
<span>Dropdown</span>
<span class="icon is-small"><i class="">↓</i></span>
</button>
</div>
<div id="w0-dropdown" class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item" href="#">Dropdown item</a>
<a class="dropdown-item" href="#">Other dropdown item</a>
<a class="dropdown-item is-active" href="#">Active dropdown item</a>
<a class="dropdown-item" href="#">Other dropdown item</a>
<hr class="dropdown-divider">
<a class="dropdown-item" href="#">With a divider</a>
<hr class="dropdown-divider">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="w1-dropdown">
<span>Sub-Dropdown</span>
<span class="icon is-small"><i class="">↓</i></span>
</button>
</div>
<div id="w1-dropdown" class="dropdown-menu">
<div class="dropdown-content">
<h6 class="dropdown-header">Dropdown Options: </h6>
<hr class="dropdown-divider">
<a class="dropdown-item" href="/page1">Option 1</a>
<a class="dropdown-item" href="/page2">Option 2</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@vizuaalog/[email protected]/dist/dropdown.js"></script>
How to make the open/close
of the second dropdown work?
Thks.
from bulmajs.
Hey @terabytesoftw,
As far as I know Bulma does not support nested dropdowns like that and so BulmaJS will also not support it. If you're looking for that functionality then you would need to write custom code and/or a custom BulmaJS plugin.
This ticket, unless I'm mistaken, is around closing all other dropdowns on the page when another is opened.
from bulmajs.
Related Issues (20)
- Additional API methods for Alert
- Additional API methods for Dropdown
- Additional API methods for the file component
- Additional API methods for the message component
- Additional API methods for the Modal component
- Additional API methods for navbar
- Additional API methods for notification
- Additional API methods for the tabs component
- Panel tabs are nor filtered by default (display all on load until manually filtered) HOT 4
- Webpack - Module parse failed: Unexpected token HOT 4
- Support tree table HOT 1
- Cannot use import statement outside a module HOT 2
- Window is not defined when using nextjs HOT 5
- Navbar plugin does not work on dynamically inserted content HOT 3
- Trying to use it in electron, imports problems HOT 2
- Uncaught TypeError: this.triggerElement is null HOT 3
- Project alive? HOT 2
- CDN to allow more accessibility regarding installation HOT 1
- Creating modal: A plugin requires a root and/or a parent. HOT 1
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 bulmajs.