diff --git a/docs/src/component/SourceCode.tsx b/docs/src/component/SourceCode.tsx index 7a27c014e1..71c140df01 100644 --- a/docs/src/component/SourceCode.tsx +++ b/docs/src/component/SourceCode.tsx @@ -3,6 +3,7 @@ import React from "react"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; +import CodeBlock from "@theme/CodeBlock"; import JavaScriptCode from "./code/JavaScriptCode"; import ReactCode from "./code/ReactCode"; @@ -15,39 +16,43 @@ import { SourceContext } from "./code/type"; // eslint-disable-next-line @typescript-eslint/naming-convention export default ({ - js, react, vue, vue3, angular, preact, svelte, + js, react, vue, vue3, angular, preact, svelte, style, ...otherProps -}: SourceContext) => - - { js ? js : } - - - { react ? react : } - - - { vue ? vue : } - - - { vue3 ? vue3 : } - - - {angular ? angular : } - - - {preact ? preact : } - - - {svelte ? svelte : } - - ; +}: SourceContext) =>
+ + + { js ? js : } + + + { react ? react : } + + + { vue ? vue : } + + + { vue3 ? vue3 : } + + + {angular ? angular : } + + + {preact ? preact : } + + + {svelte ? svelte : } + + + + { style && {`${style}`} } +
; diff --git a/docs/src/component/code/AngularCode.tsx b/docs/src/component/code/AngularCode.tsx index b90c3ea031..03a8820f95 100644 --- a/docs/src/component/code/AngularCode.tsx +++ b/docs/src/component/code/AngularCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => { const optionsObject = getOptionsObject(options); const pluginsDeclaration = plugins ? `\n public plugins: Plugin[] = [${getPlugins(plugins)}];\n` @@ -33,7 +33,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings const eventStatement = Object.keys(events).map(evt => ` (${evt})="${events[evt]}($event)"`).join(""); return <> - {` + {` ${panels.map(panel => `<${panel.tag} ${panel.isSlot ? "in-viewport" : "flicking-panel"}${getClass(panel)}${getStyle(panel)}>${panel.content}`).join("\n ")} ${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}`).join("\n")}` : ""}`} diff --git a/docs/src/component/code/JavaScriptCode.tsx b/docs/src/component/code/JavaScriptCode.tsx index 2b065927d5..c8c7638256 100644 --- a/docs/src/component/code/JavaScriptCode.tsx +++ b/docs/src/component/code/JavaScriptCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getStyle, withQuoteIfString } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins = [], siblings = [], imports = [], viewportClass="" }: SourceContext) => { const getOptions = (opts: { [key: string]: any }) => `${Object.keys(opts).map(key => `${key}: ${withQuoteIfString(opts[key])}`).join(",\n ")}`; const declareVars = Object.keys(methods).map(name => `const ${name} = ${methods[name]};\n`).join(""); @@ -16,7 +16,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl : "const flicking = new Flicking(\"#flick\")"; const addPlugins = plugins.length > 0 - ? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n ${getOptions(plugin[1])}\n}` : ""})`)});` : ""; + ? `flicking.addPlugins(${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{\n ${typeof plugin[1] === "object" ? getOptions(plugin[1]) : plugin[1] ?? ""}\n}` : ""})`)});` : ""; const allImports = [...plugins.map(plugin => [`{ ${plugin[0]} }`, "@egjs/flicking-plugins"]), ...imports]; const addEvents = Object.keys(events).map(evt => { const callback = events[evt]; @@ -26,7 +26,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins = [], sibl const slots = panels.filter(panel => panel.isSlot); return <> - {`
+ {`
${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}`).join("\n ")}
${slots.length ? `\n ${slots.map(slot => `<${slot.tag}${getClass(slot)}${getStyle(slot)}>${slot.content}`).join("\n ")}` : ""} diff --git a/docs/src/component/code/PreactCode.tsx b/docs/src/component/code/PreactCode.tsx index d6f0337bbe..3cb8542f61 100644 --- a/docs/src/component/code/PreactCode.tsx +++ b/docs/src/component/code/PreactCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => { const declarePlugins = plugins ? `\n private _plugins = [${getPlugins(plugins)}];\n` : ""; const slots = panels.filter(panel => panel.isSlot); @@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings, ${declareVars} export default class DemoComponent extends Component {${declarePlugins} public render() { - return ${siblings ? "<>\n " : ""} `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}> + return ${siblings ? "<>\n " : ""} `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}> ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}`).join("\n ")}${slotsTemplate} ${siblings ? `\n ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}`).join("\n ")}\n ` : ""}; } diff --git a/docs/src/component/code/ReactCode.tsx b/docs/src/component/code/ReactCode.tsx index f337c16829..6b5eb05acd 100644 --- a/docs/src/component/code/ReactCode.tsx +++ b/docs/src/component/code/ReactCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => { const declarePlugins = plugins ? `\n private _plugins = [${getPlugins(plugins)}];\n` : ""; const slots = panels.filter(panel => panel.isSlot); @@ -35,7 +35,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings, ${declareVars} export default class DemoComponent extends Component {${declarePlugins} public render() { - return ${siblings ? "<>\n " : ""} `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}> + return ${siblings ? "<>\n " : ""} `${key}=${typeof options[key] === "string" ? `"${options[key]}"` : `{${options[key]}}`}`).join(" ")}` : ""}${plugins ? " plugins={this._plugins}" : ""}${eventStatement}> ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel, "className")}${getStyle(panel, true)}>${panel.content.replace(/class/g, "className")}`).join("\n ")}${slotsTemplate} ${siblings ? `\n ${siblings.map(el => `<${el.tag}${getClass(el, "className")}${getStyle(el, true)}>${el.content.replace(/class/g, "className")}`).join("\n ")}\n ` : ""}; } diff --git a/docs/src/component/code/SvelteCode.tsx b/docs/src/component/code/SvelteCode.tsx index b3c3582e80..d738330f8d 100644 --- a/docs/src/component/code/SvelteCode.tsx +++ b/docs/src/component/code/SvelteCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings, imports = [], viewportClass="" }: SourceContext) => { const optionsObject = getOptionsObject(options); const declarePlugins = plugins ? `\n\nconst plugins = [${getPlugins(plugins)}];` : ""; const slots = panels.filter(panel => panel.isSlot); @@ -34,7 +34,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings, ${getImports(defaultImports, { includeFlicking: false })}${declarePlugins}${declareMethods} - + ${panels.filter(panel => !panel.isSlot).map(panel => `${panel.content}`).join("\n ")}${slotsTemplate} ${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}`).join("\n")}` : ""}`} ; diff --git a/docs/src/component/code/Vue3Code.tsx b/docs/src/component/code/Vue3Code.tsx index 0673c06656..9ad02e1612 100644 --- a/docs/src/component/code/Vue3Code.tsx +++ b/docs/src/component/code/Vue3Code.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => { const optionsObject = getOptionsObject(options); const slots = panels.filter(panel => panel.isSlot); const declarePlugins = plugins ? `, @@ -31,7 +31,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join(""); return <> - {` + {` ${panels.filter(panel => !panel.isSlot).map(panel => `<${panel.tag}${getClass(panel)}${getStyle(panel)}>${panel.content}`).join("\n ")}${slotsTemplate} ${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}`).join("\n")}` : ""}`} diff --git a/docs/src/component/code/VueCode.tsx b/docs/src/component/code/VueCode.tsx index 3bda1f9c5e..8dc9e0def1 100644 --- a/docs/src/component/code/VueCode.tsx +++ b/docs/src/component/code/VueCode.tsx @@ -4,7 +4,7 @@ import CodeBlock from "@theme/CodeBlock"; import { SourceContext } from "./type"; import { getClass, getImports, getOptionsObject, getPlugins, getStyle } from "./utils"; -export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [] }: SourceContext) => { +export default ({ options, panels, events = {}, methods = {}, plugins, siblings = [], imports = [], viewportClass="" }: SourceContext) => { const optionsObject = getOptionsObject(options); const declarePlugins = plugins ? `, data() { @@ -23,7 +23,7 @@ export default ({ options, panels, events = {}, methods = {}, plugins, siblings const eventStatement = Object.keys(events).map(evt => ` @${evt.replace(/([A-Z])/g, "-$1").toLowerCase()}="${events[evt]}"`).join(""); return <> - {` + {` ${panels.map(panel => `<${panel.tag}${panel.isSlot ? " slot=\"viewport\"" : ""}${getClass(panel)}${getStyle(panel)}>${panel.content}`).join("\n ")} ${siblings ? `\n${siblings.map(el => `<${el.tag}${getClass(el)}${getStyle(el)}>${el.content}`).join("\n")}` : ""}`} diff --git a/docs/src/component/code/type.ts b/docs/src/component/code/type.ts index b4f1a7d3df..0809aa3d42 100644 --- a/docs/src/component/code/type.ts +++ b/docs/src/component/code/type.ts @@ -13,6 +13,8 @@ export interface SourceContext { angular?: React.ReactElement; preact?: React.ReactElement; svelte?: React.ReactElement; + viewportClass?: string; + style?: string; } export interface InnerElement { diff --git a/docs/src/component/code/utils.ts b/docs/src/component/code/utils.ts index cf9d398ac3..fbc28a7acc 100644 --- a/docs/src/component/code/utils.ts +++ b/docs/src/component/code/utils.ts @@ -25,4 +25,4 @@ export const getImports = (otherImports, { return `${imports.map(imp => Array.isArray(imp) ? `import ${imp[0]} from "${imp[1]}";` : `import "${imp}";`).join("\n")}`; }; -export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${plugin[1] ? `{ ${getOptionsObject(plugin[1])} }` : ""}`).join(", ")})`; +export const getPlugins = (plugins) => `${plugins.map(plugin => `new ${plugin[0]}(${typeof plugin[1] === "object" ? `{ ${getOptionsObject(plugin[1])} }` : plugin[1] ?? ""}`).join(", ")})`; diff --git a/docs/src/css/demo/plugins.css b/docs/src/css/demo/plugins.css index 7f05af452a..04dc9f000a 100644 --- a/docs/src/css/demo/plugins.css +++ b/docs/src/css/demo/plugins.css @@ -1,13 +1,9 @@ .plugins-panel { position: relative; - display: block; border-radius: 5px; width: 80%; margin-right: 10px; - background: #f55; height: 200px; - text-align: center; - line-height: 200px; overflow: hidden; } .plugins-panel:after { diff --git a/docs/src/demo/plugins/Arrow.tsx b/docs/src/demo/plugins/Arrow.tsx index 55bd8b6738..e5a0dd3f7e 100644 --- a/docs/src/demo/plugins/Arrow.tsx +++ b/docs/src/demo/plugins/Arrow.tsx @@ -34,13 +34,53 @@ export default () => {
- + 1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, + { tag: "span", class: "flicking-arrow-prev", content: "", isSlot: true }, + { tag: "span", class: "flicking-arrow-next", content: "", isSlot: true } + ]} + plugins={[["Arrow"]]} + imports={["@egjs/flicking-plugins/dist/arrow.css"]} + style={`.card-panel { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + border: 2px solid rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1); + max-width: 100%; + font-size: 3rem; + margin: 0.5rem; + width: 50%; + height: 200px; + padding: 30px 20px; + box-sizing: border-box; + overflow: hidden; +} + +.flicking-index { + position: relative; + min-width: 60px; + text-align: center; +} + +.flicking-index::after { + position: absolute; + content: "PANEL"; + font-weight: bold; + left: 0; + bottom: -1.2rem; + width: 100%; + text-align: center; + font-size: 1rem; +} +`}/>
@@ -55,9 +95,9 @@ export default () => {
1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, { tag: "span", class: "flicking-arrow-prev is-circle", content: "", isSlot: true }, { tag: "span", class: "flicking-arrow-next is-circle", content: "", isSlot: true } ]} plugins={[["Arrow"]]} imports={["@egjs/flicking-plugins/dist/arrow.css"]} /> @@ -73,9 +113,9 @@ export default () => {
1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, ]} siblings={[ { tag: "span", class: "flicking-arrow-prev is-outside", content: "" }, { tag: "span", class: "flicking-arrow-next is-outside", content: "" } @@ -93,9 +133,9 @@ export default () => { 1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, ]} siblings={[ { tag: "span", class: "flicking-arrow-prev is-thin", content: "" }, { tag: "span", class: "flicking-arrow-next is-thin", content: "" } diff --git a/docs/src/demo/plugins/Autoplay.tsx b/docs/src/demo/plugins/Autoplay.tsx index 99c25e06c8..6fb6cb9ee0 100644 --- a/docs/src/demo/plugins/Autoplay.tsx +++ b/docs/src/demo/plugins/Autoplay.tsx @@ -2,20 +2,50 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ import React from "react"; import Flicking from "@egjs/react-flicking"; +import SourceCode from "@site/src/component/SourceCode"; import { AutoPlay } from "@egjs/flicking-plugins"; export default () => { const plugins = [new AutoPlay()]; - return ( -
- -
-
- -
-
- -
- ); + return (
+ +
+ +
+
+ +
+
+ +
+ + + ` }, + { tag: "div", class: "plugins-panel", content: `` }, + { tag: "div", class: "plugins-panel", content: `` }, + ]} + plugins={[["Autoplay"]]} + style={`.plugins-panel { + position: relative; + border-radius: 5px; + width: 80%; + margin-right: 10px; + height: 200px; + overflow: hidden; +} + +.panel-image { + top: -100%; + bottom: -100%; + width: 100%; + margin: auto; + position: absolute; + left: 50%; + transform: translate(-50%); +}`}/> +
); }; diff --git a/docs/src/demo/plugins/Fade.tsx b/docs/src/demo/plugins/Fade.tsx index 6ac0f5a983..c077c4aa47 100644 --- a/docs/src/demo/plugins/Fade.tsx +++ b/docs/src/demo/plugins/Fade.tsx @@ -2,20 +2,50 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ import React from "react"; import Flicking from "@egjs/react-flicking"; +import SourceCode from "@site/src/component/SourceCode"; import { Fade } from "@egjs/flicking-plugins"; export default () => { const plugins = [new Fade()]; - return ( -
- -
-
- -
-
- -
- ); + return (
+ +
+ +
+
+ +
+
+ +
+ + + ` }, + { tag: "div", class: "plugins-panel", content: `` }, + { tag: "div", class: "plugins-panel", content: `` }, + ]} + plugins={[["Fade"]]} + style={`.plugins-panel { + position: relative; + border-radius: 5px; + width: 80%; + margin-right: 10px; + height: 200px; + overflow: hidden; +} + +.panel-image { + top: -100%; + bottom: -100%; + width: 100%; + margin: auto; + position: absolute; + left: 50%; + transform: translate(-50%); +}`}/> +
); }; diff --git a/docs/src/demo/plugins/Pagination.tsx b/docs/src/demo/plugins/Pagination.tsx index 477dbd6e35..58c61f8722 100644 --- a/docs/src/demo/plugins/Pagination.tsx +++ b/docs/src/demo/plugins/Pagination.tsx @@ -36,18 +36,61 @@ export default () => { - + 1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, + { tag: "div", class: "card-panel", content: `4` }, + { tag: "div", class: "card-panel", content: `5` }, + { tag: "div", class: "card-panel", content: `6` }, + { tag: "div", class: "card-panel", content: `7` }, + { tag: "div", class: "card-panel", content: `8` }, + { tag: "div", class: "flicking-pagination", content: "", isSlot: true } + ]} + plugins={[["Pagination", { type: "bullet" }]]} + imports={["@egjs/flicking-plugins/dist/pagination.css"]} + style={`.flicking-viewport { + padding-bottom: 3rem !important; +} + +.card-panel { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + border: 2px solid rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1); + max-width: 100%; + font-size: 3rem; + margin: 0.5rem; + width: 50%; + height: 200px; + padding: 30px 20px; + box-sizing: border-box; + overflow: hidden; +} + +.flicking-index { + position: relative; + min-width: 60px; + text-align: center; +} + +.flicking-index::after { + position: absolute; + content: "PANEL"; + font-weight: bold; + left: 0; + bottom: -1.2rem; + width: 100%; + text-align: center; + font-size: 1rem; +} +`}/>
@@ -67,14 +110,14 @@ export default () => {
1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, + { tag: "div", class: "card-panel", content: `4` }, + { tag: "div", class: "card-panel", content: `5` }, + { tag: "div", class: "card-panel", content: `6` }, + { tag: "div", class: "card-panel", content: `7` }, + { tag: "div", class: "card-panel", content: `8` }, { tag: "div", class: "flicking-pagination", content: "", isSlot: true } ]} plugins={[["Pagination", { type: "fraction" }]]} imports={["@egjs/flicking-plugins/dist/pagination.css"]} /> @@ -97,14 +140,14 @@ export default () => { 1` }, + { tag: "div", class: "card-panel", content: `2` }, + { tag: "div", class: "card-panel", content: `3` }, + { tag: "div", class: "card-panel", content: `4` }, + { tag: "div", class: "card-panel", content: `5` }, + { tag: "div", class: "card-panel", content: `6` }, + { tag: "div", class: "card-panel", content: `7` }, + { tag: "div", class: "card-panel", content: `8` }, { tag: "div", class: "flicking-pagination", content: "", isSlot: true } ]} plugins={[["Pagination", { type: "scroll" }]]} imports={["@egjs/flicking-plugins/dist/pagination.css"]} /> diff --git a/docs/src/demo/plugins/Parallax.tsx b/docs/src/demo/plugins/Parallax.tsx index 658009cb6e..39c31e5ccf 100644 --- a/docs/src/demo/plugins/Parallax.tsx +++ b/docs/src/demo/plugins/Parallax.tsx @@ -2,20 +2,57 @@ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ import React from "react"; import Flicking from "@egjs/react-flicking"; +import SourceCode from "@site/src/component/SourceCode"; import { Parallax } from "@egjs/flicking-plugins"; export default () => { const plugins = [new Parallax("img")]; - return ( -
- -
-
- -
-
- -
- ); + return (
+ +
+ +
+
+ +
+
+ +
+ + + ` }, + { tag: "div", class: "plugins-panel", content: `` }, + { tag: "div", class: "plugins-panel", content: `` }, + ]} + plugins={[["Parallax", `"img"`]]} + style={`.plugins-panel { + position: relative; + border-radius: 5px; + width: 80%; + margin-right: 10px; + height: 200px; + overflow: hidden; +} + +.panel-image { + top: -100%; + bottom: -100%; + width: 100%; + margin: auto; + position: absolute; + left: 50%; + transform: translate(-50%); +} + +/* Notice that the element that you apply the effect must have a different size than the Panel. */ +.parallax .panel-image { + width: 150%; + max-width: 150%; +}`}/> +
); }; diff --git a/docs/src/demo/plugins/Perspective.tsx b/docs/src/demo/plugins/Perspective.tsx index d1a8f4e6ab..044cd84a66 100644 --- a/docs/src/demo/plugins/Perspective.tsx +++ b/docs/src/demo/plugins/Perspective.tsx @@ -28,14 +28,57 @@ export default () => { - + 1` }, + { tag: "div", class: "card-panel is-small", content: `2` }, + { tag: "div", class: "card-panel is-small", content: `3` }, + { tag: "div", class: "card-panel is-small", content: `4` }, + { tag: "div", class: "card-panel is-small", content: `5` }, + { tag: "div", class: "card-panel is-small", content: `6` }, + ]} + plugins={[["Perspective", { rotate: 0.5 }]]} + style={`.card-panel { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + border: 2px solid rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1); + max-width: 100%; + font-size: 3rem; + margin: 0.5rem; + width: 50%; + height: 200px; + padding: 30px 20px; + box-sizing: border-box; + overflow: hidden; +} + +.is-small { + width: 33%; +} + +.flicking-index { + position: relative; + min-width: 60px; + text-align: center; +} + +.flicking-index::after { + position: absolute; + content: "PANEL"; + font-weight: bold; + left: 0; + bottom: -1.2rem; + width: 100%; + text-align: center; + font-size: 1rem; +} +`}/>
@@ -49,12 +92,12 @@ export default () => {
1` }, + { tag: "div", class: "card-panel is-small", content: `2` }, + { tag: "div", class: "card-panel is-small", content: `3` }, + { tag: "div", class: "card-panel is-small", content: `4` }, + { tag: "div", class: "card-panel is-small", content: `5` }, + { tag: "div", class: "card-panel is-small", content: `6` }, ]} plugins={[["Perspective", { rotate: -1, scale: 2, perspective: 600 }]]} /> ); }; diff --git a/docs/src/pages/Plugins.mdx b/docs/src/pages/Plugins.mdx index 5fff0bf335..68aad0f566 100644 --- a/docs/src/pages/Plugins.mdx +++ b/docs/src/pages/Plugins.mdx @@ -202,6 +202,12 @@ These are the available CSS files: ## Parallax +:::warning +If the element that you apply the Parallax effect has the same size as the Panel element, the plugin may not work. You need to set a different size than the Panel element. + +For example, in this demo the .panel-image has width: 150% property on it. +::: + ### Options |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| |:---:|:---:|:---:|:---:|:---:|