I am trying to create a sign-in button where the button displays 'Sign-in' when the user is not signed in and their profile picture when they are signed in.
The button displays the right things when I use text instead of an image when the user is signed in.
{!user || !isSignedIn ? 'Sign in' : 'Profile'}
I am unsure how to add the image to use as a button instead.
You are trying to wrap image inside the button tag which is wrong approach. You should use Input Tag to embedded image on button or you can use image as a backgroundUrl for button, With the help of conditional class styles you can show text or imagebackground on button. which is more obvious and better approach I think.
<input type="image" src="youpathtoimage" />
or
<button style="background: url(yourimage.png)" />
for conditional styles I've always used MUI CLSX. If you are using Material UI in your project. Try to use CLSX.
Related
I designed a page and I have a Flatlist and I have pickers, slider and text input in this page. I also used Animated View in this page and I have an issue with KeyboardAvoidingView.
The design looks like this when the page is first rendered:First Render
When user click "Add" Icon the page looks like this:
Animation Triggered and View Flex Grow
And here is my main issue. When user click the TextInput for type something. This page looks like this:
TextInput Focused
You can also see my render code in this photo.JSX Code
I tried placing "keyboardavoidingview" in different places but my problem was not solved. How can I solve this?
P.S: The animation value based on "flex" property. The view has "0.5" flex value on first start and When the button is clicked, it takes the value "1".
wrap your code inside
<KeyboardAvoidingView>
</KeyboardAvoidingView>
And give it a style like this
flex: 1,
behavior="padding"
Kolay gelsin :)
This is what I currently have:
<TooltipHost
content="Enter claim name in a way to be understandable for all parties."
directionalHint={DirectionalHint.rightCenter}
calloutProps={{ calloutMaxWidth: 100}}
>
<TextField />
</TooltipHost>
The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?
The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.
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'm working on fixing some responsive design issues with a sidebar component in React, and one problem with it is that the label text on the tabs gets wicked scrunched up on smaller screens. I want to hide this text but I can't seem to find a good way to do it.
I've tried replacing the label text with a div that is hidden via bootstrap on small/x-small screens, but that doesn't work
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
Ideally this text should go away on smaller screens but it just acts as though I hadn't put anything there at all. In fact, any bootstrap classes I try to add to that div seem to have no effect. How might I go about fixing this?
If you are using Material UI, you can use Hidden tag to hide label based on mobile viewport. When you use tag 'Hidden' with prop xsDown, the label will be hidden at or below xs breakpoint.
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
I'm attempting a simple redux form using Material UI component. Following the example on their page it's easy to get redux Field components rendering as material-ui fields ?
However I would like to use material-ui buttons as the Submit and Reset buttons for my form rather than just the standard HTML . Despite searching at length and trying a few things I cannot get this to work.
Any idea if it is possible to use material-ui buttons (e.g. FloatingActionButton) as my redux-form buttons ?
jsFiddle: https://jsfiddle.net/h6kvv8j0/3/
Just apply the "type" attribute:
<form ...>
<FloatingActionButton type="submit">...</FloatingActionButton>
<FloatingActionButton type="reset">...</FloatingActionButton>
</form>