<View>

Category: Visual tag

The View element is used to configure the display of blocks, similar to the div tag in HTML.

Attributes

Attribute	Type	Required	Default	Description
display	block,inline	yes	—
style	string	no	—	CSS style string
layout	columns	no	—	columns puts the children side by side, and one under the other when the view is narrow. See Side by side
ratio	string	no	equal	With layout="columns": how the width is shared, such as 2:3
stackBelow	number	no	640	With layout="columns": the width of the view, in pixels, under which the columns stack
gap	number	no	24	With layout="columns": the space between columns, in pixels
sticky	first	no	—	With layout="columns": first keeps the first column in sight while a longer one scrolls
className	string	no	—	Class name of the CSS style to apply. Use with the Style tag
idAttr	string	no	—	Unique ID attribute to use in CSS
visibleWhen	region-selected,choice-selected,no-region-selected,choice-unselected	no	—	Control visibility of the content. Can also be used with the when* parameters below to narrow visibility
whenTagName	string	no	—	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	no	—	Use with visibleWhen="region-selected". Narrow down visibility by label value. Multiple values can be separated with commas
whenChoiceValue	string	no	—	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

Side by side

layout="columns" lays the view's children out as columns: a photo beside the form that describes it, a text to read beside the recorder, a source beside its translation. Each direct child is one column, so wrap the tags that belong together in a <View> of their own.

<View layout="columns" ratio="2:3" sticky="first">
  <View>
    <Image name="image" value="$image"/>
    <Text name="diagnosis" value="$diagnosis"/>
  </View>
  <View>
    <Header value="Advisory"/>
    <TextArea name="advisory" toName="image" rows="6"/>
  </View>
</View>

The columns stack, first on top, when the view itself is narrower than stackBelow (640 pixels by default). What counts is the width the view has, not the width of the screen, so the same setup is side by side on a laptop, stacked on a phone, and stacked again on a laptop when a side panel leaves it little room. No style is needed, and nothing has to be tuned per device.

<Style> and <Filter> children are not columns.

Examples

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 2

<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 3

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