A2InfoField

Information display field component with icon + label + value layout. Supports multiple value style variants.

Props

Property	Type	Default	Description
label	string	-	Label text
modelValue	string	-	Display value
icon	string	-	Icon name (Element Plus icon) or image URL
variant	`tag	text	quote`
size	`large	default`	default
bgColor	string	-	Row background color (auto edge-to-edge when set)

Variant Reference

Variant	Effect
text	Plain text style
tag	Blue tag style (bg #EFF4FF, text #2260FA)
quote	Gray quote block style (bg #F5F7FA, radius 8px)

Basic Example

Basic Info Field

{ "id": "field1", "type": "a2-info-field", "props": { "label": "System Name", "modelValue": "GOMS" } }

无内容

Tag Variant Example

Tag Style

{ "id": "tagField", "type": "a2-info-field", "props": { "label": "Module", "modelValue": "Order Management", "variant": "tag" } }

无内容

Quote Variant Example

Quote Block Style

{ "id": "quoteField", "type": "a2-info-field", "props": { "label": "Question", "modelValue": "This is a question description...", "variant": "quote" } }

无内容

With Icon Example

Info Field with Icon

{ "id": "iconField", "type": "a2-info-field", "props": { "label": "System Name", "modelValue": "GOMS", "icon": "Monitor" } }

无内容

JSON Schema

{
  "id": "infoFieldId",
  "type": "a2-info-field",
  "props": {
    "label": "Label Name",
    "modelValue": "Display Value",
    "variant": "tag",
    "icon": "Monitor",
    "size": "default",
    "bgColor": "#F8F8FB"
  }
}