kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(installation): provide full example of unpkg usage (#7832)

Browse Source 
Refs #7709
This commit is contained in:
Vladimir Gorej
2022-02-09 11:07:33 +01:00
committed by GitHub
parent 9813b14544
commit 8158d7e394
1 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/usage/installation.md
View File

@@ -87,11 +87,70 @@ For more information on controlling Swagger UI through the Docker image, see the
### unpkg ### unpkg
You can embed Swagger UI's code directly in your HTML by using unpkg's interface: You can embed Swagger UI's code directly in your HTML by using [unpkg's](https://unpkg.com/) interface:
```html ```html
<script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js" charset="UTF-8"></script> <!DOCTYPE html>
<!-- `SwaggerUIBundle` is now available on the page --> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
window.onload = () => {
window.ui = SwaggerUIBundle({
url: 'https://petstore3.swagger.io/api/v3/openapi.json',
dom_id: '#swagger-ui',
});
};
</script>
</body>
</html>
```
Using `StandalonePreset` will render `TopBar` and `ValidatorBadge` as well.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script src="https://unpkg.com/swagger-ui-dist@4.5.0/swagger-ui-standalone-preset.js" crossorigin></script>
<script>
window.onload = () => {
window.ui = SwaggerUIBundle({
url: 'https://petstore3.swagger.io/api/v3/openapi.json',
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
layout: "StandaloneLayout",
});
};
</script>
</body>
</html>
``` ```
See [unpkg's main page](https://unpkg.com/) for more information on how to use unpkg. See [unpkg's main page](https://unpkg.com/) for more information on how to use unpkg.