Layout

class viewflow.forms.Layout(*elements, **kwargs)

Customizable form layout that supports the dynamic arrangement of form fields.

This class provides an interface for arranging form elements in a structured manner.

Attributes:

children (list): A list of child elements to be added to the layout.

Example:

layout = Layout(
    "username",
    Row("password", "confirm_password"),
)

class viewflow.forms.Row(*elements, **kwargs)

Represents a row in the layout, where elements are aligned in a single line horizontally.

This class is used to horizontally arrange form elements or layout components. Each element in a row is rendered side by side, taking into account the various device-specific grid settings such as desktop, tablet, and mobile.

Attributes:

id_ (str, optional): Optional identifier for the row. children (list): A list of child elements (converted from input elements) to be added to the row.

Example:

layout = Layout(
    Row(
        'first_name',
        Row('last_name', 'sex', tablet=5)
    )
)

class viewflow.forms.Column(*elements, **kwargs)

Represents a column in the layout, where elements are vertically stacked.

This class provides an interface for vertically arranging form elements in a column-like manner. It’s particularly useful for grouping form fields or other layout components in vertical stacks within a broader grid layout.

Attributes:

id_ (str, optional): Optional identifier for the column. children (list): A list of child elements (converted from input elements) to be added to the column.

Example:

layout = Layout(
     Row(
         Column('first_name', 'last_name', desktop=8, tablet=6),
         'sex_options'
     )
 )

class viewflow.forms.Span(field_name, **kwargs)

Represents a form field spanned over multiple columns within a layout.

The Span class allows form fields to span across multiple columns in a layout. By default, the span size is determined automatically based on the row’s configuration. However, specific sizes for different device breakpoints (like desktop, tablet, and mobile) can also be provided.

Attributes:

field_name (str): Name of the form field that this span represents.

Example:

layout = Layout(
    Row(Span('first_name'), Span('last_name')),
    Row(
        Span('email', tablet=6, mobile=3),
        'sex'
    )
)

Behavior:

On desktop:

• All auto-sized elements will be spread equally over the free space of a row, excluding space occupied by elements with specific sizes.

On tablet and mobile:

• If all elements in a row have auto-sizes, each element will be placed in a new line.
• If even one element in a row has a specific size, all auto-sized elements will be kept in a single line, similar to desktop behavior.

class viewflow.forms.FieldSet(title, *elements, **kwargs)

class viewflow.forms.FormSet(formset_field_name: str, card_desktop: int = 12, card_tablet: int = 8, card_mobile: int = 4, **kwargs)

Render stacked inline formsets.

This class represents a formset field that is rendered as a stacked inline layout, suitable for different device sizes (desktop, tablet, mobile). It extends the Span class and adds specific attributes for card sizes.

Example:

class AddressForm(Form):
    line_1 = forms.CharField(max_length=250)
    line_2 = forms.CharField(max_length=250)
    state = forms.CharField(max_length=100)
    city = forms.CharField(max_length=100)
    zipcode = forms.CharField(max_length=10)

    layout = Layout(
        Caption("Address"),
        "line_1",
        "line_2",
        "state",
        Row("city", "zipcode"),
    )


AddressFormSet = forms.formset_factory(AddressForm, extra=3, can_delete=True)

class SignupForm(Form):
    username = forms.CharField(
        max_length=50,
        widget=forms.TextInput(attrs={"leading-icon": "account_box"}),
    )
    first_name = forms.CharField(max_length=250)
    last_name = forms.CharField(max_length=250)
    date_of_birth = forms.DateField()
    emails = FormSetField(formset_class=EmailFormSet)
    addresses = FormSetField(formset_class=AddressFormSet)

    layout = Layout(
        "username",
        Row("first_name", "last_name", "date_of_birth"),
        "emails",
        FormSet("addresses", card_desktop=4),
    )

class viewflow.forms.FormLayout

Default form layout for rendering Django forms into HTML

class viewflow.forms.Caption(text, **kwargs)

class viewflow.forms.Tag(tag_name, text=None, **attrs)

Represents an HTML tag for custom layout definitions.

Attributes:

tag_name (str): The name of the HTML tag. attrs (dict): Attributes to be set on the tag.

Example:

layout = Layout(
    "customer_name",
    Row("quantity", "unit_price", "total"),
    Tag("h4", class_="my_tag", text="Title"),
)