Cards

Presents options as cards for the user. Cards may be selectable.

Examples

Basic Example

The following example demonstrate some of the available functionality for read_cards

from abstra.forms import read_cards

card = read_cards(
    "Choose your favorite dessert",
    [
        {
            "title": "Crepe",
            "subtitle": "French",
            "image": "https://cdn.pixabay.com/photo/2017/01/30/13/56/pancakes-2020870_1280.jpg",
            "description": "A crêpe or crepe is a type of very thin pancake.",
        },
        {
            "title": "Pancake",
            "subtitle": "American",
            "image": "https://cdn.pixabay.com/photo/2018/07/10/21/23/pancake-3529653_1280.jpg",
            "description": "A pancake is a flat cake, often thin and round.",
        },
        {
            "title": "Waffle",
            "subtitle": "Belgian",
            "image": "https://cdn.pixabay.com/photo/2020/05/19/20/54/waffles-5192625_1280.jpg",
            "description": "A waffle is a patterned dish made from leavened batter or dough.",
        },
    ],
)
# card = { 'title': ..., 'subtitle': ..., 'image': ..., 'description': ..., 'topLeftExtra': ..., 'topRightExtra': ... }

Multiple Selections and Search

A multiple selection question with search enabled.

from abstra.forms import read_cards

card = read_cards(
    "Which desserts do you like?",
    [
        {
            "title": "Crepe",
            "subtitle": "French",
            "image": "https://cdn.pixabay.com/photo/2017/01/30/13/56/pancakes-2020870_1280.jpg",
            "description": "A crêpe or crepe is a type of very thin pancake.",
        },
        {
            "title": "Pancake",
            "subtitle": "American",
            "image": "https://cdn.pixabay.com/photo/2018/07/10/21/23/pancake-3529653_1280.jpg",
            "description": "A pancake is a flat cake, often thin and round.",
        },
        {
            "title": "Waffle",
            "subtitle": "Belgian",
            "image": "https://cdn.pixabay.com/photo/2020/05/19/20/54/waffles-5192625_1280.jpg",
            "description": "A waffle is a patterned dish made from leavened batter or dough.",
        },
    ],
    multiple=True,
    searchable=True,
)

Parameters

Name	Description	Type
label	The text related to this input	str
options	List of dicts representing the cards, each dict can have the following keys: title, subtitle, image, description, topLeftExtra, topRightExtra	list
multiple	Whether the user can select multiple options. Defaults to False.	bool
initial_value	The initial value to display to the user. Defaults to None.	list
searchable	Whether to show a search bar. Defaults to False.	bool
layout	Whether the cards layout should be 'list' or 'grid'. Defaults to 'list'. The 'grid' only applies to desktop resolutions.	str
columns	When layout is 'grid', how many columns to display	int
disabled	whether the input is disabled. Defaults to False.	bool
required	Whether the input is required or not eg. "this field is required". Defaults to True.	Union[bool, str]
hint	A tooltip displayed to the user. Defaults to None.	str
full_width	Whether the input should use full screen width. Defaults to False.	bool
button_text	What text to display on the button when the widget is not part of a Page. Defaults to 'Next'.	str

Return Values

Type	Description
Union[list, any]	The options/option selected by the user