package.docs.components.CodeEditor.examples.CodeEditor.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Code editor
section: components
cssPrefix: pf-v6-c-code-editor
---## Examples

### Default

```html

  
    
      
        
        
        
      
      
    
    
      
        
      
      HTML
    
  
  
    
                      code goes here
      
    
  


```

### Read-only

```html

  
    
      
        
        
        
      
      
    
    
      
        
      
      HTML
    
  
  
    
                      code goes here
      
    
  


```

### Without actions

```html

  
    
    
      
        
      
      YAML
    
  
  
    
      
        
          
            
              
            
            
              Start editing
            
          

          Drag a file here or browse to upload.

          
            
              
            
            
              
            
          
        
      
    
  


```

### Drag file and hover over component

```html

  
    
    
      
        
      
      YAML
    
  
  
    
      
        
          
            
              
            
            
              Start editing
            
          

          Drag a file here or browse to upload.

          
            
              
            
            
              
            
          
        
      
    
  


```

### With optional header content and keyboard shortcuts

```html

  
    
      
        
        
        
      
      Header main content
      
        
      
    
    
      
        
      
      HTML
    
  
  
    
                      code goes here
      
    
  


```

## Documentation

### Usage

| Class                                      | Applied to | Outcome                                                                                       |
| ------------------------------------------ | ---------- | --------------------------------------------------------------------------------------------- |
| `.pf-v6-c-code-editor`                     | ``    | Initiates the code editor component. **Required**                                             |
| `.pf-v6-c-code-editor__header`             | ``    | Initiates the code editor header used for the controls and tab elements. **Required**         |
| `.pf-v6-c-code-editor__header-content`     | ``    | Initiates the code editor header content used for the controls and tab elements. **Required** |
| `.pf-v6-c-code-editor__main`               | ``    | Initiates the main container for a code editor e.g. Monaco **Required**                       |
| `.pf-v6-c-code-editor__code`               | ``    | Initiates the container for code without a JS code editor. Comes with PatternFly styling.     |
| `.pf-v6-c-code-editor__controls`           | ``    | Initiates the code editor controls.                                                           |
| `.pf-v6-c-code-editor__header-main`        | ``    | Initiates the code editor header content area.                                                |
| `.pf-v6-c-code-editor__keyboard-shortcuts` | ``    | Initiates the code editor header keyboard shortcuts area.                                     |
| `.pf-v6-c-code-editor__tab`                | ``    | Initiates the code editor tab.                                                                |
| `.pf-v6-c-code-editor__tab-text`           | ``   | Initiates the code editor tab text.                                                           |
| `.pf-v6-c-code-editor__tab-icon`           | ``   | Initiates the code editor tab icon.                                                           |
| `.pf-v6-c-code-editor__upload`             | ``    | Initiates the code editor upload border.                                                      |