创建自定义布局

布局是一种特殊类型的组件，Swagger UI 将其用作整个应用程序的根组件。您可以定义自定义布局，以便对最终显示在页面上的内容进行高级控制。

默认情况下，Swagger UI 使用内置于应用程序中的 BaseLayout。您可以通过将布局的名称作为 layout 参数传递给 Swagger UI 来指定要使用的不同布局。请确保将您的自定义布局作为组件提供给 Swagger UI。

例如，如果您想创建一个仅显示操作的自定义布局，您可以定义一个 OperationsLayout

import React from "react"

// Create the layout component
class OperationsLayout extends React.Component {
  render() {
    const {
      getComponent
    } = this.props

    const Operations = getComponent("operations", true)

    return (
      <div className="swagger-ui">
        <Operations />
      </div>
    )
  }
}

// Create the plugin that provides our layout component
const OperationsLayoutPlugin = () => {
  return {
    components: {
      OperationsLayout: OperationsLayout
    }
  }
}

// Provide the plugin to Swagger-UI, and select OperationsLayout
// as the layout for Swagger-UI
SwaggerUI({
  url: "https://petstore.swagger.io/v2/swagger.json",
  plugins: [ OperationsLayoutPlugin ],
  layout: "OperationsLayout"
})

增强默认布局

如果您想围绕 BaseLayout 构建而不是替换它，您可以将 BaseLayout 拉入您的自定义布局并使用它

import React from "react"

// Create the layout component
class AugmentingLayout extends React.Component {
  render() {
    const {
      getComponent
    } = this.props

    const BaseLayout = getComponent("BaseLayout", true)

    return (
      <div>
        <div className="myCustomHeader">
          <h1>I have a custom header above Swagger-UI!</h1>
        </div>
        <BaseLayout />
      </div>
    )
  }
}

// Create the plugin that provides our layout component
const AugmentingLayoutPlugin = () => {
  return {
    components: {
      AugmentingLayout: AugmentingLayout
    }
  }
}

// Provide the plugin to Swagger-UI, and select AugmentingLayout
// as the layout for Swagger-UI
SwaggerUI({
  url: "https://petstore.swagger.io/v2/swagger.json",
  plugins: [ AugmentingLayoutPlugin ],
  layout: "AugmentingLayout"
})