Salt - это подпроект, включенный в PlantUML и призванный помочь вам проектировать графический интерфейс.
Вы можете использовать ключевое слово @startsalt, или @startuml, после которого стоит ключевое слово salt.
Salt (Wireframe)
Salt is a subproject included in PlantUML that may help you to design graphical interface or Website Wireframe or Page Schematic or Screen Blueprint.
The goal of this tool is to discuss about simple and sample windows.
You can use either @startsalt keyword, or @startuml followed by a line with salt keyword.
Простые виджеты
Окно должно начинаться и заканчиваться скобками.
Вы можете определить:
Кнопку, используя [ и ].
Radio button (переключатель), используя ( и ).
Checkbox (флажок), используя [ и ].
Поле ввода текста, используя ".
@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 ".
Droplist 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
Использование сетки
Таблица автоматически создаётся, когда вы используете открывающую скобку {.
Ещё вам нужно использовать | для деления на колонки.
Например:
@startsalt
{^"My group box"
Login | "MyName "
Password | "**** "
[Cancel] | [ OK ]
}
@endsalt
Использование разделителя
Вы можете использовать несколько горизонтальных линий как разделитель.
@startsalt
{
Text1
..
"Some field"
==
Note on usage
~~
Another text
--
[Ok]
}
@endsalt
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
Окружающие скобки
Вы можете задать подэлементы, открывая новую скобку.
@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
Продвинутая таблица
Вы можете использовать две специальные нотации для таблиц :
* чтобы показать что ячейка должна быть объединена с левой
. чобы обозначить пустую ячейку
@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>.
