# Brython-components
Brython-components is an easy implementation of brython's webcomonent.
## Installation
Use the package manager [pip](https://pip.pypa.io/en/stable/) to install.
```bash
pip install brip
brip install brython-components
```
## Usage
### file.html
```html
<popup-info>
<span slot="data-text">Popup info data</span>
</popup-info>
```
### file.py
```python
from browser import html
from brython_components import bind, customElement, defineElement, react
html.maketag("SLOT")
@defineElement("popup-info")
class PopupInfo(customElement):
def __init__(self):
super().__init__()
self.render_root <= html.STYLE('''
.wrapper {
position: relative;
}
.info {
font-size: 0.8rem;
width: 200px;
display: inline-block;
border: 1px solid black;
padding: 10px;
background: white;
border-radius: 10px;
opacity: 0;
transition: 0.6s all;
position: absolute;
top: 20px;
left: 10px;
z-index: 3;
}
.icon:hover + .info, .icon:focus + .info {
opacity: 1;
}
''')
wrapper = html.SPAN(Class="wrapper")
icon = html.SPAN(Class="icon", tabindex="0")
wrapper <= icon
info = html.SPAN(Class="info")
info <= html.SLOT(name="data-text")
wrapper <= info
self.render_root <= wrapper
@bind(".icon", "click")
def deactivate(self, event):
info = self.render_root.select_one(".info")
icon = event.target
if not info.style.opacity:
info.style["opacity"] = 1
icon.style["text-decoration"] = "line-through"
else:
info.style["opacity"] = ""
icon.style["text-decoration"] = ""
@react(".icon")
def completed(self, targets):
targets[0].text = ":) hover me"
```
## License
[MIT](https://choosealicense.com/licenses/mit/)
Raw data
{
"_id": null,
"home_page": null,
"name": "brython-components",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.10",
"maintainer_email": null,
"keywords": "brython, Development, webcomponents",
"author": "Lorenzo A. Garcia Calzadilla",
"author_email": "lorenzogarciacalzadilla@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/cc/a8/ab1ce602c18d326980e89953799e64653b6c246bb30d831518cb27ccbf06/brython_components-0.3.1.tar.gz",
"platform": null,
"description": "# Brython-components\n\nBrython-components is an easy implementation of brython's webcomonent.\n\n## Installation\n\nUse the package manager [pip](https://pip.pypa.io/en/stable/) to install.\n\n```bash\npip install brip\nbrip install brython-components\n```\n\n## Usage\n\n### file.html\n```html\n<popup-info>\n <span slot=\"data-text\">Popup info data</span>\n</popup-info>\n```\n\n### file.py\n```python\nfrom browser import html\n\nfrom brython_components import bind, customElement, defineElement, react\n\nhtml.maketag(\"SLOT\")\n\n@defineElement(\"popup-info\")\nclass PopupInfo(customElement):\n def __init__(self):\n super().__init__()\n\n self.render_root <= html.STYLE('''\n .wrapper {\n position: relative;\n }\n .info {\n font-size: 0.8rem;\n width: 200px;\n display: inline-block;\n border: 1px solid black;\n padding: 10px;\n background: white;\n border-radius: 10px;\n opacity: 0;\n transition: 0.6s all;\n position: absolute;\n top: 20px;\n left: 10px;\n z-index: 3;\n }\n .icon:hover + .info, .icon:focus + .info {\n opacity: 1;\n }\n ''')\n\n wrapper = html.SPAN(Class=\"wrapper\")\n\n icon = html.SPAN(Class=\"icon\", tabindex=\"0\")\n wrapper <= icon\n\n info = html.SPAN(Class=\"info\")\n info <= html.SLOT(name=\"data-text\")\n wrapper <= info\n\n self.render_root <= wrapper\n \n @bind(\".icon\", \"click\")\n def deactivate(self, event):\n info = self.render_root.select_one(\".info\")\n icon = event.target\n if not info.style.opacity:\n info.style[\"opacity\"] = 1\n icon.style[\"text-decoration\"] = \"line-through\"\n else:\n info.style[\"opacity\"] = \"\"\n icon.style[\"text-decoration\"] = \"\"\n \n @react(\".icon\")\n def completed(self, targets):\n targets[0].text = \":) hover me\"\n```\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Brython-components is an easy implementation of brython's webcomonent",
"version": "0.3.1",
"project_urls": null,
"split_keywords": [
"brython",
" development",
" webcomponents"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "22f6c8f6f9b422b450aac319753ae5dead79554f77831271e263e289beee2c95",
"md5": "79ddf0e04706facc26d3e25ef089d66d",
"sha256": "76b339b84275abbb30ca755cc6ba6e2cc17d8f19ac8b1b358e43b0f676ae3b1b"
},
"downloads": -1,
"filename": "brython_components-0.3.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "79ddf0e04706facc26d3e25ef089d66d",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.10",
"size": 4092,
"upload_time": "2024-11-10T20:32:52",
"upload_time_iso_8601": "2024-11-10T20:32:52.737375Z",
"url": "https://files.pythonhosted.org/packages/22/f6/c8f6f9b422b450aac319753ae5dead79554f77831271e263e289beee2c95/brython_components-0.3.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "cca8ab1ce602c18d326980e89953799e64653b6c246bb30d831518cb27ccbf06",
"md5": "24680adf6e2be2d5f15c7faf006eca8d",
"sha256": "c739a3d38d95ad47039536b9769fbc4a4659f103e0a987186749f6886b4b3712"
},
"downloads": -1,
"filename": "brython_components-0.3.1.tar.gz",
"has_sig": false,
"md5_digest": "24680adf6e2be2d5f15c7faf006eca8d",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.10",
"size": 3399,
"upload_time": "2024-11-10T20:32:54",
"upload_time_iso_8601": "2024-11-10T20:32:54.570079Z",
"url": "https://files.pythonhosted.org/packages/cc/a8/ab1ce602c18d326980e89953799e64653b6c246bb30d831518cb27ccbf06/brython_components-0.3.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-10 20:32:54",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "brython-components"
}
JSON