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

Salt - это подпроект PlantUML, который может помочь вам в разработке графического интерфейса или Схема сайта или Схема страницы или Чертеж экрана.

Он очень полезен при создании графических интерфейсов, схем и чертежей. Он помогает согласовать концептуальные структуры с визуальным дизайном, делая акцент на функциональности, а не на эстетике. Wireframes, занимающие центральное место в этом процессе, используются в различных дисциплинах.

Разработчики, дизайнеры и специалисты по работе с пользователями используют их для визуализации элементов интерфейса, навигационных систем и облегчения совместной работы. Они различаются по степени достоверности- от эскизов с низкой детализацией до высокодетальных изображений, что очень важно для создания прототипов и итеративного проектирования. Этот совместный процесс объединяет различные знания и опыт, от бизнес-анализа до исследования пользователей, обеспечивая соответствие конечного проекта требованиям бизнеса и пользователей.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Простые виджеты

Окно должно начинаться и заканчиваться скобками. Вы можете определить:

Кнопку, используя [ и ].
Radio button (переключатель), используя ( и ).
Checkbox (флажок), используя [ и ].
Поле ввода текста, используя ".
Раскрывающийся список (Droplist), используя ^.

Цель этого инструмента - обсуждать простые и типовые окна.

WARNING

This translation need to be updated.

WARNING

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Text area

Here is an attempt to create a text area:

Note:

the dot (.) to fill up vertical space;
the last line of space (" ") to make the area wider.

[Ref. QA-14765]

Then you can add scroll bar:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Open, close droplist

You can open a droplist, by adding values enclosed by ^, as:

[Ref. QA-4184]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Использование сетки

Таблица автоматически создаётся, когда вы используете открывающую скобку {.

Ещё вам нужно использовать | для деления на колонки.

Например:

Сразу после открывающей скобки вы можете использовать символ, чтобы определить, где закончится строка и начнётся колонка сетки:

Symbol	Result
`#`	Чтобы показать вертикальные и горизонтальные линии
`!`	Чтобы показать вертикальные линии
`-`	Чтобы показать горизонтальные линии
`+`	Чтобы показать внешние линии

WARNING

This translation need to be updated.

WARNING

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Группа

Виджеты могут быть объединены в группу со своим наименованием.

Используйте символ ^, следующий сразу после открывающей скобки {.

Наименование группы задается в кавычках " сразу после символа группы ^.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Использование разделителя

Вы можете использовать несколько горизонтальных линий как разделитель.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Древовидный виджет

Чтобы создать дерево, вам нужно начать с {T и использовать + чтобы определять иерархию.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Таблица дерева иерархии

Возможно придание таблицам древовидной (иерархической) структуры.

Таблица может не иметь границ, как в примере выше, либо иметь только вертикальные (T!), только горизонтальные (T-), внешние границы (T+) или все границы (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](https://forum.plantuml.net/4184)]*

WARNING

This translation need to be updated.

WARNING

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Продвинутая таблица

Вы можете использовать две специальные нотации для таблиц :

* чтобы показать что ячейка должна быть объединена с левой
. чобы обозначить пустую ячейку

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Полосы прокрутки

Используйте параметр S, следующий сразу после открывающей скобки {, для добавления вертикальных (SI), горизонтальных (S-) или всех (S) полос прокрутки.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Цвет элементов

Изменяйте цвет текста в виджетах по аналогии с другими диаграммами.

Для этого поставьте код <color:ваш_цвет> перед текстом виджета.

[Ref. QA-12177]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Creole on Salt

You can use Creole or HTML Creole on salt:

@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:https://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

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Спрайты

Используя << и >> вы можете определить псевдо-графическое изображение (спрайт) и задать его имя, с помощью которого переиспользовать его в дальнейшем.

Спрайт представляет собой текстовое поле рамером 10 строк на 12 колонок, состоящее их пустых пикселей, задаваемых точкой (.), и заполненных пикселей, задаваемых сиволом X.

[Ref. QA-5849]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
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:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Add title, header, footer, caption or legend

(See also: Common commands)

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Zoom, DPI

Whitout zoom (by default)

Scale

You can use the scale command to zoom the generated image.

You can use either a number or a fraction to define the scale factor. You can also specify either width or height (in pixel). And you can also give both width and height: the image is scaled to fit inside the specified dimension.