User Tools

Site Tools


en:template:choice_input

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
Last revision Both sides next revision
en:template:choice_input [2016/08/10 17:14]
Nicolas Ronvel created
en:template:choice_input [2017/06/22 10:28]
Nicolas Ronvel [Content in options]
Line 20: Line 20:
 ''​option''​ is the name of the option, which is used to set the ''​default''​ value, or to be retrieved through a variable inside the canvas. ''​text''​ is the text displayed inside the **Dropdown List**. ​ ''​option''​ is the name of the option, which is used to set the ''​default''​ value, or to be retrieved through a variable inside the canvas. ''​text''​ is the text displayed inside the **Dropdown List**. ​
  
-### Images in options+===== Images in options ​=====
  
 Since the resolution of the [[https://​github.com/​Gulix/​geckos/​issues/​41|Issue #41]], Images can be added to an option. For this purpose, add the property ''​image''​ to an option. The value has to be the URL or Data-URL of an image. You can also use a miniature, who works the same way with the property ''​miniature''​. You can have both an image and a miniature, or only one of them (or none). Since the resolution of the [[https://​github.com/​Gulix/​geckos/​issues/​41|Issue #41]], Images can be added to an option. For this purpose, add the property ''​image''​ to an option. The value has to be the URL or Data-URL of an image. You can also use a miniature, who works the same way with the property ''​miniature''​. You can have both an image and a miniature, or only one of them (or none).
Line 35: Line 35:
       ]       ]
 }, },
 +</​code>​
  
 If //at least// one option has an image or a miniature, the UI field will be different, displaying the miniature of each option on the right side of the text. If an option has no miniature but an image, this image is used instead. If neither a miniature or an image is set to this option, it displays nothing. If //at least// one option has an image or a miniature, the UI field will be different, displaying the miniature of each option on the right side of the text. If an option has no miniature but an image, this image is used instead. If neither a miniature or an image is set to this option, it displays nothing.
Line 42: Line 43:
 You can use specific [[Advanced_String_Variables#​dropdown_menu|Advanced Variables]] to access the images of the selected option. You can use specific [[Advanced_String_Variables#​dropdown_menu|Advanced Variables]] to access the images of the selected option.
  
 +===== Content in options =====
 +
 +Since the release of the Beta 3, **Content** can be added to an option. For this purpose, add the property ''​content''​ to an option. The value has to be a portion of canvas code : an path, a textbox, a group of paths, ...
 +
 +<code javascript>​
 +{ "​name":​ "​icons",​ "​label":​ "​Icons",​ "​type":​ "​options",​ "​default":​ "​none",​ "​options":​
 +  [{
 +    "​option":​ "​none", ​ "​text":​ "​None",​
 +    "​content":​ [{ "​type":​ "​path","​path":​ [] }]
 +   }, {
 +    "​option":​ "​alignment-good",​ "​text":​ "​Alignment - Good",
 +    "​content":​ [{ "​type":​ "​path",​ "​path":​ "​./​js/​templates/​align-good.svg"​ }]
 +   }, {
 +    "​option":​ "​alignment-neutral",​ "​text":​ "​Alignment - Neutral",​
 +    "​content":​ [{ "​type":​ "​path",​ "​path":​ "​./​js/​templates/​align-neutral.svg"​ }]
 +   }, {
 +    "​option":​ "​alignment-evil",​ "​text":​ "​Alignment - Evil",
 +    "​content":​ [{ "​type":​ "​path",​ "​path":​ "​./​js/​templates/​align-evil.svg"​ }]
 +   }
 +},
 +</​code>​
 +
 +If you have defined a ''​content''​ property on an option, you can retrieve its content by using the ''​£optionsName''​ variable : 
 +
 +<code javascript>​
 +{
 +  "​type":​ "​path-group",​
 +  "​id":​ "​icon",​
 +  "​left":​ 9,
 +  "​top":​ 7,
 +  "​fill":​ "​$color1.hexa$",​
 +  "​paths":​ "​£icons"​
 +}
 +</​code>​
 ===== Sharing Options ===== ===== Sharing Options =====
  
en/template/choice_input.txt · Last modified: 2017/07/19 13:24 by Nicolas Ronvel