The Green Shoes Manual 1.1.357

The Styles Master List

外観を変更したいですか？ Green Shoesにおいてはスタイルが要素の表示方法を変更するために利用されます。場合によっては、要素のすべてのクラスのスタイルでさえ設定できます。（すべての段落に特定のフォントを与えるように）

スタイルは簡単にspotできます。通常は要素が生成されるときに現れます。

 Shoes.app title: "A Styling Sample" do
   para 'Green Shoes', align: 'center', size: 50
 end

このappには:titleスタイルが設定されています。そしてこのappの内部の段落には、中央揃えの:alignスタイルとフォントサイズ50の:sizeスタイルが設定されます。

このスタイルのハッシュは、どんな要素やスロットも利用できるstyleメソッドを利用して変更できます。

注意: 今のところGreen Shoesでは、styleメソッドで変更できる要素は形状のみです。

 Shoes.app title: "A Styling Sample" do
   choose = 
     lambda{[red, blue, green, yellow].sample}
   s = star 100, 50, 30, 200, 180, strokewidth: 5
   button 'change colors' do
     s.style stroke: choose.call, fill: choose.call
   end
 end

多くのスタイルもメソッドとして呼び出すことで設定することができます。（メソッドを見つけるために手動での検索を行うでしょう。）

注意: Green Shoesではメソッドとしてはそれらをサポートしていません。

 # Not yet available
 Shoes.app title: "A Styling Sample" do
   choose = 
     lambda{[red, blue, green, yellow].sample}
   s = star 100, 50, 30, 200, 180, strokewidth: 5
   button 'change colors' do
     s.stroke = choose.call; s.fill = choose.call
   end
 end

どんなスタイルでも分かるようにすべてのマニュアルを苦労して読ませるよりも、この役に立つページは Green Shoesのあらゆるスタイルを急いで駆け抜けて、どこでスタイルが利用されるかについて示唆します。

:align » a string

banner, caption, inscription, para, subtitle, tagline, titleで利用できます。

テキストの整列です。これは次のどれかです：

'left': 左へテキストを整列します。
'center': 中央へテキストを整列します。
'right': 右へテキストを整列します。

:angle » a number

background, border, line, oval, rect, shape, starで利用できます。

グラデーションに適用する角度です。通常はグラデーションの色の効果は上から下です。 :angleを90に設定するなら反時計回りに90度回転し、グラデーションは左から右になるでしょう。

:attach » a slot or element

flow, stackで利用できます。

他のスロットや要素と比較してスロットをピンで止めます。ウィンドウの左上の角からスロットを配置するために:attach => Windowと書く人もいるかもしれません。これについてもう少し取り上げると、:top => 10, :left => 10, :attach => Windowのスタイルはスロットをウインドウの座標の(10, 10)に配置します。

動く要素にスロットがアタッチされた場合は、そのスロットはそれとともに動きます。アタッチメントがnilにリセットされるなら、通常はそのスロットはそれを取り囲む他のオブジェクトとともに流れます。

注意: Green Shoesは:attachスタイルをサポートしていません。

:autoplay » true or false

videoで利用できます。

ビデオは現れた後で再生を開始すべきですか？trueを設定すると、ビデオはユーザに尋ねること無く開始するでしょう。

注意: Green Shoesは:autoplayスタイルをサポートしていません。

:back » true or false

shapes, image, textblocksで利用できます。

他の要素の後ろに配置されます。

 Shoes.app do
   rect 100, 100, 100, 100, fill: green
   rect 120, 120, 100, 100, fill: yellow
   para 'hello', left: 150, top: 150, front: true
   oval 150, 150, 100, 100, fill: red
   oval 180, 180, 100, 100, fill: gray, back: true
 end

:bottom » a number

すべてのスロットと要素で利用できます。

要素の下の端の座標にピクセルを設定します。その端はコンテナの下の端に対して配置されます。そのため、:bottom => 0は、スロットの下の端とその下の端が接するように要素を配置するでしょう。

注意: Green Shoesは:bottomスタイルをサポートしていません。

:cap » :curve or :rect or :project

arc, line, shapeで利用できます。

線の終点の形状を曲がったもの（curved）か角張ったもの（square）に設定します。追加の説明はcapメソッドを見てください。

:center » true or false

arc, image, oval, rect, shapeで利用できます。

:topと:leftの座標が形状の中心を意味するかどうか示します。 trueを設定すると、transformメソッドに:centerを設定したのと似ています。

注意: Green Shoesは:centerスタイルをサポートしていません。

:change » a proc

edit_box, edit_line, list_boxで利用できます。

changeイベントハンドラはスタイルに保存されます。例として、edit_boxの changeメソッドを見てください。

:checked » true or false

check, radioで利用できます。

チェックボックスまたはラジオボタンがクリックされましたか？ trueが設定されるなら、そのボックスはチェックされます。checked=メソッドも見てください。

:choose » a string

list_boxで利用できます。

リスト内の現在選択されたアイテムを設定します。追加の情報はchooseにあります。

:click » a proc

arc, arrow, button, check, flow, image, line, link, oval, radio, rect, shape, stack, starで利用できます。

clickイベントハンドラはスタイルに保存されます。解説はclickメソッドを見てください。

:curve » a number

background, border, rectで利用できます。

長方形の要素のそれぞれの曲がった角の半径です。例として、6を設定した場合、長方形の角は 6ピクセルの半径のカーブを与えられます。

:displace_left » a number

すべてのスロットと要素で利用できます。

形状、テキストブロックまたはその他のどんな種類のオブジェクトでも左か右に置き換えます。正数は与えられた数のピクセルによって右へ置き換え、負数は左へ置き換えます。オブジェクトを置き換えることはページの実際のレイアウトに影響を与えません。この振る舞いに少し驚くかもしれないので、このスタイルを利用する前に、displaceのドキュメントを読むようにしてください。

注意: Green Shoesは:displace_leftスタイルをサポートしていません。

:displace_top » a number

すべてのスロットと要素で利用できます。

形状、テキストブロックまたはその他のどんな種類のオブジェクトでも上か下に置き換えます。正数は与えられた数のピクセルによって下へ置き換え、負数は上へ置き換えます。オブジェクトを置き換えることはページの実際のレイアウトやオブジェクトの本当の座標に影響を与えません。この振る舞いに少し驚くかもしれないので、displaceのドキュメントを読んでください。

注意: Green Shoesは:displace_topスタイルをサポートしていません。

:emphasis » a string

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

強調によってテキストを整えます。（一般的にはイタリック体にされます。）

このスタイルは3つの設定ができます：

"normal" - 直立のフォント。
"oblique" - ローマン体の傾いたフォント。
"italic" - イタリック体の傾いたフォント。

:family » a string

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

与えられたフォントファミリーでテキストを整えます。文字列はフォントファミリー名かカンマで区切られたフォントファミリーの一覧を含むべきです。

:fill » a hex code, a RGB array or a range of either

background, banner, border, caption, inscription, para, line, oval, rect, shape, star, subtitle, tagline, titleで利用できます。

背景のペンの色です。形状では、これは形状の内側を塗りつぶすペンキの色です。テキストなどでは、この色で背景が塗られます。（まるで蛍光ペンでマークされたように）

:font » a string

banner, caption, inscription, para, subtitle, tagline, titleで利用できます。

フォントの種類でテキストを整えます。この文字列は非常に柔軟ですが、 "[FAMILY-LIST] [STYLE-OPTIONS] [SIZE]"の形である必要があり、 FAMILY-LISTの部分は任意にカンマで終わりカンマで区切られたフォントファミリーの一覧、 STYLE_OPTIONSはvariant、weight、stretch、またはgravityなどの空白で区切られたスタイルを表現する単語の一覧、そしてSIZEは（ポイントのサイズの）10進数または絶対的なサイズのために単位修飾子"px"を任意に続けます。オプションのどれかは設定されないかもしれません。 FAMILY-LISTが設定されない場合は、デフォルトフォントファミリー（Arial）が利用されます。

:front » true or false

shapes, image, textblocksで利用できます。

他の要素の前に配置されます。

:group » a string

radioで利用できます。

どのグループにラジオボタンが所属するかを示します。この設定がない場合は、ラジオボタンは周辺のスロットのラジオボタンとグループ化されます。ラジオボタンを"グループ化"することはスクリーン上でお互いに隣接してグループ化されることを意味するのではありません。それは、一度にグループから一つだけのラジオボタンだけを選択できることを意味します。

文字列にスタイルを与えることによって、ラジオボタンは同じグループ名を持つ他のラジオボタンとグループ化されます。

:height » a number

すべてのスロットと要素で利用できます。

オブジェクトの高さをピクセルで設定します。数値が10進数なら、その高さは親の高さのパーセンテージになります。（0.0は0%に、1.0は100%になります。）

:hidden » true or false

すべてのスロットと要素で利用できます。

オブジェクトの表示または非表示です。すべてのオブジェクトにとって:hidden => trueは画面上での非表示になります。その子供のスロットと要素でも同様です。

 Shoes.app do
   slot = stack hidden: true do
     title 'hello'
     flow do
       image File.join DIR, '../samples/loogink.png'
     end
     para link('Go go!'){alert 'hi'}
   end
   timer(2){slot.show}
   timer(5){slot.hide}
 end

注意: 今のところGreen Shoesで:hiddenスタイルをサポートしている要素は、 slots, shapes, textblocks, imagesのみです。

:inner » a number

starで利用できます。

内側の半径のサイズ（ピクセル）です。その内側の半径は点が別れ始める星の中に中空でない円を描きます。

:items » an array

list_boxで利用できます。

リストボックスの項目の一覧です。例のためにlist_boxメソッドを見てください。

:justify » true or false

banner, caption, inscription, para, subtitle, tagline, titleで利用できます。

均一に水平にテキストの間隔を開けます。

:kerning » a number

banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, titleで利用できます。

文字の間に自然な空白をピクセルで追加します。

注意: Green Shoesは:kerningスタイルをサポートしていません。

:leading » a number

banner, caption, inscription, para, subtitle, tagline, titleで利用できます。

テキストブロックの行間に空白を設定します。デフォルトは4ピクセルです。

:left » a number

すべてのスロットと要素で利用できます。

オブジェクトの左の座標を特定のピクセルに設定します。 :left => 10の設定はそのオブジェクトを含むスロットの左の端からオブジェクトの左の端が10ピクセル離れた位置に配置します。このleftのスタイルが設定されていない（またはnilが設定される）なら、そのオブジェクトはそれを囲んでいる他のオブジェクトとともに動くでしょう。

:margin » a number or an array of four numbers

すべてのスロットと要素で利用できます。

マージンは要素の周囲に間隔をあけます。それぞれの要素はleft、top、right、そしてbottomのマージンを持っています。 :marginスタイルに一つの数が設定されると、要素の周囲の間隔は均一にその数にとなります。言い換えると、:margin => 8を設定すると、その要素の周囲のすべてのマージンは8ピクセルの長さに設定されます。

このスタイルは4つの数を[left, top, right, bottom]の形の配列で与えることもできます。

:margin_bottom » a number

すべてのスロットと要素で利用できます。

要素の下側（bottom）のマージンをピクセルで設定します。

:margin_left » a number

すべてのスロットと要素で利用できます。

要素の左側（left）のマージンをピクセルで設定します。

:margin_right » a number

すべてのスロットと要素で利用できます。

要素の右側（right）のマージンをピクセルで設定します。

:margin_top » a number

すべてのスロットと要素で利用できます。

要素の上側（top）のマージンをピクセルで設定します。

:outer » a number

starで利用できます。

星の外側の半径（全幅の半分）をピクセルで設定します。

:points » a number

starで利用できます。

その星はいくつの頂点を持ちますか？:points => 5のスタイルは5つの頂点を持つ星を作成します。

:radius » a number

ovalで利用できます。

それらの要素に半径（直径または全幅の半分）を設定します。これを設定することは、この数値の2倍の:widthと:heightを設定することと同等です。

:right » a number

すべてのスロットと要素で利用できます。

要素の右端の座標をピクセルで設定します。その端はコンテナの右端に対して配置されます。そのため、:right => 0は、スロットの右端とその右端が接するように要素を配置するでしょう。一方:right => 20は要素の右端をそのスロットの右端から左側に向けて20ピクセル離れたところに配置します。

注意: Green Shoesは:rightスタイルをサポートしていません。

:rise » a number

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

テキストのフォントを基準から上げたり下げたりします。例えば、supは10ピクセルの:riseを行います。逆に、subの要素は-10ピクセルの:riseとなります。

:scroll » true or false

flow, stackで利用できます。

スロットをスクロールするスロットとします。 :scroll => trueが設定され、そのコンテンツがスロットの高さ以上の場合はスクロールバーがスロットに表示されます。スクロールバーは必要に応じて表示したり非表示になります。それはスロットの幅の内側で表示されるので、スクロールバーのあるなしに関わらず、スロットの幅は決して変わらないことを意味します。

注意: Green Shoesでは制約があります。今のところ:scrollスタイルはお試し版です。

スロットのインスタンスメソッド(clear, hide, etc.)が期待通り動きません。
マウスイベントをハンドリングできません。
flushメソッドを明示的に記述する必要があります。

 Shoes.app do
   s = stack left: 100, top: 50, width: 300, 
     height: 100, scroll: true do
     background gold
     image File.join(DIR, '../samples/loogink.png')
     10.times{para 'hello'}
     flush
   end
 end

:secret » true or false

ask, edit_lineで利用できます。

パスワードフィールドのために利用され、この設定は入力された文字を画面上で表示されないようにします。そのかわり、置き換えられた文字（たとえばアスタリスク）をそれぞれの文字が入力されるごとに表示します。

:size » a number

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

このテキストブロックまたはテキストの一部の内部で利用されたフォントのサイズをピクセルで設定します。

フォントサイズは次の文字列を利用することでも大きくすることができるかもしれません:

"xx-small" - 現在のサイズの57%
"x-small" - 現在のサイズの64%
"small" - 現在のサイズの83%
"medium" - サイズ変更なし
"large" - 現在のサイズの120%
"x-large" - 現在のサイズの143%
"xx-large" - 現在のサイズの173%

:state » a string

button, check, edit_box, edit_line, list_box, radioで利用できます。

この:stateスタイルは編集されたくないコントロールを利用不能または固定するためにあります。

利用可能なスタイルの設定：

nil - コントロールはアクティブで編集可能です。
"readonly" - コントロールはアクティブですが編集不可能です。
"disabled" - コントロールはアクティブはなく（グレイアウト）、編集不可能です。

:stretch » a string

banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, titleで利用できます。

テキストオブジェクトに伸縮したフォントを設定します。

利用可能な設定：

"condensed" - 狭い幅の文字
"normal" - 標準の幅の文字
"expanded" - 広い幅の文字 注意: Green Shoesは:stretchスタイルをサポートしていません。

:strikecolor » a RGB array

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

テキストに棒線を引いて削除するときの線の色です。

:strikethrough » a string

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

このテキストに棒線を引いて削除しますか？2つのオプションがあります：

"none" - 棒線を引いて削除しません。
"single" - 1本の棒線を引いて削除します。

:stroke » a hex code, a rgb array or a range of either

background, banner, border, caption, inscription, para, line, oval, rect, shape, star, subtitle, tagline, titleで利用できます。

フォアグラウンドのペンの色です。形状の場合は描かれる線の色です。段落や他のテキストでは、この色で文字が表示されます。

:strokewidth » a number

background, border, line, oval, rect, shape, starで利用できます。

描かれる線のピクセルでの太さで、形状の線を特徴付けます。例えば、数値の2が設定されればstrokewidthは2ピクセルになります。

:text » a string

edit_box, edit_lineで利用できます。

edit_boxやedit_lineのコンテンツに表示されるメッセージを設定します。

:top » a number

すべてのスロットと要素で利用できます。

オブジェクトの上側の座標を、その親のスロットに対して設定します。オブジェクトに:top => 40が設定されたなら、オブジェクトの上端はそのオブジェクトを含むスロットの上端から40ピクセル下に配置されることを意味します。:topスタイルが与えられないなら、そのスロットの自然な流れでオブジェクトは自動的に配置されます。

:undercolor » a RGB array

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

テキストの下線に利用される色です。

:underline » a string

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

テキストに下線のスタイルを指示します。

この設定の選択肢は：

"none" - 下線なし。　
"single" - 途切れのない下線。
"double" - 平行な途切れのない2本の下線。
"low" - フォントの基準より下の低い下線。（一般的に１つの文字に対してだけ、得にキーボードアクセラレータを表示するときに推奨されます。）
"error" - 波状の下線、通常はミススペルの指摘を見つけます。

:variant » a string

banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, titleで利用できます。

テキストのグループのためにフォントを変化させます。2つの選択肢：

"normal" - 通常のフォント。
"smallcaps" - 大文字が小さく変化することによって置き換えられた小文字のフォント。

注意: Green Shoesは:variantスタイルをサポートしていません。

:weight » a string

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

テキストを太文字に設定します。一般的には、このスタイルは次の文字列の内の1つを設定します：

"ultralight" - 超軽量の太さ (= 200)
"light" - 軽量の太さ (=300)
"normal" - 通常の太さ (= 400)
"semibold" - 通常と太文字の中間の太さ (=600)
"bold" - 太文字 (= 700)
"ultrabold" - 極端な太文字の太さ (= 800)
"heavy" - 重厚な太さ (= 900)

しかしながら、数値で太さを直接渡すこともできます。

:width » a number

すべてのスロットと要素で利用できます。

要素の幅をピクセルで設定します。数値が10進数なら、その幅はパーセンテージに変換されます。（0.0は0%に、1.0は100%になります。）100%の幅は親のスロットを埋め尽くすことを意味します。

:wrap » a number

banner, caption, inscription, para, span, subtitle, tagline, titleで利用できます。

どこで改行するか? 選択可能のオプションは以下の通りです。

"word" - 単語の区切りで改行します。
"char" - 文字の区切りで改行します。そのため単語が分割される場合があります。
"trim" - はみ出した部分は省略します。

Next: Classes List