Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gamcoh/st-card
Streamlit component for UI cards
https://github.com/gamcoh/st-card
card component react streamlit ui
Last synced: 6 days ago
JSON representation
Streamlit component for UI cards
- Host: GitHub
- URL: https://github.com/gamcoh/st-card
- Owner: gamcoh
- License: mit
- Created: 2022-05-20T08:16:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T13:30:11.000Z (7 months ago)
- Last Synced: 2024-12-22T05:09:38.382Z (13 days ago)
- Topics: card, component, react, streamlit, ui
- Language: TypeScript
- Homepage: https://pypi.org/project/streamlit-card/
- Size: 544 KB
- Stars: 120
- Watchers: 2
- Forks: 21
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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",
)
```