docs: documentation for htmlLabel option

GateNLP · Nov 3, 2024 · 4c9db59 · 4c9db59
1 parent c20c92d
commit 4c9db59
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/docs/docs/manageradminguide/config_examples.js b/docs/docs/manageradminguide/config_examples.js
@@ -145,6 +145,18 @@ export default {
             "valError": "Error message when field fails is validation" //Optional
         }
     ],
+    configHtmlLabels: [
+        {
+            "name": "sentiment",
+            "type": "checkbox",
+            "title": "Sentiment",
+            "options": [
+                {"value": "positive", "htmlLabel": "<span style='color: green'>Positive</span>"},
+                {"value": "neutral", "htmlLabel": "<span style='font-style: italic'>Neutral</span> or uncertain"},
+                {"value": "positive", "htmlLabel": "<span style='color: red'>Negative</span>"}
+            ]
+        },
+    ],
     configSelector: [
         {
             "name": "mylabel",

diff --git a/docs/docs/manageradminguide/project_config.md b/docs/docs/manageradminguide/project_config.md
@@ -348,6 +348,38 @@ If your documents are plain text and include line breaks that need to be preserv
 
 </AnnotationRendererPreview>
 
+### Richer labels for radios & checkboxes
+
+The `label` of radio and checkbox inputs is normally plain text, however both input types support an `htmlLabel` property as an alternative to `label`, which allows for HTML tags within the option label.  The `htmlLabel` is rendered within a `<span></span>` inside the `<label>` element for the option, so it should be limited to presentational tags such as `<em>`, `<b>`, `<tt>`, or custom CSS directives via `<span style='...'>` or `<div style='...'>`.  In particular a `<div style='margin-bottom: 1.5em'>` is a convenient way to break up a long list of radio buttons (with `"orientation": "vertical"`) into logical sections.
+
+<AnnotationRendererPreview :config="configs.configHtmlLabels">
+
+```json
+[
+  {
+    "name": "sentiment",
+    "type": "checkbox",
+    "title": "Sentiment",
+    "options": [
+      {
+        "value": "positive",
+        "htmlLabel": "<span style='color: green'>Positive</span>"
+      },
+      {
+        "value": "neutral",
+        "htmlLabel": "<span style='font-style: italic'>Neutral</span> or uncertain"
+      },
+      {
+        "value": "positive",
+        "htmlLabel": "<span style='color: red'>Negative</span>"
+      }
+    ]
+  }
+]
+```
+
+</AnnotationRendererPreview>
+
 ### Selector input
 
 <AnnotationRendererPreview :config="configs.configSelector">