Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding a shift property.

This commit is contained in:
Eric van der Vlist 2022-09-07 21:44:59 +02:00
parent 5a663d84d8
commit 04c2c12117
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
background-move/src/App.tsx
View File

@ -19,14 +19,13 @@ import '@ionic/react/css/display.css';
/* Theme variables */ /* Theme variables */
import './theme/variables.css'; import './theme/variables.css';
import Background from './components/background'; import Background from './components/background';
setupIonicReact(); setupIonicReact();
const App: React.FC = () => ( const App: React.FC = () => (
<IonApp> <IonApp>
<Background /> <Background shift={{ x: 1000, y: 1000 }} />
</IonApp> </IonApp>
); );

13
background-move/src/components/background.tsx
View File

@ -2,10 +2,17 @@ import react from 'react';
import '../theme/background.css'; import '../theme/background.css';
const Background: react.FC = () => { const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
shift: { x: number; y: number };
}) => {
return ( return (
<div className='background'> <div
<img src='/assets/background.jpg' /> className='background'
style={{
transform: `translate(${-props.shift.x}px, ${-props.shift.y}px)`,
}}
>
<img src='/assets/background.jpg' alt='' />
</div> </div>
); );
}; };