%PDF- %PDF-
Direktori : /var/www/html/shaban/duassis/api/vendor/swagger-api/swagger-ui/docs/customization/ |
Current File : //var/www/html/shaban/duassis/api/vendor/swagger-api/swagger-ui/docs/customization/custom-layout.md |
# Creating a custom layout **Layouts** are a special type of component that Swagger UI uses as the root component for the entire application. You can define custom layouts in order to have high-level control over what ends up on the page. By default, Swagger UI uses `BaseLayout`, which is built into the application. You can specify a different layout to be used by passing the layout's name as the `layout` parameter to Swagger UI. Be sure to provide your custom layout as a component to Swagger UI. <br> For example, if you wanted to create a custom layout that only displayed operations, you could define an `OperationsLayout`: ```js 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> <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" }) ``` ### Augmenting the default layout If you'd like to build around the `BaseLayout` instead of replacing it, you can pull the `BaseLayout` into your custom layout and use it: ```js 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" }) ```