Card

Example Usage

import zero_true as zt

# First, define the image component to be placed inside the card
sample_image = zt.Image(id="Sample", height=200, src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg")

# Now, define the card using the specified parameters
sample_card = zt.Card(
  id="sample_card",
  childComponents=[sample_image.id],  # List containing the ID of the image component
  color="lightblue",  # You can specify any CSS color here
  component='v-card',  # Vue component name for the card
  elevation=2,  # Elevation level of the card (must be between 0 and 24)
  width=500  # Specify the width of the card
)

# Assuming you have a mechanism to render or use this card within a layout
layout = zt.Layout(components=[sample_card])

Example Output

Overview

pydantic model zero_true.Card

The Card component serves as a versatile container in user interfaces, designed to group related UI elements together.

It offers customization options through various properties such as background color, elevation, and density, enabling designers to tailor its appearance and behavior to fit different contexts and layouts.

Each card can house multiple child components, each occupying its own row, which makes it an ideal choice for creating structured, yet visually appealing content displays.

JSON Schema

Field Defenitions

{
   "title": "Card",
   "description": "A card is a container for components that should be displayed together. \nAny child components will be placed in their own row within the card and take up the full width",
   "type": "object",
   "properties": {
      "id": {
         "description": "Unique id for a component",
         "title": "Id",
         "type": "string"
      },
      "variable_name": {
         "default": "",
         "description": "Optional variable name associated with a component",
         "title": "Variable Name",
         "type": "string"
      },
      "component": {
         "default": "v-card",
         "description": "Vue component name",
         "title": "Component",
         "type": "string"
      },
      "childComponents": {
         "default": [],
         "description": "List of child component ids to be placed within the card",
         "items": {
            "type": "string"
         },
         "title": "Childcomponents",
         "type": "array"
      },
      "color": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Background color of the card",
         "title": "Color"
      },
      "elevation": {
         "anyOf": [
            {
               "maximum": 24,
               "minimum": 0,
               "type": "integer"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Elevation level of the card. Must be between 0 and 24",
         "title": "Elevation"
      },
      "density": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Density of the component",
         "enum": [
            "default",
            "comfortable",
            "compact"
         ],
         "title": "Density"
      },
      "width": {
         "anyOf": [
            {
               "type": "integer"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "description": "Width of the card",
         "title": "Width"
      },
      "location": {
         "anyOf": [
            {
               "type": "string"
            },
            {
               "type": "null"
            }
         ],
         "default": null,
         "enum": [
            "center"
         ],
         "title": "Location"
      }
   },
   "required": [
      "id"
   ]
}

Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.

zero_true.Card

Zero True Component

Show properties

field childComponents

field childComponents: List[str] = []; List of child component ids to be placed within the card

field color

field color: str | None = None; Background color of the card

field component

field component: str = ‘v-card’; Vue component name

field density

field density: str | None = None; Density of the component

field elevation

field elevation: int | None = None; Elevation level of the card. Must be between 0 and 24

field location

field location: str | None = None;

field width

field width: int | None = None; Width of the card

Methods

classmethod get_value_from_global_state(value, values)