Topic: Where can I find the FlippingCard component\'s methods/functions?
I am able to display the FlippingCard component, but I was hoping MDB might also provide the method/function used to switch from front face to back face and the animation that flips the card. Can that be found anywhere in the documentation?
Below is my code for a component called FlippingCardExample:
import React, { Component } from 'react'; import { FlippingCard, Card, CardUp, Avatar, CardBody, Fa } from 'mdbreact'; class FlippingCardExample extends Component { constructor(props) { super(props) this.state= { flipped:false } } render() { return ( <FlippingCardflipped={this.state.flipped}className="text-center h-100 w-100"style={{ maxWidth:'22rem' }}> <CardclassName="face front"> <CardUp> <imgclassName="card-img-top"src="https://mdbcdn.b-cdn.net/img/Photos/Others/photo7.jpg"alt="a photo of a house facade"/> </CardUp> <AvatarclassName="mx-auto white"circle> <imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg"className="rounded-circle"/> </Avatar> <CardBody> <h4className="font-weight-bold mb-3">Marie Johnson</h4> <pclassName="font-weight-bold blue-text">Web developer</p> <aclassName="rotate-btn"data-card="card-1"onClick={this.handleFlipping}><Faicon="repeat"/> Click here to rotate</a> </CardBody> </Card> <CardclassName="face back"> <CardBody> <h4className="font-weight-bold">About me</h4> <hr/> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat? </p> <hr/> <ulclassName="list-inline py-2"> <liclassName="list-inline-item"><aclassName="p-2 fa-lg fb-ic"><Faicon="facebook"/></a></li> <liclassName="list-inline-item"><aclassName="p-2 fa-lg tw-ic"><Faicon="twitter"/></a></li> <liclassName="list-inline-item"><aclassName="p-2 fa-lg gplus-ic"><Faicon="google-plus"/></a></li> <liclassName="list-inline-item"><aclassName="p-2 fa-lg li-ic"><Faicon="linkedin"/></a></li> </ul> <aclassName="rotate-btn"data-card="card-1"onClick={this.handleFlipping}><Faicon="undo"/> Click here to rotate back</a> </CardBody> </Card> </FlippingCard> ); } } export default FlippingCardExample;
Add comment
Jakub Mandra staff premium answered 6 years ago
Hi,
Just add this function:
handleFlipping = () => this.setState({ flipped: !this.state.flipped });
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.7.1
- Device: windows
- Browser: chrome
- OS: 10
- Provided sample code: No
- Provided link: No
Tags
Related topics