I have 2 buttons and i want to animate each one when clicked. The problem is that when the second button is clicked the animation restarts because of React re-rendering the document. How can i solve this? I am new to StyledComponents.
[Here is a codesandbox whit the problem.]
https://codesandbox.io/s/naughty-joliot-v3mlf
Thanks.
You should move style components out of function, and then pass props (active and active2) to style components.
Here is fork your example code, and do some modification:
https://codesandbox.io/s/tender-curran-0bxf0?file=/src/App.js
Related
I have a problem, a button that belongs to an InfoWindow component. The button isn't created in the HTML part of the code but is called whenever the card component is open. I use this InfoCard in two places of the application, and in each component, I change the position of the button using ::ng-deep, because without it the changes won't be applied. The problem is whenever I change from one page to another, the component child1 inherits the child2 CSS of the button, and the same way when I check child1 first. I thought about adding a class to each button and changing in the CSS the call of classes .class1.button and .class2.button, but the problem is the button isn't displayed until I click in the showInfo button to display the card, so in typescript the class is displayed none, and I can't add a class to a class with display none.
Any help on how I can solve that?
The problem is rather difficult to understand for me given your description. However, you might take a look at the following docs. E.g. :host-context can be used to differentiate style application based on the context, e.g. the presence of some class in some ancestor component - assuming you apply some StyleEncapsulation.
I want to apply different styles to antd pop overs when they are in different components, especially the positions where they appear. For example if I have a button and b button, I want to make a pop over appear 50px right of a button and the other appear 100px left of b button. I have no clue to do this because it seems I can not add a className in antd pop over component such as antd-popover-title, antd-popover-content, and so on. Please let me know if you have any ideas..
The Popover class has the same API as Tooltip. https://ant.design/components/tooltip/#API
In there you may find multiple ways to style the popover how you want. With either overlayClassName, overlayStyle, overlayInnerStyle.
https://codesandbox.io/s/exciting-fermat-izfv8?file=/index.js
I am using material ui for react. So When the user clicks on the button(from material ui), there is a ripple effect seen, but it fades away soon, I would want that the ripple effect fill up the button with a different color.
Please give suggestions how could this be achieved.
Thanks.
Check the TouchRipple component's code, it's got a prop called color. All material-ui components use the TouchRipple for the ripple effect. Now you want to control the color of this prop for Buttons. Material UI offers several different kinds of buttons. You can follow the code of the button you want to use, you'll notice they use EnhancedButton which then uses TouchRipple. EnhancedButton exposes a prop call touchRippleColor which can be used to specify the color of the ripple effect.
Is there any working example of toggling or removing CSS class from ExtJS 4.2 component, xtype: button in particular?
I have found and tried a method from API, but no effect. If the method is working for you, would you explain what I did wrong?
button.removeCls("sample-button-over");
You have to add both mouseover and mouseout eventsto button. On mouseover, check the condition whether it is pressed or not, if not pressed add the CSS class, and remove the class on mouseout. It should work
i want to add minmun/maximum button on tabnavigator header.......how i could be possible
put the tab navigator and a button in a canvas
set the X and Y of button Y=0 and X=tabnavigator.width - button-width-10
on click of button use Resize function set HeightTo=0 and heightFrom= tabnavigator.width
then play() the resize
to restore heightFrom=0 and heightTo=previous size of navigator
then you got the illusion of minimizing ang maxizing the tab navigator.. please do add some more effects of your desire..
Hope this gives you a idea on it..
Forget how it looks at first. Create a button that simply hides the TabNavigator. I'm sure there are plenty of tutorials out there on how to animate show/hide. Once you have that, move the button where you want it and style it as you wish.
Ive never heard of a tabNavigator header, but if you mean adding buttons to the tabs themselves, then theres an example and source code you could work from with FlexLib SuperTabNavigator