# `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. |
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-modal",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "Modal, Popup, gradio-custom-component, gradio-template-Column",
"author": null,
"author_email": "YOUR NAME <YOUREMAIL@domain.com>",
"download_url": "https://files.pythonhosted.org/packages/be/db/621428a5d36f7fd81905308e6d16e9651b749f59523698fbd9328f650d98/gradio_modal-0.0.3.tar.gz",
"platform": null,
"description": "\n# `gradio_modal`\n<a href=\"https://pypi.org/project/gradio_modal/\" target=\"_blank\"><img alt=\"PyPI - Version\" src=\"https://img.shields.io/pypi/v/gradio_modal\"></a> \n\nA popup modal component\n\n## Installation\n\n```bash\npip install gradio_modal\n```\n\n## Usage\n\n```python\nimport gradio as gr\nfrom gradio_modal import Modal\n\nwith gr.Blocks() as demo:\n with gr.Tab(\"Tab 1\"):\n text_1 = gr.Textbox(label=\"Input 1\")\n text_2 = gr.Textbox(label=\"Input 2\")\n text_1.submit(lambda x:x, text_1, text_2)\n show_btn = gr.Button(\"Show Modal\")\n show_btn2 = gr.Button(\"Show Modal 2\")\n gr.Examples(\n [[\"Text 1\", \"Text 2\"], [\"Text 3\", \"Text 4\"]],\n inputs=[text_1, text_2],\n )\n with gr.Tab(\"Tab 2\"):\n gr.Markdown(\"This is tab 2\")\n with Modal(visible=False) as modal:\n for i in range(5):\n gr.Markdown(\"Hello world!\")\n with Modal(visible=False) as modal2:\n for i in range(100):\n gr.Markdown(\"Hello world!\")\n show_btn.click(lambda: Modal(visible=True), None, modal)\n show_btn2.click(lambda: Modal(visible=True), None, modal2)\n\nif __name__ == \"__main__\":\n demo.launch()\n\n```\n\n## `Modal`\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>False</code></td>\n<td align=\"left\">If False, modal will be hidden.</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<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>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<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>\n</tr>\n\n<tr>\n<td align=\"left\"><code>allow_user_close</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\">If True, user can close the modal (by clicking outside, clicking the X, or the escape key).</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<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>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `blur` | This listener is triggered when the Modal is unfocused/blurred. |\n\n\n\n",
"bugtrack_url": null,
"license": null,
"summary": "A popup modal component",
"version": "0.0.3",
"project_urls": null,
"split_keywords": [
"modal",
" popup",
" gradio-custom-component",
" gradio-template-column"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "dd38efbbd6de7c9916b7721b750e0c8b99fbe28c8a6e118feafaf11ad937317d",
"md5": "005d2435f4495bc36aa1e5f350560281",
"sha256": "454cbd7d9ca7607894bd828a2cda0cc3f33a0c46b3d91a392a38e19fa288d46a"
},
"downloads": -1,
"filename": "gradio_modal-0.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "005d2435f4495bc36aa1e5f350560281",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 14040,
"upload_time": "2024-04-18T16:27:14",
"upload_time_iso_8601": "2024-04-18T16:27:14.855948Z",
"url": "https://files.pythonhosted.org/packages/dd/38/efbbd6de7c9916b7721b750e0c8b99fbe28c8a6e118feafaf11ad937317d/gradio_modal-0.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "bedb621428a5d36f7fd81905308e6d16e9651b749f59523698fbd9328f650d98",
"md5": "e5def51f6a8053e87a324783f341cfe5",
"sha256": "f1eaf3fd2b4b47a1efe84a291d95579093c65742e50789f563bb7065b14eb748"
},
"downloads": -1,
"filename": "gradio_modal-0.0.3.tar.gz",
"has_sig": false,
"md5_digest": "e5def51f6a8053e87a324783f341cfe5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 28631,
"upload_time": "2024-04-18T16:27:16",
"upload_time_iso_8601": "2024-04-18T16:27:16.023252Z",
"url": "https://files.pythonhosted.org/packages/be/db/621428a5d36f7fd81905308e6d16e9651b749f59523698fbd9328f650d98/gradio_modal-0.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-04-18 16:27:16",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "gradio-modal"
}
JSON