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

Salt是 PlantUML 的一个子项目，可帮助您设计图形界面或网页。 网站线框或页面示意图或屏幕蓝图.

它在制作图形界面、示意图和蓝图方面非常有用。它有助于将概念结构与视觉设计相统一，强调功能性而非美观性。

开发人员、设计人员和用户体验专业人员使用Wireframes 将界面元素、导航系统可视化，并促进协作。Wireframes 是这一流程的核心，可用于各种学科。它们的保真度各不相同，从低细节草图到高细节表现，对于原型设计和迭代设计至关重要。这一协作过程整合了从业务分析到用户研究等不同的专业知识，确保最终设计符合业务和用户需求。

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
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
分组框

[参见 QA-5840]

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
Tree table [T]

You can combine trees with tables.

And add lines.

[Ref. QA-1265]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Enclosing brackets [{, }]

You can define subelements by opening a new opening bracket.

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
高级表格

对于表格有两种特殊的标记 :

* 单元格同时具备 span 和 left 两个属性
. 是空白单元格

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Scroll Bars [S, SI, S-]

You can use {S notation for scroll bar like in following examples:

{S: for horizontal and vertical scrollbars

{SI : for vertical scrollbar only

{S- : for horizontal scrollbar only

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Colors

It is possible to change text color of widget.

[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
Pseudo sprite [<<, >>]

Using << and >> you can define a pseudo-sprite or sprite-like drawing and reusing it latter.

[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.