mirror of
https://github.com/Redocly/redoc.git
synced 2025-02-18 10:50:32 +03:00
docs: document theme options (#1438)
This commit is contained in:
parent
040ce72a8a
commit
a5e8e818c8
59
README.md
59
README.md
|
@ -255,9 +255,66 @@ You can use all of the following options with standalone version on <redoc> tag
|
||||||
* `sortPropsAlphabetically` - sort properties alphabetically.
|
* `sortPropsAlphabetically` - sort properties alphabetically.
|
||||||
* `suppressWarnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
|
* `suppressWarnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
|
||||||
* `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0.
|
* `payloadSampleIdx` - if set, payload sample will be inserted at this index or last. Indexes start from 0.
|
||||||
* `theme` - ReDoc theme. Not documented yet. For details check source code: [theme.ts](https://github.com/Redocly/redoc/blob/master/src/theme.ts).
|
* `theme` - ReDoc theme. For details check [theme docs](#redoc-theme-object).
|
||||||
* `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
|
* `untrustedSpec` - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. **Disabled by default** for performance reasons. **Enable this option if you work with untrusted user data!**
|
||||||
|
|
||||||
|
### `<redoc>` theme object
|
||||||
|
* `spacing`
|
||||||
|
* `unit`: 5 # main spacing unit used in autocomputed theme values later
|
||||||
|
* `sectionHorizontal`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
|
||||||
|
* `sectionVertical`: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8
|
||||||
|
* `breakpoints` # breakpoints for switching three/two and mobile view layouts
|
||||||
|
* `small`: '50rem'
|
||||||
|
* `medium`: '85rem'
|
||||||
|
* `large`: '105rem'
|
||||||
|
* `colors`
|
||||||
|
* `tonalOffset`: 0.3 # default tonal offset used in computations
|
||||||
|
* `typography`
|
||||||
|
* `fontSize`: '14px'
|
||||||
|
* `lineHeight`: '1.5em'
|
||||||
|
* `fontWeightRegular`: '400'
|
||||||
|
* `fontWeightBold`: '600'
|
||||||
|
* `fontWeightLight`: '300'
|
||||||
|
* `fontFamily`: 'Roboto, sans-serif'
|
||||||
|
* `smoothing`: 'antialiased'
|
||||||
|
* `optimizeSpeed`: true
|
||||||
|
* `headings`
|
||||||
|
* `fontFamily`: 'Montserrat, sans-serif'
|
||||||
|
* `fontWeight`: '400'
|
||||||
|
* `lineHeight`: '1.6em'
|
||||||
|
* `code` # inline code styling
|
||||||
|
* `fontSize`: '13px'
|
||||||
|
* `fontFamily`: 'Courier, monospace'
|
||||||
|
* `lineHeight`: # COMPUTED: typography.lineHeight
|
||||||
|
* `fontWeight`: # COMPUTED: typography.fontWeightRegular
|
||||||
|
* `color`: '#e53935'
|
||||||
|
* `backgroundColor`: 'rgba(38, 50, 56, 0.05)'
|
||||||
|
* `wrap`: false # whether to break word for inline blocks (otherwise they can overflow)
|
||||||
|
* `links`
|
||||||
|
* `color`: # COMPUTED: colors.primary.main
|
||||||
|
* `visited`: # COMPUTED: typography.links.color
|
||||||
|
* `hover`: # COMPUTED: lighten(0.2 typography.links.color)
|
||||||
|
* `menu`
|
||||||
|
* `width`: '260px'
|
||||||
|
* `backgroundColor`: '#fafafa'
|
||||||
|
* `textColor`: '#333333'
|
||||||
|
* `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main
|
||||||
|
* `groupItems` # Group headings
|
||||||
|
* `textTransform`: 'uppercase'
|
||||||
|
* `level1Items` # Level 1 items like tags or section 1st level items
|
||||||
|
* `textTransform`: 'none'
|
||||||
|
* `arrow` # menu arrow
|
||||||
|
* `size`: '1.5em'
|
||||||
|
* `color`: # COMPUTED: theme.menu.textColor
|
||||||
|
* `logo`
|
||||||
|
* `maxHeight`: # COMPUTED: menu.width
|
||||||
|
* `maxWidth`: # COMPUTED: menu.width
|
||||||
|
* `gutter`: '2px' # logo image padding
|
||||||
|
* `rightPanel`
|
||||||
|
* `backgroundColor`: '#263238'
|
||||||
|
* `width`: '40%'
|
||||||
|
* `textColor`: '#ffffff'
|
||||||
|
|
||||||
## Advanced usage of standalone version
|
## Advanced usage of standalone version
|
||||||
Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
|
Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
|
||||||
```js
|
```js
|
||||||
|
|
Loading…
Reference in New Issue
Block a user