Displays

Display groups render individual form inputs and labels for a model attribute on the show page. They are used in the ModelShowDescription component.

The complete list of display group components is below.

Layout

The default layout is vertical. The other layouts are horizontal and floating. Individual fields can be configured to use a different layout by explicitly using the ModelDisplayGroup variant ie <ModelDisplayGroupHorizontal model="blog" path="title".

Global horizontal layout

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelDisplayGroup: ModelDisplayGroupHorizontal
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelDisplayGroup: ModelDisplayGroupHorizontal
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelDisplayGroup: ModelDisplayGroupHorizontal
      }
    }
  }
}

Global floating layout

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelDisplayGroup: ModelDisplayGroupFloating
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelDisplayGroup: ModelDisplayGroupFloating
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelDisplayGroup: ModelDisplayGroupFloating
      }
    }
  }
}

Display behaviour

Change label

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelDisplayGroup: { props: { label: 'Awesome Title!' } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelDisplayGroup: { props: { label: 'Awesome Title!' } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelDisplayGroup: { props: { label: 'Awesome Title!' } }
      }
    }
  }
}

Change enpty placeholder

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelDisplayGroup: { props: { empty: '/' } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelDisplayGroup: { props: { empty: '/' } }
    }
  }
}

Attribute

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      title: {
        ModelDisplayGroup: { props: { empty: '/' } }
      }
    }
  }
}

Component Hierarchy