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 7 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