mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-08 07:07:15 +02:00
Code Issues Releases Wiki Activity

Add a button to flip between demo/source

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-15 15:40:03 +07:00
parent b3609fc8d2
commit 3668a6ee3a
2 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/layouts/Centering.jsx
View File

@@ -6,11 +6,16 @@ import BrowserFrame from '../placeholders/BrowserFrame';
const Centering = () => {
return (
<DetailsLayout name="Centering">
<BrowserFrame>
<div className="h-100 flex flex-column items-center justify-center">
<div className="f1 b">CENTER</div>
</div>
</BrowserFrame>
<BrowserFrame
content={
<div className="h-100 flex flex-column items-center justify-center">
<div className="f1 b">CENTER</div>
</div>
}
source={
<div>source</div>
}
/>
</DetailsLayout>
);
};

35
client/placeholders/BrowserFrame.jsx
View File

@@ -1,15 +1,42 @@
import React from 'react';
import React, { useState } from 'react';
const BrowserFrame = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive(isActive => !isActive);
const BrowserFrame = ({ children }) => {
return (
<div className="br2 ba b--black-20">
<div className="flex pa3 bb b--black-20 items-center">
<div className="br-100 mr1 w1 h1 bg-red" />
<div className="br-100 mr1 w1 h1 bg-gold" />
<div className="br-100 mr1 w1 h1 bg-red" />
<div className="ml-auto">
<buton className="pointer bg-dark-blue br2 ph2 pv1 white" onClick={flip}>
{isContentActive ? 'Source' : 'Demo'}
</buton>
</div>
</div>
<div style={{ height: '512px' }}>
{children}
<div
className="relative"
style={{
height: '512px',
transition: 'transform 1s',
transformStyle: 'preserve-3d',
transform: isContentActive ? '' : 'rotateY(180deg)',
}}
>
<div className="absolute top-0 left-0 h-100 w-100" style={{ backfaceVisibility: 'hidden' }}>
{content}
</div>
<div
className="absolute top-0 left-0 h-100 w-100"
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
}}
>
{source}
</div>
</div>
</div>
);