Spaces:
Running
Running
import gradio as gr | |
import modelscope_studio as mgr | |
with gr.Blocks() as demo: | |
mgr.Markdown( | |
""" | |
custom tag:<custom-tag value="aaa"></custom-tag> | |
""", | |
custom_components={ | |
"custom-tag": { | |
"props": ["value"], | |
"template": | |
"<button onclick='{onClick}'>{value}</button>", | |
# The `js` property should be a string containing a JavaScript Function. | |
"js": | |
""" | |
(props, cc, { el, onMount, onUpdate }) => { | |
// `onMount` will be called after the template first rendered | |
onMount(() => { | |
// `el` is the container element | |
console.log(el) | |
// the return function will be called when the component is being unmounted | |
return () => { | |
console.log('unmount') | |
} | |
}) | |
// `onUpdate` will be called when the props changed | |
onUpdate(() => { | |
console.log(props) | |
}) | |
onUpdate( | |
() => { | |
console.log(props, 'after mount') | |
}, | |
// By default, the callback will not be called when the component is being mounted. Set `callAfterMount` to true to enable it. | |
{ callAfterMount: true } | |
) | |
console.log(props.children) // By default, `props` will be passed a property named `children`, which can get the content in the tag, such as 'xx' in '<tag>xx</tag>'. | |
// The return value will be merged with `props` and passed to the template. | |
return { | |
value: 'Click Me: ' + props.value, | |
onClick: () => { | |
alert('hello') | |
} | |
} | |
}""" | |
} | |
}) | |
if __name__ == "__main__": | |
demo.queue().launch() | |