Card
Additional card components that compliment ui.card.
experimental.ui.card_image
experimental.ui.card_image(file, *args, href=None, border_radius='top', mime_type=None, class_=None, height=None, fill=True, width=None, container=card_body, **kwargs)
A card image container
card_image creates a general container for an image within a card. This component is designed to be provided as a direct child to card.
Parameters
file: str | Path | PurePath | io.BytesIO | None
-
A file path pointing to an image. The image will be base64 encoded and provided to the
src
attribute of the<img>
tag. Alternatively, you may set this value toNone
and provide thesrc
yourself via*args:TagAttrs
or**kwargs:TagAttrValue
(e.g.,{"src": "HOSTED_PATH_TO_IMAGE"}
orsrc="HOSTED_PATH_TO_IMAGE"
). *args: TagAttrs = ()
-
A dictionary of tag attributes that are supplied to the resolved Tag object.
href: Optional[str] = None
-
An optional URL to link to.
border_radius: Literal[‘top’, ‘bottom’, ‘all’, ‘none’] = ‘top’
-
Where to apply
border-radius
on the image. mime_type: Optional[str] = None
-
The mime type of the
file
. class_: Optional[str] = None
-
Additional CSS classes for the resolved Tag object.
height: Optional[CssUnit] = None
-
Any valid CSS unit (e.g.,
height="200px"
).height
will not apply when a card is madefull_screen
. In this case, consider setting aheight
incard_body
. fill: bool = True
-
Whether to allow this element to grow/shrink to fit its
card
container. width: Optional[CssUnit] = None
-
Any valid CSS unit (e.g.,
width="100%"
). container:
ImgContainer
= card_body-
Method to wrap the returned Tag object. Defaults to
card_body
. Ifcard_body
is used, each image will be in separate cards. If thecontainer
method does not return a CardItem, it allows for consecutive non-CardItem
objects to be bundled into a singlecard_body
within card. **kwargs: TagAttrValue = {}
-
Additional HTML attributes for the resolved Tag.