sticky.yaml (5611B)
1 root: 2 items: 3 # This is a scroll frame with an out-of-viewport rect that should be pushed into the 4 # viewport by its "bottom" sticky constraint. 5 - type: scroll-frame 6 id: 2 7 bounds: [10, 10, 50, 50] 8 content-size: [200, 200] 9 clip-to-frame: true 10 items: 11 - type: sticky-frame 12 bounds: [10, 60, 50, 50] 13 margin-bottom: 0 14 vertical-offset-bounds: [-500, 0] 15 items: 16 - type: rect 17 bounds: [10, 60, 50, 50] 18 color: green 19 clip-chain: [2] 20 # Do the same thing, but now for the "top" constraint. 21 - type: scroll-frame 22 id: 3 23 bounds: [70, 10, 50, 50] 24 content-size: [200, 200] 25 scroll-offset: [0, 50] 26 clip-to-frame: true 27 items: 28 - type: sticky-frame 29 bounds: [70, 10, 50, 50] 30 margin-top: 0 31 vertical-offset-bounds: [0, 500] 32 items: 33 - type: rect 34 bounds: [70, 10, 50, 50] 35 color: green 36 clip-chain: [3] 37 # Do the same thing, but now for the "right" constraint. 38 - type: scroll-frame 39 id: 4 40 bounds: [10, 70, 50, 50] 41 content-size: [200, 200] 42 clip-to-frame: true 43 items: 44 - type: sticky-frame 45 bounds: [60, 70, 50, 50] 46 margin-right: 0 47 horizontal-offset-bounds: [-500, 0] 48 items: 49 - type: rect 50 bounds: [60, 70, 50, 50] 51 color: green 52 clip-chain: [4] 53 # Do the same thing, but now for the "left" constraint. 54 - type: scroll-frame 55 id: 5 56 bounds: [70, 70, 50, 50] 57 content-size: [200, 200] 58 scroll-offset: [50, 0] 59 clip-to-frame: true 60 items: 61 - type: sticky-frame 62 bounds: [70, 70, 50, 50] 63 margin-left: 0 64 horizontal-offset-bounds: [0, 500] 65 items: 66 - type: rect 67 bounds: [70, 70, 50, 50] 68 color: green 69 clip-chain: [5] 70 71 # The same tests, but this time with a margin. 72 - type: scroll-frame 73 id: 6 74 bounds: [130, 10, 50, 50] 75 content-size: [200, 200] 76 clip-to-frame: true 77 items: 78 - type: sticky-frame 79 bounds: [130, 60, 50, 50] 80 margin-bottom: 10 81 vertical-offset-bounds: [-500, 0] 82 items: 83 - type: rect 84 bounds: [130, 60, 50, 50] 85 color: green 86 clip-chain: [6] 87 # Do the same thing, but now for the "top" constraint. 88 - type: scroll-frame 89 id: 7 90 bounds: [190, 10, 50, 50] 91 content-size: [200, 200] 92 scroll-offset: [0, 50] 93 clip-to-frame: true 94 items: 95 - type: sticky-frame 96 bounds: [190, 10, 50, 50] 97 margin-top: 10 98 vertical-offset-bounds: [0, 500] 99 items: 100 - type: rect 101 bounds: [190, 10, 50, 50] 102 color: green 103 clip-chain: [7] 104 # Do the same thing, but now for the "right" constraint. 105 - type: scroll-frame 106 id: 8 107 bounds: [130, 70, 50, 50] 108 content-size: [200, 200] 109 clip-to-frame: true 110 items: 111 - type: sticky-frame 112 bounds: [180, 70, 50, 50] 113 margin-right: 10 114 horizontal-offset-bounds: [-500, 0] 115 items: 116 - type: rect 117 bounds: [180, 70, 50, 50] 118 color: green 119 clip-chain: [8] 120 # Do the same thing, but now for the "left" constraint. 121 - type: scroll-frame 122 id: 9 123 bounds: [190, 70, 50, 50] 124 content-size: [200, 200] 125 scroll-offset: [50, 0] 126 clip-to-frame: true 127 items: 128 - type: sticky-frame 129 bounds: [190, 70, 50, 50] 130 margin-left: 10 131 horizontal-offset-bounds: [0, 500] 132 items: 133 - type: rect 134 bounds: [190, 70, 50, 50] 135 color: green 136 clip-chain: [9] 137 138 # The same tests, but this time with a limit. 139 - type: scroll-frame 140 id: 10 141 bounds: [250, 10, 50, 50] 142 content-size: [200, 200] 143 clip-to-frame: true 144 items: 145 - type: sticky-frame 146 bounds: [250, 60, 50, 50] 147 margin-bottom: 0 148 vertical-offset-bounds: [-25, 0] 149 items: 150 - type: rect 151 bounds: [250, 60, 50, 50] 152 color: green 153 clip-chain: [10] 154 # Do the same thing, but now for the "top" constraint. 155 - type: scroll-frame 156 id: 11 157 bounds: [310, 10, 50, 50] 158 content-size: [200, 200] 159 scroll-offset: [0, 50] 160 clip-to-frame: true 161 items: 162 - type: sticky-frame 163 bounds: [310, 10, 50, 50] 164 margin-top: 0 165 vertical-offset-bounds: [0, 25] 166 items: 167 - type: rect 168 bounds: [310, 10, 50, 50] 169 color: green 170 clip-chain: [11] 171 # Do the same thing, but now for the "right" constraint. 172 - type: scroll-frame 173 id: 12 174 bounds: [250, 70, 50, 50] 175 content-size: [200, 200] 176 clip-to-frame: true 177 items: 178 - type: sticky-frame 179 bounds: [300, 70, 50, 50] 180 margin-right: 0 181 horizontal-offset-bounds: [-25, 0] 182 items: 183 - type: rect 184 bounds: [300, 70, 50, 50] 185 color: green 186 clip-chain: [12] 187 # Do the same thing, but now for the "left" constraint. 188 - type: scroll-frame 189 id: 13 190 bounds: [310, 70, 50, 50] 191 content-size: [200, 200] 192 clip-to-frame: true 193 scroll-offset: [50, 0] 194 items: 195 - type: sticky-frame 196 bounds: [310, 70, 50, 50] 197 margin-left: 0 198 horizontal-offset-bounds: [0, 25] 199 items: 200 - type: rect 201 bounds: [310, 70, 50, 50] 202 color: green 203 clip-chain: [13]