diff --git a/doc/gui/extension/example_library/assets/logo.png b/doc/gui/extension/example_library/assets/logo.png new file mode 100644 index 0000000000..0822eff0c8 Binary files /dev/null and b/doc/gui/extension/example_library/assets/logo.png differ diff --git a/doc/gui/extension/example_library/example_library.py b/doc/gui/extension/example_library/example_library.py index acba0aeca4..39bdcd12c5 100644 --- a/doc/gui/extension/example_library/example_library.py +++ b/doc/gui/extension/example_library/example_library.py @@ -9,12 +9,19 @@ # an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the # specific language governing permissions and limitations under the License. +import base64 + from taipy.gui.extension import Element, ElementLibrary, ElementProperty, PropertyType class ExampleLibrary(ElementLibrary): def __init__(self) -> None: # Initialize the set of visual elements for this extension library + + logo_path = self.get_resource("assets/logo.png") + with open(logo_path, "rb") as f: + logo_base64 = base64.b64encode(f.read()).decode("utf-8") + self.elements = { # A static element that displays its properties in a fraction "fraction": Element( @@ -51,6 +58,13 @@ def __init__(self) -> None: # The name of the React component (VisualLabelList) that implements this custom # element, exported as LabeledItemList in front-end/src/index.ts react_component="VisualLabelList", + ), + "logo_with_text": Element( + "text", + { + "text": ElementProperty(PropertyType.string), + "logo_path": ElementProperty(PropertyType.string, default_value=logo_base64), + }, ) } @@ -77,4 +91,7 @@ def get_elements(self) -> dict: def get_scripts(self) -> list[str]: # Only one JavaScript bundle for this library. - return ["front-end/dist/exampleLibrary.js"] + return [ + "front-end/dist/exampleLibrary.js", + "front-end/scripts/logoAnimation.js", + ] diff --git a/doc/gui/extension/example_library/front-end/scripts/logoAnimation.js b/doc/gui/extension/example_library/front-end/scripts/logoAnimation.js new file mode 100644 index 0000000000..ab7616b5cf --- /dev/null +++ b/doc/gui/extension/example_library/front-end/scripts/logoAnimation.js @@ -0,0 +1,26 @@ +const style = document.createElement('style'); +style.innerHTML = ` +@keyframes logoAnimation { + from { + transform: scale(1); + } + to { + transform: scale(1.5); + } +} + +.logo-animate { + animation: logoAnimation 2s infinite alternate; +} +`; +document.head.appendChild(style); + +document.addEventListener("DOMContentLoaded", () => { + const checkForElement = setInterval(() => { + const logoImage = document.querySelector('img[alt="LogoWithText"]'); + if (logoImage) { + logoImage.classList.add('logo-animate'); + clearInterval(checkForElement); + } + }, 100); +}); diff --git a/doc/gui/extension/example_library/front-end/src/LogoWithText.tsx b/doc/gui/extension/example_library/front-end/src/LogoWithText.tsx new file mode 100644 index 0000000000..37339271a3 --- /dev/null +++ b/doc/gui/extension/example_library/front-end/src/LogoWithText.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { useDynamicProperty } from "taipy-gui"; + +interface CaptionProps { + text: string; + defaultText: string; + logoPath: string; +} + +const styles = { + container: { + display: "flex", + alignItems: "center", + }, + logo: { + width: "4em", + height: "4em", + marginRight: "10px", + }, +}; + +const LogoWithText = ({ text, defaultText, logoPath }: CaptionProps) => { + const value = useDynamicProperty(text, defaultText, ""); + + return ( +