forms
This commit is contained in:
JACS
parent
cc0c524337
commit
f03b933359
551 changed files with 1230 additions and 0 deletions
|
|
@ -44,6 +44,213 @@ func SampleNavbarMenu() TablerMenu {
|
|||
}
|
||||
}
|
||||
|
||||
// SampleFormElements returns sample data for all 25 formtabler components.
|
||||
func SampleFormElements() FormtablerFormElementsPage {
|
||||
return FormtablerFormElementsPage{
|
||||
TextInputs: []FormtablerTextInput{
|
||||
{Label: "Static", Type: "static", Value: "Input value"},
|
||||
{Label: "Password", Type: "password", Placeholder: "Input placeholder"},
|
||||
{Label: "Text", Type: "text", Placeholder: "Input placeholder"},
|
||||
{Label: "Textarea", Type: "textarea", Placeholder: "Textarea placeholder"},
|
||||
},
|
||||
IconInputs: []FormtablerIconInput{
|
||||
{Label: "Icon input", Placeholder: "Search for…", Prepend: false},
|
||||
{Label: "Icon input", Placeholder: "Username", Icon: "user", Prepend: true},
|
||||
{Label: "Loader input", Placeholder: "Loading…", Loader: true},
|
||||
{Label: "Loader input", Placeholder: "Loading…", Icon: "user", Loader: true, Prepend: true},
|
||||
},
|
||||
IconSeparated: FormtablerIconSeparated{Label: "Separated inputs", Placeholder: "Search for…", ButtonIcon: "search"},
|
||||
InputSizing: FormtablerInputSizing{},
|
||||
FileInput: FormtablerFileInput{Label: "Custom File Input"},
|
||||
ColorInput: FormtablerColorInput{
|
||||
Label: "Color Input",
|
||||
Name: "color",
|
||||
Type: "radio",
|
||||
Rounded: false,
|
||||
Colors: []FormtablerSwatch{
|
||||
{Color: "dark"}, {Color: "white", Checked: true}, {Color: "blue"},
|
||||
{Color: "azure"}, {Color: "indigo"}, {Color: "purple"},
|
||||
{Color: "pink"}, {Color: "red"}, {Color: "orange"}, {Color: "yellow"},
|
||||
},
|
||||
},
|
||||
ColorPicker: FormtablerColorPicker{Label: "Color picker", Color: "#206bc4"},
|
||||
RangeInput: FormtablerRangeInput{Label: "Range input"},
|
||||
Datalist: FormtablerDatalist{
|
||||
Label: "Datalist example",
|
||||
Placeholder: "Type to search...",
|
||||
Options: []string{
|
||||
"Afghanistan", "Albania", "Algeria", "Andorra", "Angola",
|
||||
"Antarctica", "Argentina", "Armenia", "Australia", "Austria",
|
||||
},
|
||||
},
|
||||
ImageCheck: FormtablerImageCheck{
|
||||
Label: "Image Check",
|
||||
Images: []FormtablerImageItem{
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 1", Checked: true},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 2"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 3", Checked: true},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 4"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 5"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 6", Checked: true},
|
||||
},
|
||||
},
|
||||
ImageRadio: FormtablerImageRadio{
|
||||
Label: "Image Check Radio",
|
||||
Images: []FormtablerImageItem{
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 1", Checked: true},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 2"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 3", Checked: true},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 4"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 5"},
|
||||
{Src: "/public/static/photos/0246c91f-47c2-4f6e-b85d-d7a4806b30c9.jpg", Alt: "Image 6", Checked: true},
|
||||
},
|
||||
},
|
||||
ImagePerson: FormtablerImagePerson{
|
||||
Label: "Person Check",
|
||||
AvatarSize: "md",
|
||||
People: []FormtablerPersonItem{
|
||||
{Name: "Paweł Kuna", Src: "/public/static/avatars/000m.jpg", Checked: true},
|
||||
{Name: "Jeffie Lewzey", Src: "/public/static/avatars/052f.jpg"},
|
||||
{Name: "Mallory Hulme", Src: "/public/static/avatars/002m.jpg", Checked: true},
|
||||
{Name: "Dunn Slane", Src: "/public/static/avatars/003m.jpg"},
|
||||
{Name: "Emmy Levet", Src: "/public/static/avatars/000f.jpg"},
|
||||
{Name: "Maryjo Lebarree", Src: "/public/static/avatars/001f.jpg", Checked: true},
|
||||
{Name: "Egan Poetz", Src: "/public/static/avatars/004m.jpg"},
|
||||
{Name: "Kellie Skingley", Src: "/public/static/avatars/002f.jpg"},
|
||||
{Name: "Christy Maciak", Src: "/public/static/avatars/003f.jpg"},
|
||||
},
|
||||
},
|
||||
Checkboxes: FormtablerCheckboxes{
|
||||
Label: "Checkboxes",
|
||||
Checkboxes: []FormtablerCheckItem{
|
||||
{Title: "Option 1", Checked: false, Disabled: false},
|
||||
{Title: "Option 2", Checked: false, Disabled: true},
|
||||
{Title: "Option 3", Checked: true, Disabled: false},
|
||||
},
|
||||
},
|
||||
CheckboxesInline: FormtablerCheckboxesInline{
|
||||
Label: "Inline Checkboxes",
|
||||
Checkboxes: []FormtablerCheckItem{
|
||||
{Title: "Option 1", Checked: false, Disabled: false},
|
||||
{Title: "Option 2", Checked: false, Disabled: true},
|
||||
{Title: "Option 3", Checked: true, Disabled: false},
|
||||
},
|
||||
},
|
||||
Radios: FormtablerRadios{
|
||||
Label: "Radios",
|
||||
Name: "radios",
|
||||
Radios: []FormtablerCheckItem{
|
||||
{Title: "Option 1", Checked: true, Disabled: false},
|
||||
{Title: "Option 2", Checked: false, Disabled: false},
|
||||
{Title: "Option 3", Checked: false, Disabled: true},
|
||||
{Title: "Option 4", Checked: true, Disabled: true},
|
||||
},
|
||||
},
|
||||
RadiosInline: FormtablerRadiosInline{
|
||||
Label: "Inline Radios",
|
||||
Name: "radios-inline",
|
||||
Radios: []FormtablerCheckItem{
|
||||
{Title: "Option 1", Checked: true, Disabled: false},
|
||||
{Title: "Option 2", Checked: false, Disabled: false},
|
||||
{Title: "Option 3", Checked: false, Disabled: true},
|
||||
},
|
||||
},
|
||||
Toggles: FormtablerToggle{
|
||||
Label: "Toggle switches",
|
||||
Toggles: []FormtablerCheckItem{
|
||||
{Title: "Option 1", Checked: true},
|
||||
{Title: "Option 2"},
|
||||
{Title: "Option 3"},
|
||||
},
|
||||
},
|
||||
ToggleSingle: FormtablerToggleSingle{Label: "Single switch", Title: "I agree with terms and conditions"},
|
||||
Select: FormtablerSelect{
|
||||
Label: "Select",
|
||||
Options: []string{"One", "Two", "Three"},
|
||||
Multiple: false,
|
||||
},
|
||||
Selectgroups: []FormtablerSelectGroup{
|
||||
{
|
||||
Title: "Simple selectgroup",
|
||||
Values: []FormtablerSelectGroupValue{
|
||||
{Label: "HTML", Value: "html", Checked: true},
|
||||
{Label: "CSS", Value: "css"},
|
||||
{Label: "PHP", Value: "php"},
|
||||
{Label: "JavaScript", Value: "js"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Title: "Icon input",
|
||||
Values: []FormtablerSelectGroupValue{
|
||||
{Label: "Sun", Value: "sun", Icon: "sun", Checked: true},
|
||||
{Label: "Moon", Value: "moon", Icon: "moon"},
|
||||
{Label: "Cloud Rain", Value: "cloud-rain", Icon: "cloud-rain"},
|
||||
{Label: "Cloud", Value: "cloud", Icon: "cloud"},
|
||||
{Label: "Other", Value: "other"},
|
||||
},
|
||||
},
|
||||
{
|
||||
Title: "Selectgroup with icons and text",
|
||||
Name: "icons",
|
||||
Type: "radio",
|
||||
WithText: true,
|
||||
Values: []FormtablerSelectGroupValue{
|
||||
{Label: "Home", Value: "home", Icon: "home", WithText: true, Checked: true},
|
||||
{Label: "User", Value: "user", Icon: "user", WithText: true},
|
||||
{Label: "Circle", Value: "circle", Icon: "circle", WithText: true},
|
||||
{Label: "Square", Value: "square", Icon: "square", WithText: true},
|
||||
},
|
||||
},
|
||||
{
|
||||
Title: "Different style",
|
||||
Pills: true,
|
||||
Values: []FormtablerSelectGroupValue{
|
||||
{Label: "HTML", Value: "html", Checked: true},
|
||||
{Label: "CSS", Value: "css"},
|
||||
{Label: "PHP", Value: "php"},
|
||||
{Label: "JavaScript", Value: "js"},
|
||||
},
|
||||
},
|
||||
},
|
||||
SelectgroupPayments: FormtablerSelectgroupPayments{
|
||||
Label: "Payment method",
|
||||
Items: []FormtablerPaymentItem{
|
||||
{Provider: "visa", Ending: "4532", Checked: true},
|
||||
{Provider: "mastercard", Ending: "8721"},
|
||||
{Provider: "paypal"},
|
||||
},
|
||||
},
|
||||
SelectgroupProjectManager: FormtablerSelectgroupProjectManager{
|
||||
Label: "Project Manager",
|
||||
Managers: []FormtablerPersonItemWithJob{
|
||||
{Name: "Paweł Kuna", Src: "/public/static/avatars/000m.jpg", JobTitle: "UI Designer", Checked: true},
|
||||
{Name: "Jeffie Lewzey", Src: "/public/static/avatars/052f.jpg", JobTitle: "Chemical Engineer"},
|
||||
{Name: "Mallory Hulme", Src: "/public/static/avatars/002m.jpg", JobTitle: "Geologist IV"},
|
||||
{Name: "Dunn Slane", Src: "/public/static/avatars/003m.jpg", JobTitle: "Research Nurse"},
|
||||
{Name: "Emmy Levet", Src: "/public/static/avatars/000f.jpg", JobTitle: "VP Product Management"},
|
||||
},
|
||||
},
|
||||
Fieldset: FormtablerFieldset{
|
||||
Label: "Fieldset",
|
||||
Inputs: []FormtablerFieldsetInput{
|
||||
{Label: "Full name", Type: "text", Required: true},
|
||||
{Label: "Company", Type: "text", Required: true},
|
||||
{Label: "Email", Type: "email", Required: true},
|
||||
{Label: "Phone number", Type: "tel"},
|
||||
},
|
||||
},
|
||||
CheckboxesList: FormtablerCheckboxesList{
|
||||
Label: "Checkboxes list",
|
||||
Items: []FormtablerCheckListItem{
|
||||
{Title: "Push Notifications", Checked: true},
|
||||
{Title: "SMS Notifications"},
|
||||
{Title: "Email Notifications", Checked: true},
|
||||
},
|
||||
},
|
||||
ValidationStates: FormtablerValidationStates{Label: "Validation States"},
|
||||
}
|
||||
}
|
||||
|
||||
// SampleTables returns two sample table components for the tables demo page.
|
||||
// Table 1: Users table (avatar, name, city, status, date, tags, category).
|
||||
// Table 2: Projects table (name, description, progress, priority, assignee, deadline).
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue