Card

Cards are a layout option that encloses your form components inside a bordered area.

You can create a card as so:

FormCard("user_details")

Common Methods

For a list of common layout component methods, see here.

Title

You can specify the label displayed for the card as so:

// static
FormCard("user_details").
    Label("User Details")

// callback
FormCard("user_details").
    LabelFn(
        func (ctx FieldContext) string {
            return "User Details"
        }
    )

Description

You can specify the description for the card as so:

// static
FormCard("user_details").
    Description("Your details")

// callback
FormCard("user_details")
    DescriptionFn(
        func (ctx FieldContext) string {
            if model, err := ctx.GetModel(); err == nil {
                return "Details for " + model.Name
            }
            return "Your details"
      })

Inline

The Inline option will re-orient your card to a horizontal look where the card header is inline with the content. On small screens, the card will revert to a top-down orientation automatically

// static
FormCard("card").
    Inline()

// callback
FormCard("card").
    InlineFn(
        func (ctx FieldContext) bool {
            return true
        })

Aside

The Aside option will re-orient your card to a horizontal look where the card header is inline with the content.

Aside does not include the card's header inside the card itself, instead placing it outside the card.

// static
FormCard("card").
    Aside()
    
// callback
FormCard("card").
    AsideFn(
        func (ctx FieldContext) bool {
            return true
        })

Header Position

These methods can only be applied when the card is set to aside, or inline

Header Left

To position the card's header to the left, you can do so with:

FormCard("card").
    LeftHeader()

Header Right

To position the card's header to the right, you can do so with:

FormCard("card").
    RightHeader()

Header Position

To dynamically change the card's header position, you can use the following:

FormCard("card").
    HeaderPositionFn(
        func (ctx FieldContext) string {
            // accepts either `right` or `left`
            return "right"
        })

No Header

You can remove the card's header entirely as so:

// static
FormCard("card").
    NoHeader()

// callback
FormCard("card").
    NoHeaderFn(
        func (ctx FieldContext) bool {
            return true
        })

Collapsable

You can allow your card to be collapsable as so:

// static
FormCard("card").
    Collapsable()

// callback
FormCard("card").
    CollapsableFn(
        func (ctx FieldContext) bool {
            return false
        })

Start Collapsed

When Collapsable is enabled, you can choose whether your card starts collapsed as so:

// static
FormCard("card").
    StartCollapsed()

// callback
FormCard("card").
    StartCollapsedFn(
        func (ctx FieldContext) bool {
            return false
        })

Collapse Duration

When Collapsable is enabled, you can choose how long the collapsing animation takes in milliseconds as so:

// static
FormCard("card").
    CollapseDurationMs(500) // 500 ms is the default collapse duration

// callback
FormCard("card").
    CollapseDurationMsFn(
        func (ctx FieldContext) int {
            return 1500 // 1.5 seconds
        })

This is powered by alpine's collapse plugin

Minimum Collapse Height

When Collapsable is enabled, you can use choose the minimum height of your section in pixels as so:

// static
FormCard("card").
    CollapseMinPx(30) // 0px is the def

// callback
FormCard("card").
    CollapseMinPxFn(
        func (ctx FieldContext) int {
            return 245 
        })

Zero pixels is the default (in other words, it completely hides your section as its default behaviour).

This is powered by alpine's collapse plugin