Or dotted line ..My title.. Or dotted 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]
  [<b><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^
  ^<b><color:red>This is a red droplist^
}}
@endsalt

== Pseudo sprite [<<, >>]

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

@startsalt
 {
 [X] checkbox|[] checkbox
 () radio | (X) radio
 This is a text|[This is my button]|This is another text
 "A field"|"Another long Field"|[A button]
 <>|other folder|<>
^Droplist^
}
@endsalt

[Ref. QA-5849]

== OpenIconic

OpenIconic is a very nice open source icon set. Those icons have been integrated into the link::creole[creole parser], so you can use them out-of-the-box. You can use the following syntax: <&ICON_NAME>.

@startsalt
{
  Login<&person> | "MyName   "
  Password<&key> | "****     "
  [Cancel <&circle-x>] | [OK <&account-login>]
}
@endsalt

The complete list is available on OpenIconic Website, or you can use the following special diagram:

@startuml
listopeniconic
@enduml

== Add title, header, footer, caption or legend

@startsalt
title My title
header some header
footer some footer
caption This is caption
legend
The legend
end legend

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}

@endsalt

(See also: link::commons[Common commands])

== Zoom, DPI

=== Whitout zoom (by default)

@startsalt
{
  <&person> Login  | "MyName   "
  <&key> Password  | "****     "
  [<&circle-x> Cancel ] | [ <&account-login> OK   ]
}
@endsalt

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

@startsalt
scale 2
{
  <&person> Login  | "MyName   "
  <&key> Password  | "****     "
  [<&circle-x> Cancel ] | [ <&account-login> OK   ]
}
@endsalt

(See also: link::commons#zw5yrgax40mpk362kjbn[Zoom on Common commands])

=== DPI You can also use the `skinparam dpi`command to zoom the generated image.

@startsalt
skinparam dpi 200
{
  <&person> Login  | "MyName   "
  <&key> Password  | "****     "
  [<&circle-x> Cancel ] | [ <&account-login> OK   ]
}
@endsalt

== Include Salt "on activity diagram"

You can read the following explanation.

@startuml
(*) --> "
{{
salt
{+
an example
choose one option
()one
()two
[ok]
}
}}
" as choose

choose -right-> "
{{
salt
{+
please wait
operation in progress
<&clock>
[cancel]
}
}}
" as wait
wait -right-> "
{{
salt
{+
success
congratulations!
[ok]
}
}}
" as success

wait -down-> "
{{
salt
{+
error
failed, sorry
[ok]
}
}}
"
@enduml

It can also be combined with link::preprocessing#macro_definition[define macro].

@startuml
!unquoted procedure SALT($x)
"{{
salt
%invoke_procedure("_"+$x)
}}" as $x
!endprocedure

!procedure _choose()
{+
an example
choose one option
()one
()two
[ok]
}
!endprocedure

!procedure _wait()
{+
please wait
operation in progress
<&clock>
[cancel]
}
!endprocedure

!procedure _success()
{+
success
congratulations!
[ok]
}
!endprocedure

!procedure _error()
{+
error
failed, sorry
[ok]
}
!endprocedure

(*) --> SALT(choose)
-right-> SALT(wait)
wait -right-> SALT(success)
wait -down-> SALT(error)
@enduml

== Include salt "on while condition of activity diagram"

You can include salt on while condition of activity diagram.

@startuml
start
while (\n{{\nsalt\n{+\nPassword | "****     "\n[Cancel] | [  OK   ]}\n}}\n) is (Incorrect)
  :log attempt;
  :attempt_count++;
  if (attempt_count > 4) then (yes)
    :increase delay timer;
    :wait for timer to expire;
  else (no)
  endif
endwhile (correct)
:log request;
:disable service;
@enduml

[Ref. QA-8547]

== Include salt "on repeat while condition of activity diagram"

You can include salt on 'repeat while' condition of activity diagram.

@startuml
start
repeat :read data;
  :generate diagrams;
repeat while (\n{{\nsalt\n{^"Next step"\n  Do you want to continue? \n[Yes]|[No]\n}\n}}\n)
stop
@enduml

[Ref. QA-14287]

== Skinparam

You can use [only] some link::skinparam[skinparam] command to change the skin of the drawing.

Some example:

@startsalt
skinparam Backgroundcolor palegreen
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

@startsalt
skinparam handwritten true
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

[[#FFD700#FIXME]] 🚩 FYI, some other skinparam does not work with salt, as:

@startsalt
skinparam defaultFontName monospaced
{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

== Style

You can use [only] some link::style-evolution[style] command to change the skin of the drawing.

Some example:

@startsalt

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

[[#FFD700#FIXME]] 🚩 FYI, some other style does not work with salt, as:

@startsalt

{+
  Login    | "MyName   "
  Password | "****     "
  [Cancel] | [  OK   ]
}
@endsalt

[Ref. QA-13460]