Mockline v0.19.0

Fields

Components for displaying and grouping properties, parameters, and field documentation.

Overview

The Field components provide a consistent way to document properties, parameters, and fields in your content. They include two main components: Field for individual items and FieldGroup for organizing multiple fields together.

Components

Field Component

The Field component displays individual properties or parameters with their types, requirements, and descriptions.

username
string required

The user's unique identifier. Must be between 3 and 20 characters.

With Default Value

theme
'light' | 'dark'

The color theme for the component. Supports light or dark modes.

With Rich Content

format
string

Supports markdown formatting with:

  • Lists
  • Emphasis
  • code

FieldGroup Component

The FieldGroup component organizes multiple fields into a cohesive list.

name
string required

The name of the configuration.

enabled
boolean

Whether the feature is enabled.

options
object

Additional configuration options.

Props

Field Props

name
string required

The name of the field, property, or parameter.

type
string required

The data type of the field (e.g., string, number, boolean, etc.).

required
boolean

Indicates if the field is required.

default
string

The default value of the field, if any.

class
string

Additional classes to apply to the field container.

FieldGroup Props

class
string

Additional classes to apply to the group container.

Slots

Field Slots

default
any

The description content for the field. Supports Markdown formatting.

FieldGroup Slots

default
any

Container for Field components.

Best Practices

  1. Field Documentation:
    • Use clear and concise names
    • Provide detailed type information
    • Include default values when applicable
    • Write descriptive explanations
  2. Organization:
    • Group related fields together
    • Use consistent formatting
    • Order fields logically (required first)
    • Maintain consistent documentation style
  3. Content Writing:
    • Use markdown for rich formatting
    • Include examples when helpful
    • Document edge cases and limitations
    • Keep descriptions focused and clear
  4. Accessibility:
    • Use proper heading hierarchy
    • Write descriptive field names
    • Ensure color contrast for required indicators
    • Make documentation screen-reader friendly
Introduction
A comprehensive guide to using typography styles and Markdown formatting in Mockline.
Code Preview
A component for displaying live previews of code examples with their source code.