I am new to react, one of our dropdown is full screen on mobile view so we need a close button within the menu.
const CloseMenu= (e) => {
e?.preventDefault();
// Some logic to close the dropdown
}
DropDown
<Dropdown>
<Dropdown.Toggle variant="link">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Header>
<h4>Menu Title</h4>
<Button variant="link" onClick={CloseMenu}> X </Button>
</Dropdown.Header>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
I searching but couldn't find the solution. Kindly guide me, thank you.
OPs requirements are as following:
When closed: on toggle click -> show dropdown
When opened: on toggle click -> hide dropdown
When opened: on "X" click -> hide dropdown
When opened: on outside click -> hide dropdown
Make your Dropdown controlled by introducing a show state. Then define an onToggle handler:
const [show, setShow] = React.useState(false);
...
<Dropdown show={show} onToggle={(isOpen) => setShow(isOpen)}>
When you click on "X", the dropdown is closed automatically. This is due to Dropdown's property autoClose, which ist set to true per default;
https://codesandbox.io/s/infallible-lake-d0tfgi
Related
i have this code :
<div class="box">
<button class="box-more">show more</button>
</div>
the button "show more" will show more contents if click on it .
i want if scroll the page down (at the end of the page) the button will auto clicked and show more contents.
again if scroll the page down (after showing the new contents) the button will auto clicked and show more contents .
in other words :
i want the button auto click in evry scroll down .
i try this code that didnot works for me :
`
var mybutton = document.getElementsByClassName("box-more")[0];
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.click();
}
}
`
what is the best code that can do this jop ?
scroll down will click the button ?
Is it possible to have a TabNavigator with a tab bar button that launched a modal screen? Basically mimic the behavior of Instagram's center "Share" button.
Assuming you are clear with the concepts of react-redux. You can use it to achieve this task. On the click of the tab perform an action that will set/unset the props that you can use to show/hide the modal.
Your reducer for this will be like,
case SET_MODAL_VISIBILITY:
state = {
...state,
modalVisible: !state.modalVisible,
}
the above case will set/unset the modalVisible prop which can be used in a component that is exported with connect keyword of react-redux.
Than your modal will be like
<Modal
visible={this.props.modalVisible}
onRequestClose={() => //any function you want to call}
//any other attributes you want to use
>
<View>
//any view you want to give your modal to
</View>
<Modal/>
I have a kendo modal window in my angular app. Sometimes I auto-close the window after a second. At those times, I'd like to hide the Close [x] button, but at other times, not. Can it be done just before the window is opened?
if (autoCloseDelay) {
// hide the close [x] button here ??
$timeout( function() {
$scope.modalWindow.close();
}, autoCloseDelay, $scope);
}
$scope.modalWindow.open();
If you don't want to play with CSS, you can use setOptions to set programmatically the actions.
Example for removing the Close button:
// Get current actions
var actions = $scope.modalWindow.options.actions;
// Remove "Close" button
actions.splice(actions.indexOf("Close"), 1);
// Set the new options
$scope.modalWindow.setOptions({ actions : actions });
I believe you can do it like this:
// hide the close [x] button
$scope.modalWindow.parent().find(".k-window-action").css("visibility", "hidden");
Here is a sample jsFiddle
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit