Spaces:
Running
Running
File size: 1,630 Bytes
db32e48 176823e db32e48 176823e db32e48 176823e db32e48 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
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()
|