Coloring's picture
feat: add Flow component
176823e
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()