I'm trying to use antd's badge, but the number+badge always looks out of sync with the icon no matter which icon I use.
Here is a screenshot of the problem:
I have antd's badge imported correctly, NotificationOutlined imported properly, and antd is 4.0+. I have attempted using CSS and playing with fontSize but it does not doing anything.
Code:
<Badge count={5}>
<NotificationOutlined />
</Badge>
I'd appreciate any guesses/ insight to how I can solve this!
Source: https://ant.design/components/badge/
Related
I am new to React, I want to create a rating bar like this:
I want to use material UI, but I didn't find a component like this.
I found a rating UI component: https://material-ui.com/components/rating/. but I need the UI to be like a linear gauge and change color with a different number (1/5, 2/5,3/5,4/5,5/5).
Actually, I already used the rating component:
<Grid item xs={6} className={classes.overAllScoreValueContainer}>
<Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
<Rating
name="overall-score"
value={this.state.overAllRating}
readOnly
size={"large"}
classes={{
iconFilled: this.props.classes.iconFilled,
iconHover: this.props.classes.iconHover
}}
/>
</Box>
</Grid>
but the UI is not correct.
anyone can help?
Thank you for pointing out using the progress bar in material UI.
I can make the shape like what shown in the picture, but how to change color according to the value??
please check this:
https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js
You can use material ui progress... see the document.
https://material-ui.com/components/progress/#progress
You can also customize it.
Hey thanks for posting your sandbox. I was able to provide the color dynamically with your help. If you're still stuck here then just pass the color as a prop and !important to your style. Thank you soo much.
Here's the updated sandbox link - https://codesandbox.io/s/staging-bird-dh50kl
i am using material ui for my project and this is my textField
text field reality
as you can see there is an bottom border underline it, but i want to remove it completely, previously i usually use border: "0px" but i dont know how to customize it, this is what i want
text field expectation
thank for your time to help me out, highly appreciate your effort, hope you have a good day
you can edit in this codesandbox link: codesanboxlink
for this case you can import InputBase from material-ui
import InputBase from '#material-ui/core/InputBase';
you can see your example at codesandbox codesandboxlink
I want to affix the buttons in the bottom right corner as on the antd website. I couldn't do this
You can easily achieve this. Before that, I would recommend you to show us what you have tried. Stackoverflow should be used when you aren't able to achieve what you desire. Please don't repeat the same in the near future. BTW, you can do this by using Affix as you told. This should have a Button which has an icon. This will keep the icon fixed at the right bottom of page.
import {Button, Affix} from 'antd';
import { wechat } from '#ant-design/icons'
<Affix style={{position:'fixed',bottom:10,right:10}}>
<Button type="primary" icon="wechat" />
</Affix>
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
I am studying about Material-UI but I couldn't find in the Demo (example) anything similar with what they have in their website.
My problem is I want to copy this example, so I am trying to reproduce the container (not the content) using the <Card /> component, but it doesn't reproduce very well, so I want to know if there is a specific component to use.
If I understand your question correctly, you're looking for a way to emulate the collapsible demo container that reveals the code behind the demos in Material-UI's documentation (and you want to do so using Material-UI components).
That specific container is implemented in the docs site as an internal component and is composed of Material-UI components with a reliance on JSS for styling. It is also open-source, so looking at the code should help you.
Here is an excerpt from the render method:
<div className={classes.root}>
<IconButton onClick={this.handleCodeButtonClick} className={classes.codeButton}>
<CodeIcon />
</IconButton>
<Collapse in={this.state.codeOpen}>
<MarkdownElement className={classes.code} text={`\`\`\`js\n${raw}\n\`\`\``} />
</Collapse>
<div className={classes.demo} data-mui-demo={name}>
<DemoComponent />
</div>
</div>
This is a component that is used for demos in the Material-UI documentation. It is little more than a styled div with an IconButton.
The MarkdownElement contains the code that is toggled by the code button presented at the top-right of the container. It is wrapped in a Collapse component, which handles the animated transition that takes place when the visibility of that code is toggled.
The DemoComponent is where the demo is presented.
All style is handled using JSS, defined in a stylesheet object.
I'm sure you can build this into a Card by following this pattern. It should be pretty straight-forward, something like adding an action to the CardHeader that triggers a state change and toggles whatever you're looking to expand.