I use the following code to import React Material UI icons in my project;
import SupervisorAccountIcon from '#mui/icons-material/SupervisorAccount';
and I use them using;
<StyledTreeItem labelIcon={SupervisorAccountIcon} >
My data comes from the Laravel backend, and I would like to define which Icon will be used for each item in one of my database fields. So I can dynamically load or reference icons for each item when I build the display elements using React.
For that, I need to store an ID or name of the Icon in my database and retrieve the actual icon reference at the front end.
Is there any way to get an ID for MUI Icon, and how can I dynamically load Icon using its ID or name without hardcoding the Icon name? or even is this possible? Any help would be highly appreciated.
Related
I am using microsoft-graph-toolkit react in SPFx 1.15.0 webpart
I have an Ag-Grid rows each with a cell containing a Person
<Person personQuery={params.data.RequestFor.Email} showPresence={true}
view={PersonViewType.oneline}
personCardInteraction={PersonCardInteraction.hover} >
</Person>
when users hover the default PersonCard appears under the other grid rows and doesn't show on top even though I set the z-order to 13000000
Is there another way to make it show on top of everything?
When I add a template with PersonCard, I do not see anything
Thank you
For anyone with same issue, use a FluentUi callout to show the same persons PersonCard (no need for a div around it) it will show at the highest z-order and figure out if to show up or down based on the location in the browser.
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
I am using only the loading property of Button component.
Internally the button component requires 0.5mb of icons.
Is there is any way to use only loading icon and not the huge icons import?
Thanks.
I haven't tried for Icon components,
but you can check out babel-plugin-import, which optimizes import statements.
I was able to make it work with CSS & other AntD components.
What I understood from your question is correct, the answer is no. In the meanwhile, you can try another way. download the specific icon as an SVG format form the icon and create your own icon bundle for using icon moon and use it. So you can reduce the size.
Bonus point: Always try to import a specific component like below instead downloading whole antd component.
import Button from 'antd/lib/button';
I am using this multi select of antd Antd multiselect
It is working perfectly fine bt i want to make it like that Multiselect Design
Each selected item have specific color.Is this possible with antd multiselect?Antd provides some props like labelInValue but i am confused how to use they have not provided enough detail.
You can modify the color of the selected items by using css or less variables link to antd instructions for less variables.
To use css, open the node_modules folder, find antd, open the es folder, open the antd component you're using, open the style folder, and then open the index.js file. There you can find the css elements you can modify. Create a css file, change the color attributes on the css elements, and then connect the css file to your javascript/html multiselect.
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html