1 modulefluid.tour.forms;
2 3 importfluid;
4 importfluid.tour;
5 6 7 @safe:
8 9 10 @(
11 () => label("Fluid comes with a number of useful nodes for taking input from the user. Aside from basics like "12 ~ "buttons, there are text boxes, checkboxes, sliders and others."),
13 () => label("You can ask the user for some text using a textInput. Provide a callback if you want to do "14 ~ "something when the user finishes — by pressing the enter key."),
15 )
16 SpacetextExample() {
17 18 LabelnameLabel;
19 TextInputinput;
20 21 returnvspace(
22 nameLabel = label("What's your name?"),
23 input = textInput("Your name...", delegate {
24 nameLabel.text = "Hi, " ~ input.value ~ "!";
25 }),
26 );
27 28 }
29 30 @(
31 () => label("It's a good idea to label all inputs to make their purpose clear to the user. Besides placing "32 ~ "a label next to it, wrap them in a 'FieldSlot' so Fluid can associate them together."),
33 () => label(`Note that while text inputs have a placeholder option like "Your name..." above, it's not `34 ~ `visible unless the input is empty. Adding both is good practice.`),
35 )
36 SpacefieldExample() {
37 38 returnvspace(
39 fieldSlot!vframe(
40 label("Name:"),
41 textInput("Your name..."),
42 ),
43 fieldSlot!vframe(
44 label("Password:"),
45 passwordInput("Your password..."),
46 ),
47 fieldSlot!vframe(
48 label("Describe yourself:"),
49 textInput(.multiline, "Your bio..."),
50 ),
51 );
52 53 }
54 55 @(
56 () => label("'FieldSlot' might not have a noticeable effect at first, but don't disregard it as useless. "57 ~ "FieldSlot will expand the clickable area of the input to cover the label, making it easier for the "58 ~ "user to locate and understand your fields. This is especially important for smaller nodes, like "59 ~ "checkboxes. Try clicking the label text below:"),
60 )
61 SpacecheckboxExample() {
62 63 returnfieldSlot!hframe(
64 checkbox(),
65 label("I agree to terms and conditions"),
66 );
67 68 }
69 70 @(
71 () => label(.layout!"fill", .tags!(FluidTag.warning), "Note: Make sure your fieldSlots only contain a single "72 ~ "input node. Placing two checkboxes or text inputs inside one might cause unexpected behavior."),
73 () => label("Moreover, 'FieldSlot' might be used by external tools to analyze the content, and for example, "74 ~ "provide information for screen readers. Fluid doesn't come with such tools at the time of writing, "75 ~ "but such improvements that might be introduced in the future."),
76 77 () => label(.tags!(Tags.heading), "Number input"),
78 () => label("If you need the user to provide a number, consider using 'IntInput' or 'FloatInput'"),
79 )
80 FramenumberInputExample() {
81 82 returnvframe(
83 fieldSlot!vframe(
84 label("Provide an integer:"),
85 intInput(),
86 ),
87 fieldSlot!vframe(
88 label("Provide a real number:"),
89 floatInput(),
90 ),
91 );
92 93 }