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

Salt ist ein Unterprojekt von PlantUML, das Ihnen helfen kann, grafische Schnittstellen oder Website Wireframe oder Seitenschema oder Screen Blueprint.

Es ist sehr nützlich bei der Erstellung von grafischen Oberflächen, Schemata und Entwürfen. Es hilft dabei, die konzeptionellen Strukturen mit dem visuellen Design in Einklang zu bringen und die Funktionalität über die Ästhetik zu stellen. Wireframes, die für diesen Prozess von zentraler Bedeutung sind, werden in verschiedenen Disziplinen eingesetzt.

Entwickler, Designer und Fachleute für Benutzererfahrung verwenden sie zur Visualisierung von Oberflächenelementen und Navigationssystemen und zur Erleichterung der Zusammenarbeit. Sie variieren in ihrer Detailtreue, von einfachen Skizzen bis hin zu sehr detaillierten Darstellungen, die für das Prototyping und das iterative Design entscheidend sind. In diesen kollaborativen Prozess fließen verschiedene Fachkenntnisse ein, von der Geschäftsanalyse bis zur Nutzerforschung, um sicherzustellen, dass das endgültige Design sowohl den geschäftlichen als auch den Nutzeranforderungen gerecht wird.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Standard-Steuerelemente

Ein Fenster muss mit einer geschweiften Klammer beginnen und enden. Darin kann folgendes definiert werden:

ein Button mit [ und ].
Radio-Button mit ( und ).
eine Checkbox mit [ und ].
Freitextfeld mit ".

Das Ziel dieses Werkzeugs ist das Darstellung von einfachen und Beispiel-Fenstern.

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
Nutzung von Gittern

Eine Tabelle wird automatisch erstellt, wenn ein öffnende Klammer { benutzt wird.

Zum trennen von Spalten wird | verwendet.

Ein Bespiel:

Gleich nach der öffnenden Klammer kann durch das erste Zeichen angegeben werden, ob die Linien des Gitters gezeichnet werden sollen:

Symbol	Result
`#`	Um alle senkrechten und waagerechten Linien anzuzeigen
`!`	Alle senkrechten Linien
`-`	Alle waagerechten Linien
`+`	Alle äusseren Linien

WARNING

This translation need to be updated.

WARNING

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Group box [^]

[Ref. QA-5840]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Verwendung von Trennern

Sie können mehrere horizontale Linien als Trenner verwenden.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Baum Widget ( Tree Widget )

Um einen Baum zu erhalten, beginnen Sie mit {T und verwenden + um die Hierarchie Tiefe zu kennzeichnen.

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
Klammerung

Subelemente können durch Klammern definiert werden.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Hinzufügen von Reitern

Sie können Reiter durch die {/ Notation hinzufügen. Durch HTML Befehle können Sie auch Fettdruck erstellen.

Reiter können auch vertikal angeordnet sein:

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Benutzung von "menu"

Du kannst ein Menü durch die {* Notation hinzufügen.

Es ist auch möglich ein menü zu öffnen:

*[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
Erweiterte Tabellen

Du kannst 2 spezielle Notationen für Tabellen benutzen:

* um eine Zelle mit der Linken zu verbinden
. um eine leere Zelle zu definieren

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.