# st-card
Streamlit Component, for a UI card
authors - [@gamcoh](https://github.com/gamcoh) @Pernod Ricard
## Installation
Install `streamlit-card` with pip
```bash
pip install streamlit-card
```
usage, import the `card` function from `streamlit_card`
```py
from streamlit_card import card
hasClicked = card(
title="Hello World!",
text="Some description",
image="http://placekitten.com/200/300",
url="https://github.com/gamcoh/st-card"
)
```
You can also use a local image by doing this instead
```py
import base64
with open(filepath, "rb") as f:
data = f.read()
encoded = base64.b64encode(data)
data = "data:image/png;base64," + encoded.decode("utf-8")
from streamlit_card import card
hasClicked = card(
title="Hello World!",
text="Some description",
image=data
url="https://github.com/gamcoh/st-card"
)
```
You can also create a card without an URL. That way you control the behavior when the user click on it.
For instance:
```py
from streamlit_card import card
hasClicked = card(
title="Hello World!",
text="Some description",
image="http://placekitten.com/200/300",
)
if hasClicked:
# do something
```
If you want, you could use a callback to handle the click like so:
```py
from streamlit_card import card
hasClicked = card(
title="Hello World!",
text="Some description",
image="http://placekitten.com/200/300",
on_click=lambda: print("Clicked!")
)
```
## Customizations
If you want, you could use a callback to handle the click like so:
```py
from streamlit_card import card
res = card(
title="Streamlit Card",
text="This is a test card",
image="https://placekitten.com/500/500",
styles={
"card": {
"width": "500px",
"height": "500px",
"border-radius": "60px",
"box-shadow": "0 0 10px rgba(0,0,0,0.5)",
...
},
"text": {
"font-family": "serif",
...
}
}
)
```
If you want to set the size of as `use_column_width=True`, do this:
```py
from streamlit_card import card
res = card(
title="Streamlit Card",
text="This is a test card",
image="https://placekitten.com/500/500",
styles={
"card": {
"width": "100%", # <- make the card use the width of its container, note that it will not resize the height of the card automatically
"height": "300px" # <- if you want to set the card height to 300px
...
}
}
)
```
If you want to modify the filter applied to the image, you could do this:
```py
from streamlit_card import card
res = card(
title="Streamlit Card",
text="This is a test card",
image="https://placekitten.com/500/500",
styles={
"card": {
"width": "500px",
"height": "500px",
"border-radius": "60px",
"box-shadow": "0 0 10px rgba(0,0,0,0.5)",
...
},
"filter": {
"background-color": "rgba(0, 0, 0, 0)" # <- make the image not dimmed anymore
...
}
}
)
```
The editable CSS are `"card"`, `"title"`, `"text"`, `"filter"` and `"div"`.
## Multiple descriptions
```py
from streamlit_card import card
res = card(
title="Streamlit Card",
text=["This is a test card", "This is a subtext"],
image="https://placekitten.com/500/500",
)
```
Raw data
{
"_id": null,
"home_page": "https://github.com/gamcoh/st-card",
"name": "streamlit-card",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "card streamlit streamlit-component",
"author": "gamcoh",
"author_email": "cohengamliel8@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/c9/6b/1b330935e10e0734b7da180f5a83931f589edded6ca1111260a7a3fcabb5/streamlit-card-1.0.0.tar.gz",
"platform": null,
"description": "# st-card\n\nStreamlit Component, for a UI card\n\nauthors - [@gamcoh](https://github.com/gamcoh) @Pernod Ricard\n\n\n\n## Installation\n\nInstall `streamlit-card` with pip\n```bash\npip install streamlit-card\n```\n\nusage, import the `card` function from `streamlit_card`\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n title=\"Hello World!\",\n text=\"Some description\",\n image=\"http://placekitten.com/200/300\",\n url=\"https://github.com/gamcoh/st-card\"\n)\n```\n\nYou can also use a local image by doing this instead\n```py\nimport base64\n\nwith open(filepath, \"rb\") as f:\n data = f.read()\n encoded = base64.b64encode(data)\ndata = \"data:image/png;base64,\" + encoded.decode(\"utf-8\")\n\nfrom streamlit_card import card\n\nhasClicked = card(\n title=\"Hello World!\",\n text=\"Some description\",\n image=data\n url=\"https://github.com/gamcoh/st-card\"\n)\n```\n\nYou can also create a card without an URL. That way you control the behavior when the user click on it.\nFor instance:\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n title=\"Hello World!\",\n text=\"Some description\",\n image=\"http://placekitten.com/200/300\",\n)\n\nif hasClicked:\n # do something\n```\n\nIf you want, you could use a callback to handle the click like so:\n```py\nfrom streamlit_card import card\n\nhasClicked = card(\n title=\"Hello World!\",\n text=\"Some description\",\n image=\"http://placekitten.com/200/300\",\n on_click=lambda: print(\"Clicked!\")\n)\n```\n\n## Customizations\n\nIf you want, you could use a callback to handle the click like so:\n```py\nfrom streamlit_card import card\n\nres = card(\n title=\"Streamlit Card\",\n text=\"This is a test card\",\n image=\"https://placekitten.com/500/500\",\n styles={\n \"card\": {\n \"width\": \"500px\",\n \"height\": \"500px\",\n \"border-radius\": \"60px\",\n \"box-shadow\": \"0 0 10px rgba(0,0,0,0.5)\",\n ...\n },\n \"text\": {\n \"font-family\": \"serif\",\n ...\n }\n }\n)\n```\n\nIf you want to set the size of as `use_column_width=True`, do this:\n```py\nfrom streamlit_card import card\n\nres = card(\n title=\"Streamlit Card\",\n text=\"This is a test card\",\n image=\"https://placekitten.com/500/500\",\n styles={\n \"card\": {\n \"width\": \"100%\", # <- make the card use the width of its container, note that it will not resize the height of the card automatically\n \"height\": \"300px\" # <- if you want to set the card height to 300px\n ...\n }\n }\n)\n```\n\nIf you want to modify the filter applied to the image, you could do this:\n```py\nfrom streamlit_card import card\n\nres = card(\n title=\"Streamlit Card\",\n text=\"This is a test card\",\n image=\"https://placekitten.com/500/500\",\n styles={\n \"card\": {\n \"width\": \"500px\",\n \"height\": \"500px\",\n \"border-radius\": \"60px\",\n \"box-shadow\": \"0 0 10px rgba(0,0,0,0.5)\",\n ...\n },\n \"filter\": {\n \"background-color\": \"rgba(0, 0, 0, 0)\" # <- make the image not dimmed anymore\n ...\n }\n }\n)\n```\n\nThe editable CSS are `\"card\"`, `\"title\"`, `\"text\"`, `\"filter\"` and `\"div\"`.\n\n## Multiple descriptions\n\n```py\nfrom streamlit_card import card\n\nres = card(\n title=\"Streamlit Card\",\n text=[\"This is a test card\", \"This is a subtext\"],\n image=\"https://placekitten.com/500/500\",\n)\n```\n",
"bugtrack_url": null,
"license": "",
"summary": "A streamlit component, to make UI cards",
"version": "1.0.0",
"project_urls": {
"Homepage": "https://github.com/gamcoh/st-card"
},
"split_keywords": [
"card",
"streamlit",
"streamlit-component"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "7a2bc888890ee9c6ef68dd664bcb3fca3aa7ff6ab2add1957ed01b6586b58452",
"md5": "813050527fee51d2c93ccdd2ff8a21bb",
"sha256": "625ab3cd1e5368c7d9c5aeeb52a67786183e0dba940d668c556fbae01149fb3f"
},
"downloads": -1,
"filename": "streamlit_card-1.0.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "813050527fee51d2c93ccdd2ff8a21bb",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 680830,
"upload_time": "2023-12-07T11:31:09",
"upload_time_iso_8601": "2023-12-07T11:31:09.891044Z",
"url": "https://files.pythonhosted.org/packages/7a/2b/c888890ee9c6ef68dd664bcb3fca3aa7ff6ab2add1957ed01b6586b58452/streamlit_card-1.0.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "c96b1b330935e10e0734b7da180f5a83931f589edded6ca1111260a7a3fcabb5",
"md5": "7f6a095bd4e496d623f32f9435818d7e",
"sha256": "be8b784d8145a4efe3c97c191db7727c96dea97912385957279ec42a7f547674"
},
"downloads": -1,
"filename": "streamlit-card-1.0.0.tar.gz",
"has_sig": false,
"md5_digest": "7f6a095bd4e496d623f32f9435818d7e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 672316,
"upload_time": "2023-12-07T11:31:11",
"upload_time_iso_8601": "2023-12-07T11:31:11.831481Z",
"url": "https://files.pythonhosted.org/packages/c9/6b/1b330935e10e0734b7da180f5a83931f589edded6ca1111260a7a3fcabb5/streamlit-card-1.0.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-12-07 11:31:11",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "gamcoh",
"github_project": "st-card",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "streamlit-card"
}
JSON
