0
@@ -739,6 +739,249 @@ Changes the location, in order to view a different Shoes URL.
0
Absolute URLs (such as http://google.com) are okay, but Shoes will be expecting a Shoes application to be at that address. (So, google.com won't work, as it's an HTML app.)
0
+== The Styles Master List ==
0
+You want to mess with the look of things? Well, throughout Shoes, styles are used to change the way elements appear. In some cases, you can even style an entire class of elements. (Like giving all paragraphs a certain font.)
0
+Styles are easy to spot. They usually show up when the element is created.
0
+ Shoes.app :title => "A Styling Sample" do
0
+ para "Red with an underline", :stroke => red, :underline => "single"
0
+Here we've got a `:title` style on the app. And on the paragraph inside the app, a red `:stroke` style and an `:underline` style.
0
+The style hash can also be changed by using the [[Common.style]] method, available on every element and slot.
0
+ Shoes.app :title => "A Styling Sample" do
0
+ @text = para "Red with an underline"
0
+ @text.style(:stroke => red, :underline => "single")
0
+Most styles can also be set by calling them as methods. (I'd use the manual search to find the method.)
0
+ Shoes.app :title => "A Styling Sample" do
0
+ @text = para "Red with an underline"
0
+ @text.underline = "single"
0
+Rather than making you plow through the whole manual to figure out what styles go where, this helpful page speeds through every style in Shoes and suggests where that style is used.
0
+=== :angle » a number ===
0
+For: ''background, border, gradient''.
0
+=== :attach » a slot or element ===
0
+=== :autoplay » true or false ===
0
+=== :bottom » a number ===
0
+For: ''all slots and elements''.
0
+=== :cap » :curve or :rect or :project ===
0
+For: ''arc, arrow, border, flow, image, mask, rect, star, shape, stack''.
0
+=== :center » true or false ===
0
+For: ''arc, image, oval, rect, shape''.
0
+=== :checked » true or false ===
0
+=== :choose » a string ===
0
+=== :click » a proc ===
0
+For: ''all slots and elements''.
0
+Wait, no, this needs to be split into `change` event as well.
0
+=== :curve » a number ===
0
+For: ''background, border, rect''.
0
+=== :displace_left » a number ===
0
+For: ''all slots and elements''.
0
+Moves a shape, text block or any other kind of object to the left or right. A positive number displaces to the right by the given number of pixels; a negative number displaces to the left. Displacing an object doesn't effect the actual layout of the page. Before using this style, be sure to read the [[Position.displace]] docs, since its behavior can be a bit surprising.
0
+=== :displace_top » a number ===
0
+For: ''all slots and elements''.
0
+Moves a shape, text block or any other kind of object up or down. A positive number moves the object down by this number of pixels; a negative number moves it up. Displacing doesn't effect the actual layout of the page or the object's true coordinates. Read the [[Position.displace]] docs, since its behavior can be a bit surprising.
0
+=== :emphasis » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :family » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :fill » a hex code, a Shoes::Color or a range of either ===
0
+For: ''arc, arrow, background, banner, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''.
0
+The color of the background pen. For shapes, this is the fill color, the paint inside the shape. For text stuffs, this color is painted in the background (as if marked with a highlighter pen.)
0
+=== :font » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :group » a string ===
0
+=== :height » a number ===
0
+For: ''all slots and elements''.
0
+Sets the pixel height of this object. If the number is a decimal number, the height becomes a percentage of its parent's height (with 0.0 being 0% and 1.0 being 100%.)
0
+=== :hidden » a number ===
0
+For: ''all slots and elements''.
0
+=== :inner » a number ===
0
+=== :items » an array ===
0
+=== :kerning » a number ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :leading » a number ===
0
+For: ''banner, caption, inscription, para, subtitle, tagline, title''.
0
+=== :left » a number ===
0
+For: ''all slots and elements''.
0
+Sets the left coordinate of this object to a specific pixel. Setting `:left => 10` places the object's left edge ten pixels away from the left edge of the slot containing it. If this style is left unset (or set to `nil`,) the object will flow in with the other objects surrounding it.
0
+=== :margin » a number or an array of four numbers ===
0
+For: ''all slots and elements''.
0
+=== :margin_bottom » a number ===
0
+For: ''all slots and elements''.
0
+=== :margin_left » a number ===
0
+For: ''all slots and elements''.
0
+=== :margin_right » a number ===
0
+For: ''all slots and elements''.
0
+=== :margin_top » a number ===
0
+For: ''all slots and elements''.
0
+=== :outer » a number ===
0
+=== :points » a number ===
0
+=== :radius » a number ===
0
+For: ''arc, arrow, background, border, gradient, oval, rect, shape''.
0
+=== :right » a number ===
0
+For: ''all slots and elements''.
0
+=== :rise » a number ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :scroll » true or false ===
0
+=== :size » a number ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :state » a string ===
0
+For: ''button, check, edit_box, edit_line, list_box, radio''.
0
+=== :stretch » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :strikethrough » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :stroke » a hex code, a Shoes::Color or a range of either ===
0
+For: ''arc, arrow, banner, border, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''.
0
+The color of the foreground pen. In the case of shapes, this is the color the lines are drawn with. For paragraphs and other text, the letters are printed in this color.
0
+=== :strokewidth » a number ===
0
+For: ''arc, arrow, border, flow, image, line, mask, oval, rect, shape, star, stack''.
0
+The thickness of the stroke, in pixels, of the line defining each of these shapes. For example, the number two would set the strokewidth to 2 pixels.
0
+=== :text » a string ===
0
+For: ''button, edit_box, edit_line, list_box''.
0
+=== :top » a number ===
0
+For: ''all slots and elements''.
0
+Sets the top coordinate for an object, relative to its parent slot. If an object is set with `:top => 40`, this means the object's top edge will be placed 40 pixels beneath the top edge of the slot that contains it. If no `:top` style is given, the object is automatically placed in the natural flow of its slot.
0
+=== :underline » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :variant » a string ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :weight » a number ===
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+=== :width » a number ===
0
+For: ''all slots and elements''.
0
+Sets the pixel width for the element. If the number is a decimal, the width is converted to a percentage (with 0.0 being 0% and 1.0 being 100%.) A width of 100% means the object fills its parent slot.
0
Here is a complete list of all the classes introduced by Shoes. This chart is laid out according to how classes inherits from each other. Subclasses are indented one level to the right, beneath their parent class.
0
@@ -857,7 +1100,7 @@ Draws a line using the current line color (aka "stroke") starting at coordinates
0
=== oval(left, top, radius) » Shoes::Shape ===
0
-Draws a circular form at pixel coordinates (left, top) with a width and height of `radius` pixels. The line and fill colors are used to draw the shape.
0
+Draws a circular form at pixel coordinates (left, top) with a width and height of `radius` pixels. The line and fill colors are used to draw the shape.
By default, the coordinates are for the oval's leftmost, top corner, but this can be changed by calling the [[Art.transform]] method or by using the `:center` style on the next method below.0
@@ -952,7 +1195,7 @@ A shape can also contain other shapes. So, you can place an [[Art.oval]], a [[A
0
=== star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Shape ===
0
-Draws a star using the stroke and fill colors. The star is positioned
at coordinates (left, top) with a certain number of `points`. The `outer` width defines the full radius of the star; the `inner` width specifies the radius of the star's middle, where points stem from.
0
+Draws a star using the stroke and fill colors. The star is positioned
with its center point at coordinates (left, top) with a certain number of `points`. The `outer` width defines the full radius of the star; the `inner` width specifies the radius of the star's middle, where points stem from.
0
=== stroke(pattern) » pattern ===
0
@@ -1360,7 +1603,7 @@ Adds elements to the beginning of a slot.
0
The `para` element is added to the beginning of the `@slot`.
0
+==
Position of a Slot ==
0
Like any other element, slots can be styled and customized when they are created.
0
@@ -1400,7 +1643,7 @@ The vertical size of the viewable slot in pixels. So, if this is a scrolling sl
0
-Hides the slot, so that it can't be seen. See also [[
Styles.show]] and [[Styles.toggle]].
0
+Hides the slot, so that it can't be seen. See also [[
Position.show]] and [[Position.toggle]].
0
=== left() » a number ===
0
@@ -1441,7 +1684,7 @@ Scrolls the slot to a certain coordinate. This must be between zero and `scroll
0
-Reveals the slot, if it is hidden. See also [[
Styles.hide]] and [[Styles.toggle]].
0
+Reveals the slot, if it is hidden. See also [[
Position.hide]] and [[Position.toggle]].
0
=== style() » styles ===
0
@@ -1520,7 +1763,7 @@ gives you back an Image object. Use the methods of the Image object to change th
0
A few methods are shared by every little element in Shoes. Moving, showing, hiding. Removing an element. Basic and very general things. This list encompasses those common commands.
0
-One of the most general methods of all is the `style` method (which is also covered as the [[
Styles.style]] method for slots.)
0
+One of the most general methods of all is the `style` method (which is also covered as the [[
Position.style]] method for slots.)
0
@@ -1835,7 +2078,7 @@ Okay, let's add to the above example.
0
- @list = ['Frances Johnson', 'Ignatius J. Reilly',
0
+ @list = ['Frances Johnson', 'Ignatius J. Reilly',
0
'Winston Niles Rumfoord']
0
@@ -2028,7 +2271,7 @@ So, the basic size of a list box is about 200 pixels wide and 28 pixels high. Y
0
:width => 120, :choose => "Apricots" do |list|
0
@fruit.text = list.text
0
@fruit = para "No fruit selected"
0
@@ -2074,7 +2317,7 @@ A simple progress bar is 200 pixels wide, but you can use the `:width` style (as
0
stack :margin => 0.9 do
0
title "Progress example"
0
@p = progress :width => 1.0
0
@p.fraction = (i % 100) / 100.0
Comments
No one has commented yet.