Skip to content

Commit 153db86

Browse files
cjw783malangfoxjinwoo-choi-05
authored
Feat/state api (#923)
* feat: add resizeObservePanel option (#884) * fix: apply ResizeObserver to camera and panels * fix: unobserve removed panel when panel change * fix: add defense code to check if element exists * feat: add resizeObservePanel option * fix: add defensive logic to getStyle * chore: change resizeObservePanel to resizePanelObserve * fix: add unobserve panel logic * chore: update setup-node to v4 * feat: add optimizeSizeUpdate option (#918) * fix: infinite resize * chore: remove route for removed demo * fix: prevent calling viewport.resize() when isResizing * chore: add type info * chore: add script to link core and framework for debug * chore: create reference demo page * fix: calculate resized size using getElementSize * feat: add optimizeSizeUpdate option * chore: disable eslint for helper script * refactor: declare variable for resizeTarget * test: changed import path to relative path * fix: changed viewport resize condition * chore: add comments --------- Co-authored-by: jinwoo-choi-05 <[email protected]> * refactor: change resizePanelObserve to observePanelResize (#919) * chore(release): Release 4.13.1 * chore(release): release packages * chore(release): merge 4.13.1-rc * feat: implement flicking state api core * test: flicking-state unit test * test: fix failed test * fix: change geProgress logic * feat: implement react flicking state api * feat: impletment flickingStateApi for vue2, vue3 * feat: import flickingStateAPi * feat: add scrollProgress state * chore: update demo * feat: update scrollProgress on move * test: add progress test * chore: refactor interface --------- Co-authored-by: malangfox <[email protected]> Co-authored-by: jinwoo-choi-05 <[email protected]>
1 parent c51ae25 commit 153db86

File tree

151 files changed

+19783
-306
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

151 files changed

+19783
-306
lines changed

‎.github/workflows/run-test.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ jobs:
55
runs-on: ubuntu-latest
66
steps:
77
- uses: actions/checkout@v2
8-
- uses: actions/setup-node@v2
8+
- uses: actions/setup-node@v4
99
with:
1010
node-version: 16
1111
cache: "npm"
@@ -30,7 +30,7 @@ jobs:
3030
runs-on: ubuntu-latest
3131
steps:
3232
- uses: actions/checkout@v2
33-
- uses: actions/setup-node@v2
33+
- uses: actions/setup-node@v4
3434
with:
3535
node-version: 16
3636
cache: "npm"

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,3 +224,4 @@ demo/_data/version.yml
224224
outjs/
225225
declaration/
226226
dist/
227+

‎core-packages-link.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
5+
* 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
6+
*
7+
* 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
8+
*
9+
* 사용 예시: node core-package-link.js react-flicking
10+
*/
11+
12+
const { execSync } = require("child_process");
13+
const path = require("path");
14+
const fs = require("fs");
15+
16+
const args = process.argv.slice(2);
17+
const targetDir = args[0];
18+
19+
if (!targetDir) {
20+
console.error("❌ 디렉토리명을 인자로 입력하세요.");
21+
process.exit(1);
22+
}
23+
24+
const fullPath = path.resolve(process.cwd(), 'packages', targetDir);
25+
if (!fs.existsSync(fullPath)) {
26+
console.error(`❌ 디렉토리 없음: ${fullPath}`);
27+
process.exit(1);
28+
}
29+
30+
function run(cmd, cwd = process.cwd()) {
31+
console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
32+
execSync(cmd, { stdio: "inherit", cwd });
33+
}
34+
35+
run("npm run build");
36+
run("npm link");
37+
run(`npm link '@egjs/flicking'`, fullPath);
38+
run("npm run build", fullPath);

‎debug/state-api/index.html‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Flicking Basic Demo</title>
7+
<link rel="stylesheet" href="../../dist/flicking.css" />
8+
<style>
9+
#container {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
}
14+
#nav-wrapper {
15+
display: flex;
16+
align-items: center;
17+
}
18+
.flicking-viewport {
19+
width: 500px;
20+
height: 300px;
21+
/* margin: 0 auto; */
22+
border: 1px solid black;
23+
}
24+
.flicking-camera {
25+
display: flex;
26+
}
27+
.flicking-panel {
28+
align-items: flex-end;
29+
border-radius: 5px;
30+
box-sizing: border-box;
31+
display: flex;
32+
/* height: 200px; */
33+
justify-content: flex-start;
34+
margin-top: 10px;
35+
margin-bottom: 10px;
36+
margin-right: 10px;
37+
position: relative;
38+
width: 200px;
39+
background-color: aliceblue;
40+
justify-content: center;
41+
align-items: center;
42+
}
43+
.navigation-btn {
44+
text-align: center;
45+
margin: 0 5px;
46+
padding: 5px 10px;
47+
height: 50px;
48+
}
49+
#pagination {
50+
display: flex;
51+
}
52+
.pagination-num {
53+
background-color: beige;
54+
margin: 5px;
55+
width: 30px;
56+
height: 30px;
57+
text-align: center;
58+
}
59+
.pagination-num.active {
60+
background-color: yellowgreen;
61+
}
62+
#progress-bar {
63+
width: 600px;
64+
height: 20px;
65+
border-radius: 20px;
66+
background-color: #e0e0e0;
67+
overflow: hidden;
68+
}
69+
#progress-fill {
70+
height: 100%;
71+
width: 0%; /* 초기에는 0% 채워짐 */
72+
background-color: #4caf50; /* 채워지는 색 */
73+
transition: width 0.3s ease; /* 부드럽게 변화 */
74+
}
75+
#scroll-progress-bar {
76+
width: 600px;
77+
height: 20px;
78+
border-radius: 20px;
79+
background-color: #e0e0e0;
80+
overflow: hidden;
81+
}
82+
#scroll-progress-fill {
83+
height: 100%;
84+
width: 0%; /* 초기에는 0% 채워짐 */
85+
background-color: #2196f3; /* 채워지는 색 */
86+
transition: width 0.3s ease; /* 부드럽게 변화 */
87+
}
88+
</style>
89+
</head>
90+
<body>
91+
<div id="container">
92+
<div id="nav-wrapper">
93+
<button class="navigation-btn" id="prev">Previous</button>
94+
<div class="flicking-viewport">
95+
<div class="flicking-camera">
96+
<div class="flicking-panel" style="width: 500px">x0</div>
97+
<div class="flicking-panel">x1</div>
98+
<div class="flicking-panel">x2</div>
99+
<div class="flicking-panel">x3</div>
100+
<div class="flicking-panel">x4</div>
101+
</div>
102+
</div>
103+
<button class="navigation-btn" id="next">Next</button>
104+
</div>
105+
<div id="pagination"></div>
106+
<div id="progress-bar">
107+
<div id="progress-fill"></div>
108+
</div>
109+
<div id="scroll-progress-bar">
110+
<div id="scroll-progress-fill"></div>
111+
</div>
112+
</div>
113+
114+
<div class="add">
115+
<button id="prepend">prepend</button>
116+
<button id="append">append</button>
117+
<button id="add-random">add random</button>
118+
</div>
119+
<div class="remove">
120+
<button id="remove-first">remove first</button>
121+
<button id="remove-last">remove last</button>
122+
<button id="remove-random">remove random</button>
123+
</div>
124+
125+
<script src="../../dist/flicking.pkgd.js"></script>
126+
<script>
127+
document.addEventListener("DOMContentLoaded", () => {
128+
const flicking = new Flicking(".flicking-viewport", {
129+
renderOnlyVisible: true,
130+
// circular: true
131+
});
132+
const { connectFlickingStateApi } = Flicking;
133+
const reactiveObj = connectFlickingStateApi(flicking);
134+
const {
135+
isReachStart,
136+
isReachEnd,
137+
totalPanelCount,
138+
currentPanelIndex,
139+
moveTo,
140+
} = reactiveObj;
141+
142+
// Navigation buttons
143+
const prevButton = document.getElementById("prev");
144+
const nextButton = document.getElementById("next");
145+
146+
// 비활성화 여부 초기화
147+
prevButton.disabled = isReachStart;
148+
nextButton.disabled = isReachEnd;
149+
150+
// 반응형과 엮기
151+
reactiveObj.subscribe("isReachStart", (nextValue) => {
152+
prevButton.disabled = nextValue;
153+
});
154+
reactiveObj.subscribe("isReachEnd", (nextValue) => {
155+
nextButton.disabled = nextValue;
156+
});
157+
158+
// 이벤트 리스너 등록
159+
prevButton.addEventListener("click", () => {
160+
flicking.prev();
161+
});
162+
163+
nextButton.addEventListener("click", () => {
164+
flicking.next();
165+
});
166+
167+
// 패널이 동적으로 추가되거나 삭제되었을 때도 잘 동작해야함.
168+
169+
let appendNum = 100;
170+
let prependNum = -1;
171+
172+
const appendButton = document.getElementById("append");
173+
const prependButton = document.getElementById("prepend");
174+
const addRandomButton = document.getElementById("add-random");
175+
176+
const getRandomInt = (min, max) => {
177+
const minCeiled = Math.ceil(min);
178+
const maxFloored = Math.floor(max);
179+
return Math.floor(
180+
Math.random() * (maxFloored - minCeiled) + minCeiled
181+
);
182+
};
183+
appendButton.addEventListener("click", () => {
184+
flicking.append(`<div class="flicking-panel">x${appendNum}</div>`);
185+
appendNum++;
186+
});
187+
prependButton.addEventListener("click", () => {
188+
flicking.prepend(`<div class="flicking-panel">x${prependNum}</div>`);
189+
prependNum--;
190+
});
191+
addRandomButton.addEventListener("click", () => {
192+
const randomN = getRandomInt(0, flicking.panelCount);
193+
flicking.insert(
194+
randomN,
195+
`<div class="flicking-panel">random ${randomN}</div>`
196+
);
197+
});
198+
199+
const removeFirstButton = document.getElementById("remove-first");
200+
const removeLastButton = document.getElementById("remove-last");
201+
const removeRandomButton = document.getElementById("remove-random");
202+
203+
removeFirstButton.addEventListener("click", () => {
204+
flicking.remove(0);
205+
});
206+
207+
// active panel을 지우는 경우 포커스가 가장 처음으로 돌아가는 현상이 있음.
208+
removeLastButton.addEventListener("click", () => {
209+
flicking.remove(flicking.panelCount - 1);
210+
});
211+
removeRandomButton.addEventListener("click", () => {
212+
const randomN = getRandomInt(0, flicking.panelCount);
213+
flicking.remove(randomN);
214+
});
215+
216+
const paginationElement = document.getElementById("pagination");
217+
const progressFillElement = document.getElementById("progress-fill");
218+
219+
const pageNums = Array.from({ length: totalPanelCount }, (_, i) => {
220+
const div = document.createElement("div");
221+
div.className = `pagination-num ${
222+
i === currentPanelIndex ? "active" : ""
223+
}`;
224+
div.textContent = `${i}`;
225+
226+
div.addEventListener("click", (e) => {
227+
moveTo(i);
228+
});
229+
return div;
230+
});
231+
232+
paginationElement.append(...pageNums);
233+
234+
reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
235+
pageNums.forEach((v, i) => {
236+
v.classList.remove("active");
237+
if (i === nextValue) {
238+
v.classList.add("active");
239+
}
240+
});
241+
});
242+
243+
const scrollProgressFillElement = document.getElementById(
244+
"scroll-progress-fill"
245+
);
246+
reactiveObj.subscribe("progress", (nextValue) => {
247+
scrollProgressFillElement.style.width = `${nextValue}%`;
248+
});
249+
});
250+
</script>
251+
</body>
252+
</html>

‎docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Flicking.mdx‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class Flicking extends Component
1212
1313
<div className="container">
1414
<div className="row mb-2"><div className="col col--4"><strong>Properties</strong></div><div className="col col--4"><strong>Methods</strong></div><div className="col col--4"><strong>Events</strong></div></div>
15-
<div className="row"><div className="col col--4"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span><br/><a href="#control">control</a><br/><a href="#camera">camera</a><br/><a href="#renderer">renderer</a><br/><a href="#viewport">viewport</a><br/><a href="#initialized">initialized</a><br/><a href="#circularEnabled">circularEnabled</a><br/><a href="#virtualEnabled">virtualEnabled</a><br/><a href="#index">index</a><br/><a href="#element">element</a><br/><a href="#currentPanel">currentPanel</a><br/><a href="#panels">panels</a><br/><a href="#panelCount">panelCount</a><br/><a href="#visiblePanels">visiblePanels</a><br/><a href="#animating">animating</a><br/><a href="#holding">holding</a><br/><a href="#activePlugins">activePlugins</a><br/><a href="#align">align</a><br/><a href="#defaultIndex">defaultIndex</a><br/><a href="#horizontal">horizontal</a><br/><a href="#circular">circular</a><br/><a href="#circularFallback">circularFallback</a><br/><a href="#bound">bound</a><br/><a href="#adaptive">adaptive</a><br/><a href="#panelsPerView">panelsPerView</a><br/><a href="#noPanelStyleOverride">noPanelStyleOverride</a><br/><a href="#resizeOnContentsReady">resizeOnContentsReady</a><br/><a href="#nested">nested</a><br/><a href="#needPanelThreshold">needPanelThreshold</a><br/><a href="#preventEventsBeforeInit">preventEventsBeforeInit</a><br/><a href="#deceleration">deceleration</a><br/><a href="#easing">easing</a><br/><a href="#duration">duration</a><br/><a href="#inputType">inputType</a><br/><a href="#moveType">moveType</a><br/><a href="#threshold">threshold</a><br/><a href="#dragThreshold">dragThreshold</a><br/><a href="#interruptable">interruptable</a><br/><a href="#bounce">bounce</a><br/><a href="#iOSEdgeSwipeThreshold">iOSEdgeSwipeThreshold</a><br/><a href="#preventClickOnDrag">preventClickOnDrag</a><br/><a href="#preventDefaultOnDrag">preventDefaultOnDrag</a><br/><a href="#disableOnInit">disableOnInit</a><br/><a href="#changeOnHold">changeOnHold</a><br/><a href="#renderOnlyVisible">renderOnlyVisible</a><br/><a href="#virtual">virtual</a><br/><a href="#autoInit">autoInit</a><br/><a href="#autoResize">autoResize</a><br/><a href="#useResizeObserver">useResizeObserver</a><br/><a href="#resizeDebounce">resizeDebounce</a><br/><a href="#maxResizeDebounce">maxResizeDebounce</a><br/><a href="#useFractionalSize">useFractionalSize</a><br/><a href="#externalRenderer">externalRenderer</a><br/><a href="#renderExternal">renderExternal</a></div><div className="col col--4"><a href="#init">init</a><br/><a href="#destroy">destroy</a><br/><a href="#prev">prev</a><br/><a href="#next">next</a><br/><a href="#moveTo">moveTo</a><br/><a href="#updateAnimation">updateAnimation</a><br/><a href="#stopAnimation">stopAnimation</a><br/><a href="#getPanel">getPanel</a><br/><a href="#enableInput">enableInput</a><br/><a href="#disableInput">disableInput</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setStatus">setStatus</a><br/><a href="#addPlugins">addPlugins</a><br/><a href="#removePlugins">removePlugins</a><br/><a href="#resize">resize</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#remove">remove</a></div><div className="col col--4"><a href="#event-ready">ready</a><br/><a href="#event-beforeResize">beforeResize</a><br/><a href="#event-afterResize">afterResize</a><br/><a href="#event-holdStart">holdStart</a><br/><a href="#event-holdEnd">holdEnd</a><br/><a href="#event-moveStart">moveStart</a><br/><a href="#event-move">move</a><br/><a href="#event-moveEnd">moveEnd</a><br/><a href="#event-willChange">willChange</a><br/><a href="#event-changed">changed</a><br/><a href="#event-willRestore">willRestore</a><br/><a href="#event-restored">restored</a><br/><a href="#event-select">select</a><br/><a href="#event-needPanel">needPanel</a><br/><a href="#event-visibleChange">visibleChange</a><br/><a href="#event-reachEdge">reachEdge</a><br/><a href="#event-panelChange">panelChange</a></div></div>
15+
<div className="row"><div className="col col--4"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span><br/><a href="#control">control</a><br/><a href="#camera">camera</a><br/><a href="#renderer">renderer</a><br/><a href="#viewport">viewport</a><br/><a href="#autoResizer">autoResizer</a><br/><a href="#initialized">initialized</a><br/><a href="#circularEnabled">circularEnabled</a><br/><a href="#virtualEnabled">virtualEnabled</a><br/><a href="#index">index</a><br/><a href="#element">element</a><br/><a href="#currentPanel">currentPanel</a><br/><a href="#panels">panels</a><br/><a href="#panelCount">panelCount</a><br/><a href="#visiblePanels">visiblePanels</a><br/><a href="#animating">animating</a><br/><a href="#holding">holding</a><br/><a href="#activePlugins">activePlugins</a><br/><a href="#align">align</a><br/><a href="#defaultIndex">defaultIndex</a><br/><a href="#horizontal">horizontal</a><br/><a href="#circular">circular</a><br/><a href="#circularFallback">circularFallback</a><br/><a href="#bound">bound</a><br/><a href="#adaptive">adaptive</a><br/><a href="#panelsPerView">panelsPerView</a><br/><a href="#noPanelStyleOverride">noPanelStyleOverride</a><br/><a href="#resizeOnContentsReady">resizeOnContentsReady</a><br/><a href="#nested">nested</a><br/><a href="#needPanelThreshold">needPanelThreshold</a><br/><a href="#preventEventsBeforeInit">preventEventsBeforeInit</a><br/><a href="#deceleration">deceleration</a><br/><a href="#easing">easing</a><br/><a href="#duration">duration</a><br/><a href="#inputType">inputType</a><br/><a href="#moveType">moveType</a><br/><a href="#threshold">threshold</a><br/><a href="#dragThreshold">dragThreshold</a><br/><a href="#interruptable">interruptable</a><br/><a href="#bounce">bounce</a><br/><a href="#iOSEdgeSwipeThreshold">iOSEdgeSwipeThreshold</a><br/><a href="#preventClickOnDrag">preventClickOnDrag</a><br/><a href="#preventDefaultOnDrag">preventDefaultOnDrag</a><br/><a href="#disableOnInit">disableOnInit</a><br/><a href="#changeOnHold">changeOnHold</a><br/><a href="#renderOnlyVisible">renderOnlyVisible</a><br/><a href="#virtual">virtual</a><br/><a href="#autoInit">autoInit</a><br/><a href="#autoResize">autoResize</a><br/><a href="#useResizeObserver">useResizeObserver</a><br/><a href="#observePanelResize">observePanelResize</a><br/><a href="#resizeDebounce">resizeDebounce</a><br/><a href="#maxResizeDebounce">maxResizeDebounce</a><br/><a href="#useFractionalSize">useFractionalSize</a><br/><a href="#externalRenderer">externalRenderer</a><br/><a href="#renderExternal">renderExternal</a><br/><a href="#optimizeSizeUpdate">optimizeSizeUpdate</a></div><div className="col col--4"><a href="#init">init</a><br/><a href="#destroy">destroy</a><br/><a href="#prev">prev</a><br/><a href="#next">next</a><br/><a href="#moveTo">moveTo</a><br/><a href="#updateAnimation">updateAnimation</a><br/><a href="#stopAnimation">stopAnimation</a><br/><a href="#getPanel">getPanel</a><br/><a href="#enableInput">enableInput</a><br/><a href="#disableInput">disableInput</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setStatus">setStatus</a><br/><a href="#addPlugins">addPlugins</a><br/><a href="#removePlugins">removePlugins</a><br/><a href="#resize">resize</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#remove">remove</a></div><div className="col col--4"><a href="#event-ready">ready</a><br/><a href="#event-beforeResize">beforeResize</a><br/><a href="#event-afterResize">afterResize</a><br/><a href="#event-holdStart">holdStart</a><br/><a href="#event-holdEnd">holdEnd</a><br/><a href="#event-moveStart">moveStart</a><br/><a href="#event-move">move</a><br/><a href="#event-moveEnd">moveEnd</a><br/><a href="#event-willChange">willChange</a><br/><a href="#event-changed">changed</a><br/><a href="#event-willRestore">willRestore</a><br/><a href="#event-restored">restored</a><br/><a href="#event-select">select</a><br/><a href="#event-needPanel">needPanel</a><br/><a href="#event-visibleChange">visibleChange</a><br/><a href="#event-reachEdge">reachEdge</a><br/><a href="#event-panelChange">panelChange</a></div></div>
1616
</div>
1717
1818
## constructor
@@ -124,6 +124,14 @@ Flicking.VERSION; // ex) 4.0.0
124124
**See**:
125125
- [Viewport](Viewport)
126126
127+
### autoResizer {#autoResizer}
128+
129+
<div>
130+
<span className="badge badge--warning">readonly</span>
131+
</div>
132+
133+
현재 Flicking에 활성화된 [AutoResizer](AutoResizer) 인스턴스
134+
127135
### initialized {#initialized}
128136
129137
<div>
@@ -821,6 +829,14 @@ autoResize 옵션 사용시 [ResizeObserver](https://developer.mozilla.org/en-US
821829
**See**:
822830
- [useResizeObserver ( Options )](https://naver.github.io/egjs-flicking/Options#useresizeobserver)
823831

832+
### observePanelResize {#observePanelResize}
833+
834+
<div>
835+
836+
</div>
837+
838+
이 옵션을 활성화할 경우, [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)를 사용하여 패널 엘리먼트의 크기를 추적합니다.<br />이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.<br />이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
839+
824840
### resizeDebounce {#resizeDebounce}
825841

826842
<div>
@@ -886,6 +902,18 @@ autoResize 옵션 사용시 [ResizeObserver](https://developer.mozilla.org/en-US
886902

887903
**Default**: null
888904

905+
### optimizeSizeUpdate {#optimizeSizeUpdate}
906+
907+
<div>
908+
909+
</div>
910+
911+
optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.<br />기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.<br />이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.<br />내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
912+
913+
**Type**: boolean
914+
915+
**Default**: false
916+
889917
## Methods
890918

891919
### init {#init}

0 commit comments

Comments
 (0)