I am looking to implement a Tabs component containing lots (7-9) Tab components for a desktop view. I do not want to use the scrollable tabs when it exceeds the viewport width on the Tabs, instead I want the extra Tab items to be in a More dropdown menu just like the example docs show below:
Questions:
What is the intended implementation to achieve this? I actually would like the exact same functionality they describe as well where when I click an item from the dropdown above (for example, books), that will swap positions with the Tab directly to the left of the More dropdown, as shown in this screenshot from the doc:
Specifically, is the More dropdown a Tab component, or a Dropdown Menu component?
When using, how does selecting a tab/option from the More Dropdown work by default? (ex: will the selected tab then get moved to the visible tab portion, just like the screenshots?). Or does this need to be done manually to achieve that result?
Lastly, are there links to any examples of this usage?
Late, but it may help someone.
I was able to achieve dropdown within tabs by using the popover component.
https://codesandbox.io/s/436906013w
It has three tabs - One, Two and Three. Clicking on Tab 'Three' will perform the normal tab change. Clicking on the dropdown arrow next to tab 'Three' will provide the additional options.
It is not an exact solution to the question but can be achieved with a similar approach.
I created logic with MUI List, u can customize it with MUI tabs.
I calculate the width al all items and check if we have enough space, if not I added more button with dropdown and added the rest inside. Be aware that now it does not recalculate if the width or length of items changed
https://codesandbox.io/s/muddy-paper-941ff?file=/src/App.js
Related
As in documentation MUI Autocomplete is able to create an option using freeSolo prop. New option appears at the bottom only when the user start typing. Is it possible to move that option at top and make it always visible? I may reorder it with flexbox, so this should not be a problem that much if it can not do it automatically. The problem is the visibility of that option.
I want to open a drawer when it is clicked, so I do not need that typed text information.
That option Add "something" should be always visible, how is it possible?
I have a custom filter component I'm giving Ag grid for each column. The component contains a dropdown. When user selects an option from dropdown, the filter closes immediately on selection rather than staying open like it should.
How can I keep the filter component to stay open on selection of option from dropdown?
Reading the docs more, I found the answer here:
https://www.ag-grid.com/javascript-data-grid/component-filter/#custom-filters-containing-a-popup-element
Custom Filters Containing a Popup Element
Sometimes you will need to create custom components for your filters that also contain popup elements. This is the case for Date Filter as it pops up a Date Picker. If the library you use anchors the popup element outside of the parent filter, then when you click on it the grid will think you clicked outside of the filter and hence close the column menu.
There are two ways you can get fix this problem:
Add a mouse click listener to your floating element and set it to
preventDefault(). This way, the click event will not bubble up to the
grid. This is the best solution, but you can only do this if you are
writing the component yourself.
Add the ag-custom-component-popup CSS
class to your floating element. An example of this usage can be found
here: Custom Date Component
I'm using Material Table at the moment and am having difficulty customizing the position of the selection text (presented when one or more rows are selected via the checkbox).
Looking at the documents, I can see that the toolbar is overridable (https://material-table.com/#/docs/features/component-overriding), however the examples show simpler changes e.g. how to change the background color. I wonder if it's possible to separate the selection text from the toolbar and render it in a different location, like the below picture demonstrates.
Does anyone know if this is possible?
In the end, I turned off the row selection text in the toolbar by using showTextRowsSelected: false
I then made a custom footer using the row data presented by the onSelectionChange handler.
I'm having trouble figuring out the difference between Lists and Menus in Material-UI.
Docs
Lists - https://material-ui-next.com/demos/lists/
Menus - https://material-ui-next.com/demos/menus/
Description
My thinking is that Menus are used for routing and navigation while Lists are used for configuration or static content, but then I saw these quotes:
Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
Reading this, Menus aren't intended to always show, they're designed to be hidden and only shown temporarily.
Menus should not be used as a primary method for navigation within an app.
This makes it seem like a sidebar with a list of navigation elements should be a List. If so, what if I take the same component and want to also use it in a dropdown menu? Do I have to make a separate component using Menu components?
Question
Since the docs are unclear to me, what instances would I want to use Menus vs Lists?
These components follow the Material Design standards, so their intended use would follow the standards.
For Menu:
Menus display a list of choices on a transient sheet of material.
For List:
Lists present multiple line items vertically as a single continuous element.
So while they're similar, I think the key difference is that Menu is intended for a transient selection, presented within something like a Dialog or Modal.
I am creating a form in MS Access. My form appears to the user in form of a modal pop-up box. At the bottom of the form we get Navigation Buttons, New Entry (which I have disabled), Filter and Search Options.
I want to customize this Navigation Button Bar. For example, I do not want 'Record' word to appear at the left most position in this bar.
I have been searching ways to do the same. I am not sure if the same can be achieved, but still hopeful.
Thanks in anticipation.
Jay
You can disable Navigation Buttons in form properties, which means the bar does not appear and in Access 2007 and 2010, you can set the Navigation Caption, which means you can have something instead of "Record", but you cannot customize the bar itself.
If you must have custom navigation, disable the bar and add your own navigation options.
You can change the Record into something else, but not customize the other bits of the navigation bar as far as I know.
Will show as:
If you want to go further than that, you may be able to intercept windows messages and change the wording on the fly, but that would complex and certainly a lot of work for not much.
On the other hand you could simply not show the navigation bar and create your own navigation using buttons and a bit of VBA instead.