I have this button from https://callstack.github.io/react-native-paper/button.html
<Button onPress={goSignUp}>
Sign Up
</Button>
It hasn't got a background color (just what I want), but when I press it, a background color with a ripple fades in. How do I remove the onPress background color?
Please use TouchableOpacity
if you used TouchableHighlight
Try to add this
<TouchableHighlight underlayColor='none' />
You may ask, why don't you use a touchable opacity instead of the button? The answer is that I have more buttons (with background color) and I want to have all buttons with the same default style which comes with react-native-paper.
I have found a solution (wrap the button inside the TouchableOpacity) but I think there has to be a better way...
<TouchableOpacity onPress={goSignUp}>
<Button style={styles.button}>Sign Up</Button>
</TouchableOpacity>
This library has a prop for buttons called mode, you can try pass mode props to it, or just use your custom style
<Button mode='contained'>Sign Up</Button>
or
<Button style={{width: 200, height: 50, backgroundColor: 'blue'}}>Sign Up</Button>
Related
Going to add an icon and the challenge is that I can't find where I can deactivate <strong></strong>. Is it possible to manipulate the icon with a tag? Library that is made is custom made.
<PlainButton
onClick={showModal}
title={modalTitle}
aria-label={modalTitle}
style={{ lineHeight: 1 }}
disabled={!notAcces}>
<SvgIcon.PreviewDocument width={19} height={19} />
</PlainButton>
In the picture the other icon is normal, and the previewDocument has the tag <strong>. Just want to make it normal.
I am new to tailwind CSS and want to customize a button like when a user hover over it, it shows some action. But the utility-classes became very big as I have to write hover: again and again. Is there any way, to grouping them into one hover:
<button class="bg-gray-300 text-black hover:bg-black hover:text-white hover:rounded-sm hover:underline hover:font-semibold">Click Me</button>
Please help.
Currently Tailwind CSS doesn't have any associated syntax, so I created a new CSS language https://css.master.co
Group Styles
<ul class="{block;p:16;w:full;text:center;font:blue/.5}>li:hover#md"></ul>
View the Group Styles Syntax Screenshot
Abstracted into a class (v2)
/** #type {import('#master/css').Config} */
export default {
classes: {
btn: 'bg:blue bg:blue-55:hover bg:blue-60:active font:semibold font:14 p:10'
}
}
Apply it:
<button class="btn">Submit</button>
I am new to framer motion and I want to make a hover animation on the button. I was able to create the animation successfully but when I hover over the button the text gets distorted and I want to fix it, I have done research but i wasn't able to find a solution
I want to apply animation only to the button not the text inside it
I have tried adding <motion.button layout />
I have tried adding <motion.button layout="position" />
I have also added <span>button text</span>
but the issue is still there
<motion.button
style={{
padding: "10px 30px",
border: "none",
marginTop: "20px"
}}
whileHover={{
scale: 1.1
}}
whileTap={{
scale: 0.9
}}
>
Button
</motion.button>
It would be great if someone would help me in fixing this issue,
https://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419 is my code sandbox link where u can see what I'm saying
thanks!
According to this, you can't 'disable' scaling for child components with framer. Try to use react components and variables (or CSS) to disable child scaling.
Im using Semantic UI-React. My question is how to position a label or text under an icon? There are only two default options which is left and right of the icon. However I want to position the label below the icon.
Im using Semantic-React library.
For example:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
In the above snippet the label 'Pause' is added on the left side of the icon in the button.
My requirement is, I want to add the label 'Pause below the icon in the button'. I tried setting the:
labelPosition='down' or 'bottom'
However it does not work. Is there any way to do this?
I came across the same problem.
I believe that this could be done only by overriding the CSS properties of the Button element.
Please try providing !important to the CSS values, since semantic UI takes the highest priority when it comes to priority of the properties.
You can either use a class and define the style there, or else use a specific selector like this: div.ui.stackable.two.column.grid.button{.
Please let me know if this fixes, otherwise I have another solution to it.
Put a line break between the icon and the text.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
To change the amount of space between the icon and the text, you can add margin to the line break.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>
I seem to be having an issue with changing the font sizes on Material-UI's (for React) RaisedButton and having the button itself scale properly with it.
<RaisedButton
label={<span className="buttonText">Log in Here</span>}
/>
CSS:
.buttonText {
font-size: 63px;
}
The text size changes but the button itself doesn't scale with it. Does anyone know the proper solution to this? I want to button to scale with the text size.
The problem is Material-UI inlines all of the styles for their components, so if you try to override them with CSS selectors it doesn't usually work quite right. Instead, try overriding whatever inline styles you don't want using the style property directly on the component. It would look something like this:
<RaisedButton style={{ fontSize: '63px' }} label='Log in Here' />
And if it still doesn't look quite right, just inspect all the generated inline styles on that component and see what you'd like to change, then just add that to the style object as well.
http://www.material-ui.com/#/components/raised-button
Use the labelStyle prop to override the inline style for the element
http://www.material-ui.com/#/components/raised-button
<RaisedButton
label="Button"
labelStyle={{ fontSize: '63px'}}
/>
<RaisedButton
label="Label"
labelStyle={{ fontSize: 15 }}
/>
It needs to be added with lineHeight as a style prop for even spacing:
<RaisedButton style={{ lineHeight: "100px" }} label="lineHeight in style" />
Here's a fiddle with all of the different solutions: https://jsfiddle.net/botbotdotdot/kfph5cc2/
Cheers
You can use classes props to override the default css styles applied to every material-ui component. You can find out more in this youtube video:
https://www.youtube.com/watch?v=mu8-u7V7Z8s&feature=emb_logo
Use font-size unit as Percent (%) or em. For e.g font-size:12%