样式

Style标签与View标签结合使用，用于为标注界面应用自定义CSS属性。请参阅MDN页面上的CSS参考获取完整可用的属性列表。您也可以调整Label Studio默认的CSS类。使用浏览器开发者工具检查界面元素并定位类名，然后在Style标签中指定该类名。

参数

参数	类型	描述
.<className>	string	Reference the className specified in the View tag to apply to a section of the labeling configuration.
[CSS property]	string	CSS property and value to apply.

示例

使用CSS样式使标注界面的标题显示为红色背景

<View>
  <Style> .cls-name { background: red; }</Style>
  <View className="cls-name">
    <Header value="Header" />
  </View>
</View>

示例

使用CSS样式使标题在任务未设置样式时显示为居中并带有蓝色虚线边框

<View>
  <Style> .fancy-border { border: 4px dotted blue; text-align: center; }</Style>
  <View className="fancy-border">
    <Header value="Greatest Task Header of All Time" />
  </View>
  <View>
    <Text name="text" value="$value"/>
    <Choices name="other" toName="text" choice="single">
      <Choice value="Other"/>
      <Choice value="Other2"/>
    </Choices>
  </View>
</View>

示例

使用CSS样式为文本分类任务添加绿色虚线边框，内边距为35像素，为所有文本应用绿色阴影，并将所有文本居中对齐

<View>
<Style> .fancy-choices { outline: 5px dotted green; padding: 35px; text-shadow: 2px 2px green; text-align: center; } </Style>
  <View className="fancy-choices">
    <Text name="text" value="$value"/>
    <Choices name="other" toName="text" choice="single">
      <Choice value="Other"/>
       <Choice value="Other2"/>
    </Choices>
  </View>
</View>

示例

调整Label Studio中的默认CSS样式，为每个单选按钮选项添加绿色实线边框

<View>
<Style>
  .ant-radio-wrapper {border: 2px solid green;}
</Style>
<Choices name="chc" toName="text" choice="single-radio">
  <Choice value="First Choice"/>
  <Choice value="Second Choice"/>
</Choices>
<Text name="text" value="$text"/>
</View>