# `gradio_banner`
<div style="display: flex; gap: 7px;">
<a href="https://pypi.org/project/gradio-banner/" target="_blank"><img alt="PyPI" src="https://img.shields.io/pypi/v/gradio-banner"></a>
<a href="https://huggingface.co/spaces/dwancin/gradio_banner" target="_blank"><img alt="Demo" src="https://img.shields.io/badge/%F0%9F%A4%97%20Demo-%23097EFF?style=flat&logoColor=black"></a>
<a href="https://github.com/dwancin/gradio-banner" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Repository-white?logo=github&logoColor=black"></a>
</div>
A banner component for displaying important information, alerts, notifications, and types of messages within a Gradio Blocks.
## Installation
```bash
pip install gradio_banner
```
## Usage
```python
import gradio as gr
from gradio_banner import Banner
with gr.Blocks() as demo:
with gr.Row():
Banner(value="Large info banner *with* **markdown** `value`", variant="info")
with gr.Row():
Banner(variant="success", size="sm")
with gr.Row():
Banner(value="Large warning banner with default label and specified value", variant="warning")
with gr.Row():
Banner(variant="error", show_close_button=True)
with gr.Row():
with gr.Column():
with gr.Row():
Banner(value="Small info banner with close button and without label", size="sm", show_close_button=True, show_label=False)
with gr.Row():
Banner(label="Custom label and icon", value="Large info banner with custom icon", icon="https://i.pinimg.com/originals/e9/ab/30/e9ab30fdcadf40bdc095a1e317f3851c.gif")
with gr.Column():
Banner(value="Large success banner with specified value", variant="success")
if __name__ == "__main__":
demo.launch()
```
## 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>value</code></td>
<td align="left" style="width: 25%;">
```python
str | Callable | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>variant</code></td>
<td align="left" style="width: 25%;">
```python
str
```
</td>
<td align="left"><code>"info"</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>label</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>icon</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>size</code></td>
<td align="left" style="width: 25%;">
```python
Literal["sm", "lg"] | None
```
</td>
<td align="left"><code>"lg"</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>show_close_button</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>False</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>show_icon</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>every</code></td>
<td align="left" style="width: 25%;">
```python
Timer | float | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>inputs</code></td>
<td align="left" style="width: 25%;">
```python
Component | list[Component] | set[Component] | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>show_label</code></td>
<td align="left" style="width: 25%;">
```python
bool | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>scale</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>min_width</code></td>
<td align="left" style="width: 25%;">
```python
int
```
</td>
<td align="left"><code>160</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>rtl</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>False</code></td>
<td align="left"></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"></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"></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"></td>
</tr>
<tr>
<td align="left"><code>key</code></td>
<td align="left" style="width: 25%;">
```python
int | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
</tbody></table>
### Events
| name | description |
|:-----|:------------|
| `change` | Triggered when the value of the Banner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
| `input` | This listener is triggered when the user changes the value of the Banner. |
| `submit` | This listener is triggered when the user presses the Enter key while the Banner is focused. |
### User function
The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
- When used as an Input, the component only impacts the input signature of the user function.
- When used as an output, the component only impacts the return signature of the user function.
The code snippet below is accurate in cases where the component is used as both an input and an output.
- **As output:** Is passed, passes text value as a {str} into the function.
- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
```python
def predict(
value: str | None
) -> str | None:
return value
```
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-banner",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "alert, banner, error, gradio-custom-component, gradio-template-SimpleTextbox, info, message, notification, success, template, warning",
"author": "Daniel Ialcin Misser Westergaard",
"author_email": null,
"download_url": null,
"platform": null,
"description": "\n# `gradio_banner`\n<div style=\"display: flex; gap: 7px;\">\n <a href=\"https://pypi.org/project/gradio-banner/\" target=\"_blank\"><img alt=\"PyPI\" src=\"https://img.shields.io/pypi/v/gradio-banner\"></a>\n <a href=\"https://huggingface.co/spaces/dwancin/gradio_banner\" target=\"_blank\"><img alt=\"Demo\" src=\"https://img.shields.io/badge/%F0%9F%A4%97%20Demo-%23097EFF?style=flat&logoColor=black\"></a>\n <a href=\"https://github.com/dwancin/gradio-banner\" target=\"_blank\"><img alt=\"Static Badge\" src=\"https://img.shields.io/badge/Repository-white?logo=github&logoColor=black\"></a>\n</div>\n\nA banner component for displaying important information, alerts, notifications, and types of messages within a Gradio Blocks.\n\n## Installation\n\n```bash\npip install gradio_banner\n```\n\n## Usage\n\n```python\n\nimport gradio as gr\nfrom gradio_banner import Banner\n\nwith gr.Blocks() as demo:\n with gr.Row():\n Banner(value=\"Large info banner *with* **markdown** `value`\", variant=\"info\")\n with gr.Row():\n Banner(variant=\"success\", size=\"sm\")\n with gr.Row():\n Banner(value=\"Large warning banner with default label and specified value\", variant=\"warning\")\n with gr.Row():\n Banner(variant=\"error\", show_close_button=True)\n with gr.Row():\n with gr.Column():\n with gr.Row():\n Banner(value=\"Small info banner with close button and without label\", size=\"sm\", show_close_button=True, show_label=False)\n with gr.Row():\n Banner(label=\"Custom label and icon\", value=\"Large info banner with custom icon\", icon=\"https://i.pinimg.com/originals/e9/ab/30/e9ab30fdcadf40bdc095a1e317f3851c.gif\")\n with gr.Column():\n Banner(value=\"Large success banner with specified value\", variant=\"success\")\n\nif __name__ == \"__main__\":\n demo.launch()\n\n```\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>value</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | Callable | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>variant</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr\n```\n\n</td>\n<td align=\"left\"><code>\"info\"</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>label</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\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>icon</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\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>size</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nLiteral[\"sm\", \"lg\"] | None\n```\n\n</td>\n<td align=\"left\"><code>\"lg\"</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_close_button</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\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_icon</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\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>every</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nTimer | float | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>inputs</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nComponent | list[Component] | set[Component] | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>scale</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>min_width</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint\n```\n\n</td>\n<td align=\"left\"><code>160</code></td>\n<td align=\"left\"></td>\n</tr>\n\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>True</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>rtl</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\"></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\"></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\"></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\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>key</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `change` | Triggered when the value of the Banner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |\n| `input` | This listener is triggered when the user changes the value of the Banner. |\n| `submit` | This listener is triggered when the user presses the Enter key while the Banner is focused. |\n\n\n\n### User function\n\nThe impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).\n\n- When used as an Input, the component only impacts the input signature of the user function.\n- When used as an output, the component only impacts the return signature of the user function.\n\nThe code snippet below is accurate in cases where the component is used as both an input and an output.\n\n- **As output:** Is passed, passes text value as a {str} into the function.\n- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.\n\n ```python\n def predict(\n value: str | None\n ) -> str | None:\n return value\n ```\n \n",
"bugtrack_url": null,
"license": null,
"summary": "A banner component for displaying important information, alerts, notifications, and types of messages within a Gradio Blocks.",
"version": "1.0.1",
"project_urls": null,
"split_keywords": [
"alert",
" banner",
" error",
" gradio-custom-component",
" gradio-template-simpletextbox",
" info",
" message",
" notification",
" success",
" template",
" warning"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "b3ad7f7e348c0cfe49e45f8841eca17b43ebec43bcd7ea07d13281e1daf5ce70",
"md5": "114052c350171a33ac6d61f88c60a09c",
"sha256": "93d4939648557bc19f06c93fca96f4fce1edb735af8adb9f136c588b5cfec772"
},
"downloads": -1,
"filename": "gradio_banner-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "114052c350171a33ac6d61f88c60a09c",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 82048,
"upload_time": "2024-07-17T06:28:05",
"upload_time_iso_8601": "2024-07-17T06:28:05.881430Z",
"url": "https://files.pythonhosted.org/packages/b3/ad/7f7e348c0cfe49e45f8841eca17b43ebec43bcd7ea07d13281e1daf5ce70/gradio_banner-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-07-17 06:28:05",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "gradio-banner"
}
JSON