I have a requirement in which the paper-radio button needs to be replaced by custom icons and keeping the feature of the radio button intact.
How can I achieve that?
Related
I have a group of <buttons> that I would like to act similarly to radio buttons. When a button is clicked, I need it to stay active, and when another button in that set is clicked, it needs to be made inactive and the new button needs to become active. I am using React.
I've tried different solutions and none have worked. Is there a way to do it with vanilla JS or React? Should I just use jQuery?
You can try some npm package that provides Radio Componenet to achieve this. You can search for packages and use the one you like. I am currently using Mantine which provides a lot of React components.
However, This is the one that I made. Take a look at it. Here is the link.
https://codesandbox.io/s/cold-water-ij5bfx?file=/src/App.js.
I am trying to get images into a grid on a Nativescript Angular App and then be able to tick them and move to the next page with the id's or names of those images.
i can do the image grid but i can't make them tickable. I'd be okayy with even just changing transparency on the clicked ones if possible.
Something like this
You could use RadListView with GridLayout for this purpose.
Checkmark on the Image is something you have to deal with your ng-template. Show the checkmark based on a flag in your data item, toggle that flag upon itemTap.
Can I have a popup when i click on a button let's say download button. And the popup should contain various buttons which gets me to some other pages.
Yes you can, there are several methods for this.
But the simplest way to achieve this is with CSS MODALS. A modal is a dialog box/popup window that is displayed on top of the current page. Here you can include as many extra buttons as you wish.
For further information please see:
https://www.w3schools.com/howto/howto_css_modals.asp
I’m looking to create a pop up where by the user inputs data, then select one of two radio options by the UI seems to screw up when I have a combination of both text type and radio type in a pop-up.
Here is my code:
I was also looking for same thing today.
But look at this discussion, which says mixing of radio, checkbox or text box is not available right now.
I also tried to add mixture of radio and text field in alert. But styling never appeared correct.
I am moving on to implement this feature using a ionic page so that I can use Ionic Modal. This behaves as a modal window on large screen and as pushed page in smaller screen.
I needed to send back data from parent page to child page and other way too. Thus Ionic Modal suited best for this in my situation which can be used on component/page.
Refert to this detailed usage instructions for Ionic Modal.
Same feature has been requested from Ionic team.
I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me