Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Salt (Wireframe)

Saltは PlantUML のサブプロジェクトで、グラフィカルなインターフェイスや ウェブサイトワイヤーフレーム、ページ概略図、画面青写真

グラフィカルなインターフェイス、回路図、青写真を作るのにとても便利です。概念的な構造を 視覚的なデザインと整合させ、美しさよりも機能性を強調するのに役立ちます。

開発者、デザイナー、ユーザーエクスペリエンスの専門家は、インターフェイス要素、ナビゲーションシステムを視覚化し、コラボレーションを促進するためにワイヤーフレームを使用します。プロトタイピングや 反復デザインに重要な、詳細度の低いスケッチから詳細度の高い表現まで、忠実度はさまざまです。このコラボレーション・プロセスは、ビジネス分析から ユーザー・リサーチまで、さまざまな専門知識を統合し、最終的なデザインがビジネスと ユーザーの両方の要件に合致することを保証します。

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
基本のウィジェット

ウィンドウは中括弧で始めて中括弧で閉じなければなりません。

次のように定義できます。

ボタンは [ と ] で括ります。
ラジオボタンは ( と ) で括ります。
チェックボックスは [ と ] で括ります。
テキスト領域は " で括ります。
ドロップリストは ^ で括ります。

WARNING

This translation need to be updated.

WARNING

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
テキストエリア

次のように、テキストエリアを表現することができます:

注意

ドット(.)によって、縦方向のスペースを埋めています
最後の行のスペース(" ")によって、領域の幅を広げています

[Ref. QA-14765]

これに、スクロールバーを追加できます:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
ドロップリストの開閉

^で挟まれた値を追加することで、ドロップリストを開いた状態にすることができます:

[Ref. QA-4184]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
罫線の使用 [|、#、!、-、+]

表は括弧 { で開始すれば自動的に作成されます。そして、列を分割するには | を使う必要があります。

例：

行や列の罫線を表示したいときは、括弧で開始した直後に、以下のように定義された1文字を使用してください。：

文字	結果
`#`	全ての縦横の罫線を表示する
`!`	全ての縦線を表示する
`-`	全ての横線を表示する
`+`	外枠を表示する

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
グループボックス [^]

[Ref. QA-5840]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
セパレータの使用 [..、==、~~、--]

いくつかの横線をセパレータとして使用することができます。

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
木構造ウィジェット [T]

木構造を作るには、{T で開始して階層を示すために + を使用する必要があります。

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
木構造と表 [T]

木構造と表を組み合わせることができます。

罫線を追加すると次のようになります。

[Ref. QA-1265]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
括弧で括る [{、}]

定義中に、新しい括弧で括ることによりサブ要素を定義することができます。

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
タブの追加 [/]

{/ 表記を使用してタブを追加することができます。 HTML コードを使用してテキストを太字にできることに注意してください。

タブは垂直方向にも配向できます：

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
メニューの使用 [*]

{* 表記でメニューを追加することができます。

メニューを開くことも可能です：

ドロップリストを開くことも可能です：

[Ref. QA-4184]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
テーブル（上級）

テーブルのための2つの特別な表記を使用することができます。

* は左のセルとの結合となります
. は空のセルとなります

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
スクロールバー [S、SI、S-]

次の例のように、{Sでスクロールバーを使用できます：

{S：水平方向、垂直方向のスクロールバー

{SI：垂直方向のスクロールバーのみ

{S-：水平方向のスクロールバーのみ

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
色

ウィジェットのテキストの色を変えることができます。

[Ref. QA-12177]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
SaltでのCreoleの使用

CreoleまたはHTML Creole記法を使用することができます:

@startsalt
{{^==Creole
 This is **bold**
 This is //italics//
 This is ""monospaced""
 This is --stricken-out--
 This is __underlined__
 This is ~~wave-underlined~~
 --test Unicode and icons--
 This is <U+221E> long
 This is a <&code> icon
 Use image : <img:http://plantuml.com/logo3.png>
}|
{^HTML Creole 
 This is bold
 This is italics
 This is <font:monospaced>monospaced
 This is <s>stroked</s>
 This is underlined
 This is <w>waved</w>
 This is <s:green>stroked</s>
 This is <u:red>underlined
 This is <w:#0000FF>waved</w>
 -- other examples --
 This is <color:blue>Blue</color>
 This is <back:orange>Orange background</back>
 This is <size:20>big</size>
}|
{^Creole line
You can have horizontal line
----
Or double line
====
Or strong line
____
Or dotted line
..My title..
Or dotted title
//and title... //
==Title==
Or double-line title
--Another title--
Or single-line title
Enjoy!
}|
{^Creole list item
**test list 1**
* Bullet list
* Second item
** Sub item
*** Sub sub item
* Third item
----
**test list 2**
# Numbered list
# Second item
## Sub item
## Another sub item
# Third item
}|
{^Mix on salt
 ==<color:Blue>Just plain text
 [This is my default button]
 [<color:green>This is my green button]
 [ ---<color:#9a9a9a>This is my disabled button-- ]
 [] <size:20><color:red>Unchecked box
 [X] <color:green>Checked box
 "//Enter text here// "
 ^This is a droplist^
 ^<color:#9a9a9a>This is a disabled droplist^
 ^<color:red>This is a red droplist^
}}
@endsalt