I have 2 panels with a list group on each panel. I am using material design.
Issue:
onclick first list-item on panel 1 it is not getting selected and changing style = "success" or highlighting the selected list, same for the panel 2.
Looking for the solution: onclick on list-item it should change the style or active or change the background color. Highlight the selected item and remove it when clicking on another item on the respective panel.
original code
I want output like this Bootstrap code. This was done in bootstrap but looking for a solution in material UI
You will need to add the following lines
In cards
selected={card==selectedCard}
in item
selected={item==selectedCheck}
I believe it should work after this.
Related
I'm looking for a way to put checkboxes in an antd Select, instead of the icon displayed when an item is selected.
I have tried to use the menuItemSelectedIcon prop, but it only displays the Checkbox when the item is selected, which is not what I'm looking for.
I'm trying to display a checkbox that is checked when the item is selected, and isn't when the item isn't.
I'm kind of looking for an equivalent of the "treeCheckable" prop available for the TreeSelect.
Is there a way to put checkboxes inside a (simple) Select ?
use menuItemSelectedIcon this prop... u can read abut it in Api section of Select component. Then, do same style in options focus, active & select selector. style should be such as the icon that you will use became different color when it is focused, active or select. you can change options global classname when it will be selected. By doing this, it will look like the checkbox is working but behind the scene it's just a icon of checkbox which will change style .
I am Customizing the datatable-pager in ngx-dataTable and can able to add footers and pagers. I have only two issues as follows -
For prev / Next / First and Last button , How to show text instead of icon?
How to add totalVisible property to show first 3 and last 3 pages in the pager and show a ... disabled button in between?
currently I am writing the following code -
<ngx-datatable-footer>
<ng-template ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-selectedCount="selectedCount"
let-curPage="curPage"
let-offset="offset"
let-isVisible="isVisible"
>
<datatable-pager
[pagerLeftArrowIcon]="datatable-icon-Left"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
(change)="table.onFooterPage($event)">
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
I need to pass some Text Props instead of the arro icons and next/prev icons to show text. And I also need to show first 3 and last 3 page buttons in the pager and show a ... disabled button in between in case there are more than 7 page to show Just like
to replace icons with text you will have to replace datatable-pager with your component, and provide the functionality. You can see here how datatable-pager has been implemented and create your own component.
Link: https://github.com/swimlane/ngx-datatable/blob/master/src/components/footer/pager.component.ts
If you need any help feel free to ask.
above provided url is not working, you can check below url which showing correct code https://github.com/swimlane/ngx-datatable/blob/master/projects/swimlane/ngx-datatable/src/lib/components/footer/pager.component.ts
I'd like to use SemanticUI to display different sidebars based on selected menu
I've tried one way, but it doesn't seem to work. Codepen link
Here, i have 2 menu items for the sidebar, i need to show 'first_sidebar' if i'm inside the menu 'First', if i'm inside 'Second', i need to show the 'second-sidebar'.
Thanks!
You are trying to show and hide sidebar as an ordinary HTML element with jQuery, using $("div.second_sidebar").hide() and $("div.first_sidebar").show().
But, since sidebars are Semantic UI element that you initialized with .sidebar() method, you should use this same method to show and hide sidebars, e.g.:
$("div.second_sidebar").sidebar('hide');
$("div.first_sidebar").sidebar('show');
Reference is here:
https://semantic-ui.com/modules/sidebar.html#/usage
I'm new to Semantic UI and I want to implement following menu as seen in Semantic UI's documentation on right side. I want to implement this functionallity to fixed top menu - so when id of header element is reached, active element in menu should be changed. I was looking at code of docs.js where this is implemented for documentation's site, but this code is pretty complex if you are using Semantic UI for the first time. I have those classes for my menu: ui large top fixed hidden menu
Is there already built-in following menu (probably not since it's not mentioned in docs?) or I add it with jQuery?
semantic-ui only gives you the styling. Once you click on a menu item, it is up to you to update the item's active status.
This is how we have it implemented in our code -
const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
menuNav.removeClass('active');
$(this).addClass('active');
});
The other thing to remember is that you need to check the URL on page load so that you can set the appropriate item label to active.
All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?
Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.