Styling issues on primeNG Dropdown control - javascript

I have used the grouped dropdown component from PrimeNG, I want the dropdown's
First section to have a toggle button.
Second section to have options which would work as a select component works.
I need suggestions on which component could be used as a base component to create a similar functionality. Like shown in the image https://imgur.com/NHIIoIO
I was able to use this component (https://www.primefaces.org/primeng/#/dropdown) to style the dropdown to look like the wanted component, missing the toggle button section, But when the toggle button is added in to the dropdown template, and the toggle button is clicked the dropdown closes.
I just want suggestions on the component shown in the image, not looking for code.

You can use ng-zorro for a similar output.
Here is the link of documentation.
https://ng.ant.design/docs/introduce/en
Also, I have created a sample similar to the question in Stackblitz
You can check it here
https://stackblitz.com/edit/custom-dropdown-template-using-ngzorro

Related

How to target a list of DOM elements within React

So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.
As you can see from me posting here, it's not going so well! I'm already running into road blocks.
I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.
I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.
You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx
You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/
What's the best way to go about this?
You need a logic like Accordion control in Material UI. As in my comment, here is the example.
https://material-ui.com/components/accordion/#controlled-accordion

Does Antd Table have multiple custom selection?

I am using the Antd Table with the custom selection option that's demoed here.
I was able to get my code to work like the demo, where I click on one item from the dropdown menu and the respective table rows will be selected.
But I would like to be able to select multiple items from the dropdown menu and have all respective rows be selected in the table.
Can somebody please throw some light into this? Thanks very much!
I was able to render a Checkbox component in place of each of the options listed in the dropdown, and use the onChange hook on checking/unchecking to trigger the rowSelection.

which dom element will work outside bootstrap dropdown-item to display an default image based on open dropdown?

In my menu , i have two columns, one for submenu text and other for respective images. this portion is working fine. But i want to set a default image, which will display when user will not hover on any dropdown item or out of dropdown. but i have 2-3 dropdown menu. how to identify each individually. Thanks
code[https://jsfiddle.net/shreya_js/4h7sgpdL/48/]
I am not sure if I got your question right.
If you need a different default image for every main menu point, then append a url/image-path to the li-tag via data-src for example.
EDIT: something like this?
https://jsfiddle.net/2a3joxfz/7/
all a-tags got an rel attribute.

Create radio button style in ReactJS

I'm new to ReactJS and I really want to know what is the best practice for creating a Radio button style. Actually kinda like switching between tabs. For example, I have a layout like this one
When use click on each icon, it switches to its own tab.
I really want to know what is the best way to do instead of using pure radio button? Btw, the icon will have a image and div text inside of a div wrap. Thanks
The best way would be to have a component that is your tab controller. Then that component tracks which tab is selected, and will render the selected component

How to populate modal form with a component's state with Reactjs?

I have many child React components that are rendered from a parent Component and upon clicking the name of each one, I'd like to be able to edit the state of the particular component that was clicked, however I am not sure how to best "pass" the current state into the modal so that they can be edited in the form on the modal.
I have seen implementations where the modal fields are set with jquery (.val()) after the click, which does not seem like the idiomatic react way to do this.
How should I prepopulate the modal fields from the particular component and where should the modal be rendered exactly?
Depending on the modal you use, you should simply populate those values using props into a modal component. You can create a more generic modal component and feed this modal your props, or a specific modal if you don't think you could create a generic one that fits more use cases than this specific one. It's hard to give examples of code without seeing/knowing which one you use, but below link of react-bootstrap's implementation of the modal might help you!
React-bootstrap's implementation of the Bootstrap modal.

Categories