1 module fluid.showcase.slots; 2 3 import fluid; 4 import fluid.showcase; 5 6 7 @safe: 8 9 10 @( 11 () => label("If you need to swap a node for another during runtime, there is a very helpful node just to do the " 12 ~ "job. Node slots are functionally placeholders for any other node. You can change what node it holds at any " 13 ~ "time, and you can leave it empty."), 14 ) 15 Frame slotExample() { 16 17 auto mySlot = nodeSlot!Label(); 18 19 return vframe( 20 mySlot = label("Click the button below!"), 21 button("Replace the slot", delegate { 22 mySlot = label("Content replaced!"); 23 }) 24 ); 25 26 } 27 28 @( 29 () => label("Node slots are templates — You can define what type of nodes they're allowed to hold. In the example " 30 ~ "above, the node slot is initalized with 'nodeSlot!Label()' which means it will only take in labels. Thanks " 31 ~ "to this, we can easily peek inside or change its contents:"), 32 ) 33 Frame secondExample() { 34 35 auto mySlot = nodeSlot!Label(); 36 37 return vframe( 38 mySlot = label("Hello, World!"), 39 button("Replace the slot", delegate { 40 mySlot.value.text = "Content replaced!"; 41 }) 42 ); 43 44 } 45 46 @( 47 () => label("Node slots can be emptied using the 'clear()' method:"), 48 ) 49 Frame clearExample() { 50 51 auto mySlot = nodeSlot!Label(); 52 auto myLabel = label("This label is in a node slot"); 53 54 return vframe( 55 mySlot = myLabel, 56 button("Remove the label", delegate { 57 mySlot.clear(); 58 }), 59 button("Put the label back", delegate { 60 mySlot = myLabel; 61 }), 62 ); 63 64 } 65 66 @( 67 () => label("Note that node slots are also affected by frame layout rules. Because the slot is separate from the " 68 ~ "node it holds, you need to set 'expand' on the slot, and if you do, make it 'fill' aligned. You don't need " 69 ~ "to do the latter if you set alignment on the slot itself."), 70 () => highlightBoxTheme, 71 ) 72 Frame slotLayoutExample() { 73 74 return vframe( 75 .layout!"fill", 76 nodeSlot!Label( 77 .layout!(1, "fill"), 78 label(.layout!"center", "Centered (through label)") 79 ), 80 nodeSlot!Label( 81 .layout!(1, "fill"), 82 label(.layout!"fill", "Filled") 83 ), 84 nodeSlot!Label( 85 .layout!(1, "center"), 86 label("Centered (through slot)") 87 ), 88 ); 89 90 }