So I understand that I can do a button group like this, which is great.
However how can I make it so that when say button one is pressed that it looks like it as been selected? As all this does is a click effect?
Basically what I want to do is when a button is clicked it changes an input value to the value of the button. But I would like the button to look like it was selected.
<ButtonGroup disableElevation variant="contained" color="primary">
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>
I'd use state to keep track of the selected Button and utilize the color prop to assign the color. For arbitrary color, you can use the MUI ThemeProvider or makeStyles
function App() {
const [selectedBtn, setSelectedBtn] = React.useState(-1);
return(
<div>
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color={selectedBtn === 1 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(1)}>One</Button>
<Button color={selectedBtn === 2 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(2)}>Two</Button>
</ButtonGroup>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { ButtonGroup, Button } = MaterialUI;
</script>
</body>
You can use Toggle Buttons - https://material-ui.com/components/toggle-button.
Combine that with the ToggleButtonGroup API and you should be good to go - https://material-ui.com/api/toggle-button-group/#togglebuttongroup-api.
Related
I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss
In my JQUerymobile pages, I have embedded popup div.
Here is an example of my pages content :
<html>
<head>...</head>
<body>
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >...</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b">
</div>
</div>
<div data-role="popup" id="popupTwo" data-dom-cache="true" data-theme="b">
...
</div>
</body>
</html>
I navigate from pages to anothers. Suddently, my embedded popups disappear from my DOM when I inspect my code.
As shown in my example, the popup location in the source code doesn't seem to change anything to the problem.
Since popups are removed from DOM, the code bellow does nothing (it actually worked before) :
$('#popupOne').trigger('create');
$('#popupOne').popup({ transition: "slidedown", position:"position-header" });
$('#popupOne').popup('open');
Is there a solution to keep my popups in my DOM ?
Is there a better location to embed popups in source code ?
Another way could be to load a popup from an external (cached) page but i never achieved to do that by javascript.
Any idea to solve the problem (or a workaround) ?
(Both) your HTML placements might be incorrect here. Remove the popupOne markup from the end of the page and paste it inside the div with data-role=content like this :
<div data-role="page" id="myPage" data-dom-cache="true" data-theme="a">
<div data-role="content" data-theme="a" >
<div data-role="popup" id="popupOne" data-dom-cache="true" data-theme="b"></div>
</div>
<div data-role="footer" data-theme="a" data-id="footer-sante" data-position="fixed">...</div>
</div>
And if you want to reuse popups, I suggest you go the JS way. You could create popups n the fly and open them. Here's some code which does just that. Feel free to alter it to any thing you want :)
$.extend({
"makePopup": function (text) {
var $popup;
//creat popup element
$popup = $("<div/>", {
"data-role": "popup",
"data-theme": "a",
"data-overlay-theme": "a",
"data-transition": "pop"
}).popup();
//create close element
var $close = $("<a/>", {
"data-role": "button",
"html": "Close",
"href": "#",
"data-theme": "e"
}).on("click", function () {
//click event of close element
$(this).closest("[data-role=popup]").popup("close");
}).buttonMarkup();
//create content div - makes a nice jQM page structure.
var $content = $("<div/>", {
"data-role": "content",
//change this any way you want- Im just adding the text from clicked link here.
"html": "<span>" + text + "</span>"
});
//append $close to $content, then append $content to $popup
$content.append($close).appendTo($popup);
return $popup;
}
});
And when you want to use this, just do this,
var popupEl = $.makePopup("Some HTML");
And then you could, say, open it :
popupEl.popup("open");
Or simply,
$.makePopup("Some HTML").popup("open");
Here's a demo : http://jsfiddle.net/hungerpain/xjz3V/
Hope this is what you wanted :)
Hi i have used an accordion method but in this it opens the div element from top left to bottom right. i don't want like that i want this one to open from top to bottom.. help me out this please??????? Here is my code
<script type="text/javascript">
jQuery(document).ready(function(){
$('#accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
</script>
<div id="accordion">
<h3 class="head">First header</h3>
<div style="background:#f00;">
<p>First content</p>
<p>second content</p>
<p>third content</p>
<p>fourth content</p>
<p>fifth content</p>
<p>six content</p>
</div>
</div>
try this jquery code and edit what u want
(function($) {
var allPanels = $('.accordion .dd').hide();
$('.accordion .dt a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery)
http://jsfiddle.net/X9sz8/
I have HTML similar to this :
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<Div class="blackBox" style="visibility:hidden;"></div>
<Div class="SubFotm" style="visibility:hidden;"></div>
</div>
Now I can properly find the trigger for my button click in my script, but I'm not able to target only the closet blackbox to turn it visible.
Currently I'm doing :
if (PButtonName=="Fermer") {
$(this).closest("div .ProfileForm").remove(); // Closing Profile Form
} else if (PButtonName=="plusAdresse") {
alert('In');
$(this).closest("div .BlackBox").css("visibility","visible");
}
I can get the alert "In" to show, but not the BlackBox
If I change the
$(this).closest("div .BlackBox").css("visibility","visible");
for :
$("div .FormBlackBox").css("visibility","visible");
It will show, but will also show all the black box in the document.
If you are using the above HTML, or something similar, I would do it using a reference to the parents.
instead of:
$(".MainForm").closest("div .BlackBox").css('visibility','visible');
use
$(this).parents('.MainForm').children('.BlackBox').css('visibility','visible');
This is assuming you have more than one MainForm div and they all have a single child with the BlackBox class.
here is an example.
Instead of what you have done just add styles display:none; to your divs and then show them whenever you want.So you can do this as below:
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<div class="blackBox" style="display:none;"></div>
<div class="SubFotm" style="display:none;"></div>
</div>
and then in your script
if (PButtonName=="Fermer")
{
$(".MainForm").closest("div .ProfileForm").remove(); // Closing Profile Form
}
else if (PButtonName=="plusAdresse")
{
alert('In');
$(".MainForm").closest("div .BlackBox").show();
}
And I will recommend you using Switch case instead of loops at this place.
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected