Examples
With optional code editor container
This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.
HTML
Start editing
Drag a file here or browse to upload.
Documentation
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-code-editor | <div> | Initiates the code editor component. Required |
.pf-v6-c-code-editor__header | <div> | Initiates the code editor header used for the controls and tab elements. Required |
.pf-v6-c-code-editor__header-content | <div> | Initiates the code editor header content used for the controls and tab elements. Required |
.pf-v6-c-code-editor__main | <div> | Initiates the main container for a code editor e.g. Monaco Required |
.pf-v6-c-code-editor__code | <div> | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
.pf-v6-c-code-editor__controls | <div> | Initiates the code editor controls. |
.pf-v6-c-code-editor__header-main | <div> | Initiates the code editor header content area. |
.pf-v6-c-code-editor__keyboard-shortcuts | <div> | Initiates the code editor header keyboard shortcuts area. |
.pf-v6-c-code-editor__tab | <div> | Initiates the code editor tab. |
.pf-v6-c-code-editor__tab-text | <span> | Initiates the code editor tab text. |
.pf-v6-c-code-editor__tab-icon | <span> | Initiates the code editor tab icon. |
.pf-v6-c-code-editor__upload | <div> | Initiates the code editor upload border. |
.pf-v6-c-code-editor__container | <div> | Initiates the container used inside .pf-v6-c-code-editor in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state. |
.pf-m-full-height | .pf-v6-c-code-editor | Modifies for full-height style. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__controls--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__controls--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header--before--BorderBlockEndWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header--before--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--BorderStartStartRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-content--BorderStartEndRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--BorderRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--BorderEndStartRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--BorderEndEndRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor--m-read-only__main--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--before--BorderWidth | 0 | ||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__upload--before--BorderColor | transparent | ||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor | var( --pf-t--global--border--color--clicked) | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__main--m-drag-hover--after--Opacity | .1 | ||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code-pre--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__code-pre--FontFamily | "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-main--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__header-main--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--PaddingInlineEnd | var( --pf-t--global--spacer--sm) | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--PaddingInlineStart | var( --pf-t--global--spacer--sm) | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderInlineEndWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderBlockEndWidth | 0 | ||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderInlineStartWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab--BorderStartEndRadius | 16px | ||
| ||||
| .pf-v6-c-code-editor | --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-code-editor.pf-m-read-only | --pf-v6-c-code-editor__main--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-code-editor__header.pf-m-plain | --pf-v6-c-code-editor__header-content--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-code-editor__main.pf-m-drag-hover | --pf-v6-c-code-editor__upload--before--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-code-editor__main.pf-m-drag-hover | --pf-v6-c-code-editor__upload--before--BorderColor | var( --pf-t--global--border--color--clicked) | ||
| ||||