A. 最终效果
B. 参考代码
要通过自界说HTML按钮来触发Gradio自带按钮的 click 函数,你可以使用JavaScript来模拟点击Gradio的按钮。这里是一个示例代码,展示了如何实现这一点:
- import gradio as gr
- # 自定义的 JavaScript,用于捕捉按钮点击并触发 Gradio 按钮的 click 事件
- custom_js = """
- <script>
- function triggerButton() {
- document.getElementById("gradio_button").click();
- }
- </script>
- """
- # Gradio 应用
- with gr.Blocks(head=custom_js) as demo:
- # Gradio 按钮
- action_button = gr.Button(value="Gradio Button", elem_id="gradio_button")
-
- # 自定义 HTML 按钮
- custom_html = """
- <button οnclick="triggerButton()">Custom HTML Button</button>
- """
-
- # 显示自定义 HTML 按钮
- gr.HTML(custom_html)
-
- # 文本框用于显示点击结果
- textbox = gr.Textbox()
-
- # 绑定 Gradio 按钮点击事件
- action_button.click(lambda: "Gradio Button Clicked!", None, textbox)
-
- demo.launch()
复制代码 C. 代码阐明
- custom_js: 这是自界说的JavaScript代码,用于界说 triggerButton 函数。当点击自界说的HTML按钮时,triggerButton 函数会模拟点击Gradio的按钮。
- Gradio按钮: 使用 gr.Button 创建Gradio按钮,并为其分配 elem_id 为 "gradio_button"。
- 自界说HTML按钮: 使用 gr.HTML 插入自界说的HTML按钮,并设置点击时调用 triggerButton 函数。
- 事件绑定: 使用 action_button.click 方法绑定按钮的点击事件,将效果输出到文本框。
运行这段代码后,你会看到一个Gradio生成的按钮和一个自界说的HTML按钮。当点击自界说HTML按钮时,Gradio按钮的 click 事件会被触发,文本框会显示相应的效果。
D. 自界说代码
- import gradio as gr
- custom_css = """
- body, html {
- height: 100%;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px;
- box-sizing: border-box;
- }
- .button-container {
- width: 100%;
- max-width: 400px; /* 可调整最大宽度 */
- }
- .centered-button {
- width: 100%;
- border: 2px solid gray;
- border-radius: 12px;
- padding: 10px;
- background-color: white;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- }
- .centered-button svg {
- width: 24px;
- height: 24px;
- }
- """
- # 自定义的 JavaScript,用于捕捉按钮点击并触发 Gradio 按钮的 click 事件
- custom_js = """
- <script>
- function triggerButton() {
- document.getElementById("gradio_button").click();
- }
- </script>
- """
- # Gradio 应用
- with gr.Blocks(head=custom_js, css=custom_css) as demo:
- with gr.Row():
- with gr.Column():
- # 输入文本
- input = gr.Textbox(label='Input')
- with gr.Column():
- # 输出文本
- output = gr.Textbox(label='Output')
- # 默认带icon的按钮
- default_button1 = gr.Button(
- icon='https://img.icons8.com/ink/48/linux.png', value='Web-Icon')
- default_button2 = gr.Button(
- icon='icons8-windows-ios-17-glyph-32.png', value='Local-Icon')
- # 隐藏真实按钮
- action_button = gr.Button(value="Gradio Button",
- elem_id="gradio_button", visible=False)
- # 自定义 HTML 按钮
- custom_html = """
- <div class="button-container">
- <button class="centered-button" οnclick="triggerButton()"><svg t="1723284361620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6820" width="32" height="32"><path d="M747.4 535.7c-0.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7z" p-id="6821"></path><path d="M642.3 230.7c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" p-id="6822"></path></svg> SVG-Icon
- </button>
- </div>
- """
- # 显示自定义按钮
- gr.HTML(custom_html)
- # 绑定 Gradio 按钮点击事件
- action_button.click(lambda x: f"Hello, {x}.", input, output)
- demo.launch(inbrowser=True)
复制代码 E. 样式阐明
要让按钮中的矢量图居中,你可以使用 display: flex 和 align-items: center、justify-content: center 来实现水平和垂直居中对齐。以下是一个包含矢量图(例如一个简单的SVG图标)的按钮,图标将居中显示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Centered Button with SVG</title>
- <style>
- body, html {
- height: 100%;
- margin: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px;
- box-sizing: border-box;
- }
- .button-container {
- width: 100%;
- max-width: 400px; /* 可调整最大宽度 */
- }
- .centered-button {
- width: 100%;
- border: 2px solid gray;
- border-radius: 12px;
- padding: 10px;
- background-color: white;
- cursor: pointer;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- }
- .centered-button svg {
- width: 24px;
- height: 24px;
- }
- </style>
- </head>
- <body>
- <div class="button-container">
- <button class="centered-button">
- <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
- <g transform-origin="center" transform="scale(1)">
- <path d="M12 0C6.486 0 2 4.486 2 10C2 15.514 6.486 20 12 20C17.514 20 22 15.514 22 10C22 4.486 17.514 0 12 0zM12 18C7.589 18 4 14.411 4 10C4 5.589 7.589 2 12 2C16.411 2 20 5.589 20 10C20 14.411 16.411 18 12 18zM12 5C10.346 5 9 6.346 9 8C9 9.654 10.346 11 12 11C13.654 11 15 9.654 15 8C15 6.346 13.654 5 12 5zM12 13C10.346 13 9 14.346 9 16C9 17.654 10.346 19 12 19C13.654 19 15 17.654 15 16C15 14.346 13.654 13 12 13z" fill="currentColor"/>
- </g>
- </svg>
- </button>
- </div>
- </body>
- </html>
复制代码 代码解释:
- display: flex; justify-content: center; align-items: center;:
- 这行代码在 .centered-button 中使用 flexbox 结构,将按钮中的内容(即 SVG 图标)水平和垂直居中。
- svg 标签:
- 这是一个简单的圆形图标示例。你可以替换为任何你想要的矢量图标。
- width="24px" 和 height="24px":设置SVG图标的宽高为24px。
- fill="currentColor":SVG的填充颜色将继承按钮的文本颜色,如许当你改变按钮的颜色时,SVG图标颜色也会随之变化。
- .centered-button svg 样式:
- 控制SVG图标的大小,使其适合按钮,并确保其在按钮中居中。
运行效果:
按钮会在页面中居中显示,按钮中的矢量图标也会在按钮内部居中显示,并且图标的大小可以根据必要进行调解。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |