/
index.jsx
105 lines (101 loc) · 3.65 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/* eslint-disable react/no-unescaped-entities */
import React, { useState } from "react";
import { Code } from "../../components/code";
import { TwicAbstract } from "../../components/demo-wrapper/twicAbstract";
import { TwicWrapper } from "../../components/demo-wrapper/twicWrapper";
import { TwicImg } from "@twicpics/components/react";
import "./index.scss";
const landscapeImgUrl = `components/position/horse.jpg`;
const portraitImgUrl = `components/position/forest.jpg`;
const horizontalPositionArray = [`left`, `right`, `center`];
const verticalPositionArray = [`top`, `bottom`, `center`];
const TwicPosition = () => {
const [horizontalPositionIndex, setHorizontalPositionIndex] = useState(0);
const [verticalPositionIndex, setVerticalPositionIndex] = useState(0);
const changePosition = () => {
setHorizontalPositionIndex(
(horizontalPositionIndex + 1) % horizontalPositionArray.length,
);
setVerticalPositionIndex(
(verticalPositionIndex + 1) % verticalPositionArray.length,
);
};
return (
<div id="twic-position-container">
<TwicWrapper gitHubUrl="src/pages/position/index.jsx">
<TwicAbstract title="position property">
<p>
In<Code>contain</Code>mode,
<strong>
the <dfn>position</dfn> property changes the location of the image
inside the area of the component.
</strong>
</p>
<p>
The syntax is the same as for CSS position properties (e.g.
<Code>background-position</Code>or
<Code>object-position</Code>).
</p>
<p>
Useful values are<Code>top</Code>,<Code>bottom</Code>,
<Code>left</Code>, and
<Code>right</Code>, but all valid CSS position values are valid.
</p>
<p>
If you only need border-based positionning, you can also use
<a href="/anchor" target="_blank" rel="noreferrer">
anchor
</a>
property.
</p>
</TwicAbstract>
<div className="twic-testing-container">
<button className="twic-button" onClick={changePosition}>
Click to change the position
</button>
</div>
<div className="twic-grid">
<div className="twic-item">
<TwicImg
src={landscapeImgUrl}
mode="contain"
placeholder="none"
position={verticalPositionArray[verticalPositionIndex]}
/>
<span>
<Code>
position="{verticalPositionArray[verticalPositionIndex]}"
</Code>
</span>
</div>
<div className="twic-item">
<TwicImg
src={portraitImgUrl}
mode="contain"
placeholder="none"
position={horizontalPositionArray[horizontalPositionIndex]}
/>
<span>
<span className="twic-code">
position="{horizontalPositionArray[horizontalPositionIndex]}"
</span>
</span>
</div>
<div className="twic-item">
<TwicImg src={landscapeImgUrl} mode="contain" placeholder="none" />
<span>
No position set (<Code>center</Code>by default)
</span>
</div>
<div className="twic-item">
<TwicImg src={portraitImgUrl} mode="contain" placeholder="none" />
<span>
No position set (<Code>center</Code>by default)
</span>
</div>
</div>
</TwicWrapper>
</div>
);
};
export default TwicPosition;