Where can I find the FlippingCard component\'s methods/funct

Topic: Where can I find the FlippingCard component\'s methods/functions?

pcdavis pro asked 6 years ago

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://mdbootstrap.com/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 answered 6 years ago