The Green Shoes Manual 1.1.362

Position of a Slot

Like any other element, slots can be styled and customized when they are created.

To set the width of a stack to 150 pixels:

 Shoes.app do
   stack width: 150 do
     background yellow
     para "Now that's precision." 
   end
 end

Each style setting also has a method, which can be used to grab that particular setting. (So, like, the width method returns the width of the slot in pixels.)

A shortcut method for setting the :displace_left and :displace_top styles. Displacing is a handy way of moving a slot without altering the layout. In fact, the top and left methods will not report displacement at all. So, generally, displacement is only for temporary animations. For example, jiggling a button in place.

The left and top numbers sent to displace are added to the slot's own top-left coordinates. To subtract from the top-left coordinate, use negative numbers.

Note: Green Shoes doesn't support displace method.

gutter() » a number

The size of the scrollbar area. When Green Shoes needs to show a scrollbar, the scrollbar may end up covering up some elements that touch the edge of the window. The gutter tells you how many pixels to expect the scrollbar to cover.

This is commonly used to pad elements on the right, like so:

 Shoes.app do
   stack margin_right: 20 + gutter do
     para "Insert fat and ratified ",
       "declaration of independence here..."
   end
 end
height() » a number

The vertical size of the viewable slot in pixels. So, if this is a scrolling slot, you'll need to use scroll_height() to get the full size of the slot.

hide() » self

Hides the slot, so that it can't be seen. See also show and toggle.

left() » a number

The left pixel location of the slot. Also known as the x-axis coordinate.

Moves the slot to specific coordinates, the (left, top) being the upper left hand corner of the slot.

Note: Green Shoes doesn't support move method.

remove() » self

Removes the slot. It will no longer be displayed and will not be listed in its parent's contents. It's gone.

Note: Green Shoes doesn't support remove method. Use clear method.

scroll() » true or false

Is this slot allowed to show a scrollbar? True or false. The scrollbar will only appear if the height of the slot is also fixed.

Note: Green Shoes doesn't support scroll method.

scroll_height() » a number

The vertical size of the full slot, including any of it which is hidden by scrolling.

Note: Green Shoes doesn't support scroll_height method.

scroll_max() » a number

The top coordinate which this slot can be scrolled down to. The top coordinate of a scroll bar is always zero. The bottom coordinate is the full height of the slot minus one page of scrolling. This bottom coordinate is what scroll_max returns.

This is basically a shortcut for writing slot.scroll_height - slot.height.

To scroll to the bottom of a slot, use slot.scroll_top = slot.scroll_max.

Note: Green Shoes doesn't support scroll_max method.

scroll_top() » a number

The top coordinate which this slot is scrolled down to. So, if the slot is scrolled down twenty pixels, this method will return 20.

Note: Green Shoes doesn't support scroll_top method.

Scrolls the slot to a certain coordinate. This must be between zero and scroll_max.

Note: Green Shoes doesn't support scroll_top= method.

show() » self

Reveals the slot, if it is hidden. See also hide and toggle.

style() » styles

Calling the style method with no arguments returns a hash of the styles presently applied to this slot.

While methods such as height and width return the true pixel dimensions of the slot, you can use style[:height] or style[:width] to get the dimensions originally requested.

 Shoes.app do
   s = stack width: 1.0
   para s.style[:width]
   button('Then..'){s.append{para s.style[:width]}}
 end

In this example, the paragraph under the stack will display "1.0". After click the button, will show you "600" pixels.

style(styles) » styles

Alter the slot using a hash of style settings. Any of the methods on this page (aside from this method, of course) can be used as a style setting. So, for example, there is a width method, thus there is also a width style.

 Shoes.app do
   s = stack { background green }
   s.style width: 400, height: 200
 end
toggle() » self

Hides the slot, if it is shown. Or shows the slot, if it is hidden.

top() » a number

The top pixel location of the slot. Also known as the y-axis coordinate.

width() » a number

The horizontal size of the slot in pixels.

Next: Traversing the Page