View
The View element is used to configure the display of blocks, similar to the div tag in HTML.
Parameters
| Param | Type | Description |
|---|---|---|
| display | block | inline |
|
| [style] | string |
CSS style string |
| [className] | string |
Class name of the CSS style to apply. Use with the Style tag |
| [idAttr] | string |
Unique ID attribute to use in CSS |
| [visibleWhen] | region-selected | choice-selected | no-region-selected | choice-unselected |
Control visibility of the content. Can also be used with the when* parameters below to narrow visibility |
| [whenTagName] | string |
Use with visibleWhen. Narrow down visibility by tag name. For regions, use the name of the object tag, for choices, use the name of the choices tag |
| [whenLabelValue] | string |
Use with visibleWhen="region-selected". Narrow down visibility by label value. Multiple values can be separated with commas |
| [whenChoiceValue] | string |
Use with visibleWhen ("choice-selected" or "choice-unselected") and whenTagName, both are required. Narrow down visibility by choice value. Multiple values can be separated with commas |
Example
Create two cards that flex to take up 50% of the screen width on the labeling interface
<View style="display: flex;">
<!-- Left side -->
<View style="flex: 50%">
<Header value="Facts:" />
<Text name="text" value="$fact" />
</View>
<!-- Right side -->
<View style="flex: 50%; margin-left: 1em">
<Header value="Enter your question:" />
<TextArea name="question" />
</View>
</View>Example
<View>
<Text name="text" value="$text"/>
<Choices name="sentiment" toName="text">
<Choice value="Positive"/>
<Choice value="Negative"/>
<Choice value="Neutral"/>
</Choices>
<!-- Shown only when Positive or Negative is selected -->
<View visibleWhen="choice-selected" whenTagName="sentiment"
whenChoiceValue="Positive,Negative">
<Header value="Why?"/>
<TextArea name="why_positive" toName="text"/>
</View>
</View>Example
<View>
<Labels name="label" toName="text">
<Label value="PER" background="red"/>
<Label value="ORG" background="darkorange"/>
<Label value="LOC" background="orange"/>
<Label value="MISC" background="green"/>
</Labels>
<Text name="text" value="$text"/>
<!-- Shown only when region PER or ORG is selected -->
<View visibleWhen="region-selected" whenLabelValue="PER,ORG">
<Header value="yoho"/>
</View>
</View>