The Shoes Manual

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: do
   stack(width: 150) { para "Now that's precision." }

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.

gutter() » a number

The size of the scrollbar area. When 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: do
   stack margin_right: 20 + gutter do
     para "Insert fat and ratified declaration of independence here..."
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.

remove() » self

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

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.

scroll_height() » a number

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

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.

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.

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

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. do
   @s = stack width: "100%"

In this example, the paragraph under the stack will display the string "100%".

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. do
   @s = stack { background green } 400, height: 200)
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