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. |
.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. |
