@gitlab/ui/dist/components/base/collapse/collapse.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# Collapse\n\n<!-- STORY -->\n\n## Usage\n\nCollapse is used to keep pages focused on the overview of what the user can do. Details and additional actions are hidden in the fold, and can be opened if the user wants to interact with those elements.\n\n```html\n<template>\n  <div>\n    <gl-button v-gl-collapse-toggle.collase-id variant=\"primary\">\n      Toggle Collapse\n    </gl-button>\n    <gl-collapse id=\"collase-id\" class=\"gl-mt-3\">\n      <gl-card>\n        <p class=\"card-text\">Collapse contents Here</p>\n      </gl-card>\n    </gl-collapse>\n  </div>\n</template>\n```\n";

var collapse_documentation = {
  description: description,
  examples: examples,
  bootstrapPropsInfo: {
    id: {
      additionalInfo: "Used to set the 'id' attribute on the rendered content, and used as the base to generate any additional element IDs as needed"
    },
    isNav: {
      additionalInfo: 'When set, signifies that the collapse is part of a navbar, enabling certain features for navbar support'
    },
    accordion: {
      additionalInfo: 'The name of the accordion group that this collapse belongs to'
    },
    visible: {
      additionalInfo: "When 'true', expands the collapse"
    },
    tag: {
      additionalInfo: 'Specify the HTML tag to render instead of the default tag'
    }
  },
  slots: [{
    name: 'default',
    description: 'Body of Collapse that should be visible/hidden on state change.'
  }],
  bootstrapComponent: 'b-collapse'
};

export default collapse_documentation;