Create radio button style in ReactJS - javascript

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

Related

toggle switch only on confirmation from the user using angular, typescript

I have a toggle switch. when i turn it off and based on a variable, a pop up modal will be displayed asking to confirm the turn off. if user clicks on turn off button , only then the toggle should turn off. if user clicks on cancel button in the modal, then the toggle should not turn off , it should be in on state only. I found solutions for this problem using jQuery. but I don't want to use jQuery. so please give solutions in angular, typescript, bootstrap. I'm new to angular. hence it would be more understandable if you could explain the solution. thanks in advance.
Have you got the modal working yet? I assume you're using event AND two way binding on the toggel to listed for changs. You should be able to pass data back from the modal - perhaps a boolean, then you can set the toggle's value based what was passed back from the modal.

Styling issues on primeNG Dropdown control

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

Is tabbing behavior affected when used inside an iframe?

I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!
With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!

Hide/expand layout in vaadin

There's StackExchange button with a dropdown layout on this site on the top-left side. If you click on it, it opens, if you click on somewhere else, it's hidden.
Is it possible to create a similar composition in vaadin application given a button and layout?
Two conditions are:
Know the state of the layout(hidden or shown) from the code(that's why javascript is not appropriate).
Button should expand and hide the layout and the rest area on the click should only hide it(the same as here with the StackExchange button).
Does anyone know the solution? Thanks a lot.
Two posibilities :
Native Vaadin : PopupView. Here's an example of using it in the Vaadin Sampler. No control over the placing of the popup, and showing the popup can't be controlled by anything other than the view itself.
Vaadin Addon : Overlays Allows you to overlay any component (e.g. a layout) relative to any other component, can can be controlled by a seaprate component (e.g. a button)

HTML Radio buttons styled as Toggle Buttons

Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.
I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.
What's the best way to do this?
(source: freemusicsoftware.info)
There are a number of JavaScript plugins for doing this:
Prototype demo
Just replace the images they're using with your images and you should be good to go.
Probably the best way is to create a real radio button, and then control the rendering of an element based upon the status on the radio button with javascript. If the radio button is selected, render background-a, else background-b (or use a sprite). Control the status of the radio button via the click event of your custom element.
Using this jQuery UI plugin, you can customize radio buttons and/or checkboxes to look however you want.

Categories