Salt 是 PlantUML 下面的子项目用来帮助用户来设计图形接口.
可以用 @startsalt 关键字，或者使用 @startuml 紧接着下一行使用salt 关键字.
Salt (wireframe)
Salt is a subproject included in PlantUML that may help you to design graphical interface.
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
基本部件
一个窗口必须以中括号开头和结尾。
接着可以这样定义:
按钮用 [ 和 ]。
单选按钮用 ( 和 )。
复选框用 [ 和 ]。
用户文字域用 "。
@startsalt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@endsalt
这个工具是用来讨论简单的示例窗口。
Basic widgets
A window must start and end with brackets. You can then define:
Button using [ and ].
Radio button using ( and ).
Checkbox using [ and ].
User text area using ".
@startsalt
{
Just plain text
[This is my button]
() Unchecked radio
(X) Checked radio
[] Unchecked box
[X] Checked box
"Enter text here "
^This is a droplist^
}
@endsalt
The goal of this tool is to discuss about simple and sample windows.
@startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
使用分隔符
你可以使用几条横线表示分隔符
@startuml
salt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@enduml
Using separator
You can use several horizontal lines as separator.
@startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
树形外挂
使用树结构，你必须要 以 {T 进行起始，然后使用 + 定义层次。
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
Tree widget
To have a Tree, you have to start with {T and to use + to denote hierarchy.
@startsalt
{
{T
+ World
++ America
+++ Canada
+++ USA
++++ New York
++++ Boston
+++ Mexico
++ Europe
+++ Italy
+++ Germany
++++ Berlin
++ Africa
}
}
@endsalt
Enclosing brackets
You can define subelements by opening a new opening bracket.
@startsalt
{+
{* File | Edit | Source | Refactor
Refactor | New | Open File | - | Close | Close All }
{/ General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
高级表格
对于表格有两种特殊的标记 :
* 单元格同时具备 span 和 left 两个属性
. 是空白单元格
@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
Advanced table
You can use two special notations for table :
* to indicate that a cell with span with left
. to denotate an empty cell
@startsalt
{#
. | Column 2 | Column 3
Row header 1 | value 1 | value 2
Row header 2 | A long cell | *
}
@endsalt
OpenIconic
OpenIconic is an very nice open source icon set.
Those icons have been integrated into the creole parser, so you can use them out-of-the-box.
You can use the following syntax: <&ICON_NAME>.
The complete list is available on OpenIconic Website, or
you can use the following special diagram:
@startuml
listopeniconic
@enduml
OpenIconic
OpenIconic is an very nice open source icon set. Those icons have been integrated into the creole parser, so you can use them out-of-the-box.
You can use the following syntax: <&ICON_NAME>.
