Spaces:
Running
Running
File size: 3,052 Bytes
d0e9620 09a6f26 44349bf 09a6f26 d0e9620 |
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
# `gradio_modal`
<a href="https://pypi.org/project/gradio_modal/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal"></a>
A popup modal component
## Installation
```bash
pip install gradio_modal
```
## Usage
```python
import gradio as gr
from gradio_modal import Modal
with gr.Blocks() as demo:
with gr.Tab("Tab 1"):
text_1 = gr.Textbox(label="Input 1")
text_2 = gr.Textbox(label="Input 2")
text_1.submit(lambda x:x, text_1, text_2)
show_btn = gr.Button("Show Modal")
show_btn2 = gr.Button("Show Modal 2")
gr.Examples(
[["Text 1", "Text 2"], ["Text 3", "Text 4"]],
inputs=[text_1, text_2],
)
with gr.Tab("Tab 2"):
gr.Markdown("This is tab 2")
with Modal(visible=False) as modal:
for i in range(5):
gr.Markdown("Hello world!")
with Modal(visible=False) as modal2:
for i in range(100):
gr.Markdown("Hello world!")
show_btn.click(lambda: Modal(visible=True), None, modal)
show_btn2.click(lambda: Modal(visible=True), None, modal2)
if __name__ == "__main__":
demo.launch()
```
## `Modal`
### Initialization
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left" style="width: 25%;">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>False</code></td>
<td align="left">If False, modal will be hidden.</td>
</tr>
<tr>
<td align="left"><code>elem_id</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>elem_classes</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
</tr>
<tr>
<td align="left"><code>allow_user_close</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If True, user can close the modal (by clicking outside, clicking the X, or the escape key).</td>
</tr>
<tr>
<td align="left"><code>render</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
</tr>
</tbody></table>
### Events
| name | description |
|:-----|:------------|
| `blur` | This listener is triggered when the Modal is unfocused/blurred. |
|