Tabs
Tabs allow you to specify multiple pages which users can switch between to view different content.
INFO
Tabs will submit all content on all pages when posting your form to the backend.
Iridium currently preloads all content on each tab, and uses Alpine.js to switch tabs client side. HTMX/Server-side powered tabs will come after V1
Common Methods
For a list of common layout component methods, see here.
Title
You can specify a title for your tabs component like so:
// static
FormTabs("my-tabs").
Title("User options")
// callback
FormTabs("my-tabs").
TitleFn(
func (ctx FieldContext) string {
if model, err := ctx.GetModel; err == nil {
return "User options for " + model.Name
}
return "User options"
}
)Tabs
You're able to create any number of different tabs for your Tab using the FormTab component inside your FormTabs schema method:
The name of your tab component, like tab-1 or preferences-tab as shown below can be any unique string for that FormTab.
// static
FormTabs("my-tabs").
Schema(
FormTab("tab-1").
Title("Location").
Schema(
FormInput("city"),
),
FormTab("preferences-tab").
Title("Preferences").
Schema(
FormSwitch("dark-mode"),
FormSelect("language")
)
)If you need dynamic control over the pages, you can use the FormTabs's SchemaFn method
// callback option
FormTabs("my-tabs").
SchemaFn(
func (ctx FieldContext) []FormTab {
if model, err := ctx.GetModel(); err == nil {
// if a user model exists (say on edit or view page)
// We'll show a tab with prefernces for their account
return []FormTab{
FormTab("visual_options").Schema(/* general fields */),
FormTab("user-preferences").Schema(/* model dependent fields */),
}
}
// if no user exists (say on create page)
return []FormTab{
FormTab("visual_options").Schema(/* general fields */),
}
}
)Label
You can label your tab component as so:
// static
FormTabs("my-tabs").
Label("My Tabs")
// callback
FormTabs("my-tabs").
LabelFn(
func (ctx FieldContext) string {
return "My Tabs"
})Aside
You can position your tabs to the left of your tab's content as so:
// static
FormTabs("my-tabs").
Aside()
// callback
FormTabs("my-tabs").
AsideFn(
func (ctx FieldContext) bool {
return false
}
)Tab - Title
You're able to specify the title of the your tab using the Title method:
FormTabs("my-tabs").
Schema(
// static
FormTab("tab-1").
Title("First Tab")
// callback
FormTab("tab-2").
TitleFn(
func (ctx FieldContext) string {
return "Second Tab"
}
)
)Tab - Schema
You can specify the form components inside each your tabs by using the Schema method as so:
FormTabs("my-tab").
Schema(
FormTab("tab-1").
Schema(
// Place any form component for your first tab here
// and yes that could be another set of tabs!
),
FormTab("tab-2").
Schema(
// Your second tab
)
)Tab - Prefix Icon
You can specify the prefix icon for your tab using the PrefixIcon method as so:
import "github.com/iridiumgo/iridium-icons/icons"
// static
FormTab("tab-1").
PrefixIcon(icons.Atom)
// callback
FormTab("tab-1").
PrefixIconFn(
func (ctx FieldContext) *icons.Icon {
return icons.Atom
}
)Tab - Postfix Icon
You can specify the postfix icon for your tab using the PostfixIcon method as so:
import "github.com/iridiumgo/iridium-icons/icons"
// static
FormTab("tab-1").
PostfixIcon(icons.Atom)
// callback
FormTab("tab-1").
PostfixIconFn(
func (ctx FieldContext) *icons.Icon {
return icons.Atom
}
)Tab - Prefix Text
You can specify the prefix text badge for your tab using the PrefixText method as so:
// static
FormTab("tab-1").
PrefixText("24")
// callback
FormTab("tab-1").
PrefixTextFn(
func (ctx FieldContext) string {
return "35"
}
)Tab - Postfix Text
You can specify the postfix text badge for your tab using the PostfixText method as so:
// static
FormTab("tab-1").
PostfixText("25")
// callback
FormTab("tab-1").
PostfixTextFn(
func (ctx FieldContext) string {
return "35"
}
)Tab - Disabled
You can deceide if a tab needs to be disabled using the Disabled method as so:
// static
FormTab("tab-1").
Disabled()
// callback
FormTab("tab-1").
DisabledFn(
func (ctx FieldContext) bool {
return true
}
)INFO
Disabled does not apply hidden to your tab's content, it will remove it completely from your HTML. Please be mindful of this when submitting forms.
Tab Order
The Tab default is defined the in the order your create them:
FormTabs("my-tabs").
Schema(
FormTab("tab-1"),
FormTab("tab-2"),
FormTab("tab-2")
)Default Tab
You can specify the default tab to select using the DefaultTab method.
If it can't find your tab by it's name, the first is chosen
// static
FormTabs("my-tabs").
Schema(
FormTab("tab-1"),
FormTab("tab-2"),
).
DefaultTab("tab-2")
// callback
FormTabs("my-tabs").
Schema(
FormTab("tab-1"),
FormTab("tab-2"),
).
DefaultTabFn(
func (ctx FieldContext) string {
return "tab-1"
}
)Grid Columns
Your Form Tabs operate just like normal layouts. Meaning they have access to the same methods like those to manage how many grids inside each of your tab windows. See more here
Reactivity Notes
Reactivity Nesting
To reach into or out of your tab components, you first enter the FormTabs component, then your specified FormTab
import "github.com/iridiumgo/iridium/core/logger"
FormInput("name").
Live().
AfterStateUpdated(
func (state []string, ctx FieldContext) ([]string, error) {
// if the user updates the name field, grab and log the value in
// the field-1 component.
val, _ := ctx.Get("my-tabs.tab-1.field-1")
logger.Debug(val)
return state, nil
}
)
FormTabs("my-tabs").
Schema(
FormTab("tab-1").
Schema(
FormInput("field-1")
),
FormTab("tab-2").
Schema(
FormInput("field-2").
Live().
AfterStateUpdated(
func (state []string, ctx FieldContext) ([]string, error) {
// if the user updates this field on tab 2, grab and log
// the field-1 component
val, _ := ctx.Get("../tab-1/field-1")
logger.Debug(val)
return state, nil
}
)
)
)