fluid.tour.forms source code

1 module fluid.tour.forms;
2 
3 import fluid;
4 import fluid.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 Space textExample() {
17 
18     Label nameLabel;
19     TextInput input;
20 
21     return vspace(
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 Space fieldExample() {
37 
38     return vspace(
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 Space checkboxExample() {
62 
63     return fieldSlot!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 Frame numberInputExample() {
81 
82     return vframe(
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 }