• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• Toolbar.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.docs.demos.Toolbar.examples.Toolbar.md Maven / Gradle / Ivy

---
id: Toolbar
section: components
---import './Toolbar.css'

## Demos

### Toolbar attribute value search filter on desktop

```html

  

    

      

        

          
            
              
            
          
        
        

          

            

              
                Name
                
                  
                    
                  
                
              
            
            

              

                

                  
                    
                      
                    
                    
                  
                
              
            
          
        
      

      

        

          

            

              

                
                  Primary
                
              
              

                
                  Secondary
                
              
            
          
          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    
  


```

### Toolbar with validation on desktop

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              

                

                  

                    
                      
                        
                      
                    
                  

                  

                    

                      

                        

                          
                            Last month
                            
                              
                                
                              
                            
                          
                        
                        

                          

                            

                              

                                
                                  
                                
                                
                                  
                                    
                                  
                                
                              
                            
                            

                              

                                

                                  MM/DD/YYYY
                                
                              
                            
                          
                        
                        

                          

                            

                              

                                
                                  
                                  
                                    
                                      
                                    
                                  
                                
                                
                                  
                                    
                                  
                                
                              
                              

                            
                            

                              

                                

                                  Max: 08/10/2022
                                
                              
                            
                          
                        
                      
                    
                  

                  

                    

                      

                        
                          Name
                          
                            
                              
                            
                          
                        
                      
                      

                        

                          

                            
                              
                                
                              
                              
                            
                          
                        
                      
                    
                  
                

                
                  Download
                
              

              
            
          
        
        

          

            

              

                

                  Row select
                

                
Repositories

                
Branches

                
Pull requests

                
Workspaces

                
Last commit

                

                  Actions
                

                

                  Actions
                
              
            

            

              

                

                  
                    
                  
                

                

                  

                    
Node 1
                    siemur/test-space
                  
                

                

                  
                     10
                  
                
                

                  
                     25
                  
                
                

                  
                     5
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 2
                    siemur/test-space
                  
                

                

                  
                     8
                  
                
                

                  
                     30
                  
                
                

                  
                     2
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 3
                    siemur/test-space
                  
                

                

                  
                     12
                  
                
                

                  
                     48
                  
                
                

                  
                     13
                  
                
                
30 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 4
                    siemur/test-space
                  
                

                

                  
                     3
                  
                
                

                  
                     8
                  
                
                

                  
                     20
                  
                
                
8 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 5
                    siemur/test-space
                  
                
                

                  
                     34
                  
                
                

                  
                     21
                  
                
                

                  
                     26
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              
            
          
        
      
    
  


```

### Toolbar attribute value search filter on mobile

```html

  

    

      

        

          
            
              
            
          
        
        

          

            

              
                Name
                
                  
                    
                  
                
              
            
            

              

                

                  
                    
                      
                    
                    
                  
                
              
            
          
        

        

          

            
              Status
              
                
                  
                
              
            
          
          

            
              Risk
              
                
                  
                
              
            
          
        
      

      

        

          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    

      

        

          

            
              Name
              
                
                  
                
              
            
          
          

            

              

                
                  
                    
                  
                  
                
              
            
          
        
      
    
  


```

### Toolbar attribute value single select filter on desktop

```html

  

    

      

        

          
            Status
            
              
                
              
            
          
        
        

          
            Risk
            
              
                
              
            
          
        
      

      

        

          

            

              

                
                  Primary
                
              
              

                
                  Secondary
                
              
            
          
          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    
  


```

### Toolbar attribute value single select filter on mobile

```html

  

    

      

        

          
            
              
            
          
        
        

          

            

              
                Name
                
                  
                    
                  
                
              
            
            

              

                

                  
                    
                      
                    
                    
                  
                
              
            
          
        

        

          

            
              Status
              
                
                  
                
              
            
          
          

            
              Risk
              
                
                  
                
              
            
          
        
      

      

        

          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    

      

        

          
            Status
            
              
                
              
            
          
        
        

          
            Risk
            
              
                
              
            
          
        
      
    
  


```

### Toolbar attribute value checkbox menu toggle filter on desktop

```html

  

    

      

        

          
            Status
            
              
                
              
            
          
        
        

          
            Risk
            
              
                
              
            
          
        
      

      

        

          

            

              

                
                  Primary
                
              
              

                
                  Secondary
                
              
            
          
          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    
  
  

    

      

        

          

            

              Status
              

                

                  
                    
                      
                        Label one
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
                

                  
                    
                      
                        Label two
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
                

                  
                    
                      
                        Label three
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
              
            
          
        
        

          

            

              Risk
              

                

                  
                    
                      
                        Label one
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
                

                  
                    
                      
                        Label two
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
                

                  
                    
                      
                        Label three
                      
                      
                        
                          
                            
                          
                        
                      
                    
                  
                
              
            
          
        
      
    

    

      
6 filters applied
      

        
          Clear all filters
        
      
      

        
          Save all filters
        
      
    
  


```

### Toolbar attribute value checkbox menu toggle filter on mobile

```html

  

    

      

        

          
            
              
            
          
        
        

          

            

              
                Name
                
                  
                    
                  
                
              
            
            

              

                

                  
                    
                      
                    
                    
                  
                
              
            
          
        

        

          

            
              Status
              
                
                  
                
              
            
          
          

            
              Risk
              
                
                  
                
              
            
          
        
      

      

        

          

            
              
                
              
            
          
        
      
      

        

          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    

    

      

        

          
            Status
            
              
                
              
            
          
        
        

          
            Risk
            
              
                
              
            
          
        
      

      

        

          

            

              

                Status
                

                  

                    
                      
                        
                          Label one
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                  

                    
                      
                        
                          Label two
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                  

                    
                      
                        
                          Label three
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                
              
            
          
          

            

              

                Risk
                

                  

                    
                      
                        
                          Label one
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                  

                    
                      
                        
                          Label two
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                  

                    
                      
                        
                          Label three
                        
                        
                          
                            
                              
                            
                          
                        
                      
                    
                  
                
              
            
          
        
      

      

        
6 filters applied
        

          
            Clear all filters
          
        
        

          
            Save all filters
          
        
      
    
  


```

### Toolbar pagination management on mobile

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              

                

                  

                    
                      
                        
                      
                    
                  
                  

                    

                      

                        
                          Name
                          
                            
                              
                            
                          
                        
                      
                      

                        

                          

                            
                              
                                
                              
                              
                            
                          
                        
                      
                    
                  
                

                

                  

                    

                      
                        
                          
                        
                      
                    
                  
                
                

                  

                    

                      

                        
                          
                            1 - 10 of 
                            36
                          
                          
                            
                              
                            
                          
                        
                      
                      
                    
                  
                
              

              
            
          
        
        

          

            

              

                

                  Row select
                

                
Repositories

                
Branches

                
Pull requests

                
Workspaces

                
Last commit

                

                  Actions
                

                

                  Actions
                
              
            

            

              

                

                  
                    
                  
                

                

                  

                    
Node 1
                    siemur/test-space
                  
                

                

                  
                     10
                  
                
                

                  
                     25
                  
                
                

                  
                     5
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 2
                    siemur/test-space
                  
                

                

                  
                     8
                  
                
                

                  
                     30
                  
                
                

                  
                     2
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 3
                    siemur/test-space
                  
                

                

                  
                     12
                  
                
                

                  
                     48
                  
                
                

                  
                     13
                  
                
                
30 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 4
                    siemur/test-space
                  
                

                

                  
                     3
                  
                
                

                  
                     8
                  
                
                

                  
                     20
                  
                
                
8 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              

              

                

                  
                    
                  
                

                

                  

                    
Node 5
                    siemur/test-space
                  
                
                

                  
                     34
                  
                
                

                  
                     21
                  
                
                

                  
                     26
                  
                
                
2 days ago
                

                  Action link
                

                

                  
                    
                      
                    
                  
                
              
            
          
          

            

              
                
                  1 - 10 of 
                  36
                
                
                  
                    
                  
                
              
            
            
          
        
      
    
  


```