@patternfly/patternfly 4.190.0 → 4.192.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +26 -0
- package/components/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/components/Page/page.css +4 -0
- package/components/Page/page.scss +5 -0
- package/components/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -0
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/components/InputGroup/examples/InputGroup.md +5 -5
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +23 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +617 -1
- package/docs/components/Wizard/examples/Wizard.md +273 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/docs/demos/Wizard/examples/Wizard.md +2626 -240
- package/package.json +1 -1
- package/patternfly-no-reset.css +169 -14
- package/patternfly.css +169 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -3,7 +3,9 @@ id: 'Text input group'
|
|
|
3
3
|
beta: true
|
|
4
4
|
section: components
|
|
5
5
|
cssPrefix: pf-c-text-input-group
|
|
6
|
-
|
|
6
|
+
---import './TextInputGroup.css'
|
|
7
|
+
|
|
8
|
+
## Examples
|
|
7
9
|
|
|
8
10
|
### Basic
|
|
9
11
|
|
|
@@ -516,3 +518,617 @@ cssPrefix: pf-c-text-input-group
|
|
|
516
518
|
</div>
|
|
517
519
|
|
|
518
520
|
```
|
|
521
|
+
|
|
522
|
+
### Search input group
|
|
523
|
+
|
|
524
|
+
```html
|
|
525
|
+
<div class="pf-c-text-input-group">
|
|
526
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
527
|
+
<span class="pf-c-text-input-group__text">
|
|
528
|
+
<span class="pf-c-text-input-group__icon">
|
|
529
|
+
<i class="fas fa-fw fa-search"></i>
|
|
530
|
+
</span>
|
|
531
|
+
<input
|
|
532
|
+
class="pf-c-text-input-group__text-input"
|
|
533
|
+
type="text"
|
|
534
|
+
value
|
|
535
|
+
aria-label="Type to filter"
|
|
536
|
+
placeholder="Find by name"
|
|
537
|
+
/>
|
|
538
|
+
</span>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
### Search input group, no match
|
|
545
|
+
|
|
546
|
+
```html
|
|
547
|
+
<div class="pf-c-text-input-group">
|
|
548
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
549
|
+
<span class="pf-c-text-input-group__text">
|
|
550
|
+
<span class="pf-c-text-input-group__icon">
|
|
551
|
+
<i class="fas fa-fw fa-search"></i>
|
|
552
|
+
</span>
|
|
553
|
+
<input
|
|
554
|
+
class="pf-c-text-input-group__text-input"
|
|
555
|
+
type="text"
|
|
556
|
+
value="Joh"
|
|
557
|
+
aria-label="Type to filter"
|
|
558
|
+
/>
|
|
559
|
+
</span>
|
|
560
|
+
</div>
|
|
561
|
+
<div class="pf-c-text-input-group__utilities">
|
|
562
|
+
<button
|
|
563
|
+
class="pf-c-button pf-m-plain"
|
|
564
|
+
type="button"
|
|
565
|
+
aria-label="Clear input"
|
|
566
|
+
>
|
|
567
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
568
|
+
</button>
|
|
569
|
+
</div>
|
|
570
|
+
</div>
|
|
571
|
+
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
### Search input group, match with result count
|
|
575
|
+
|
|
576
|
+
```html
|
|
577
|
+
<div class="pf-c-text-input-group">
|
|
578
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
579
|
+
<span class="pf-c-text-input-group__text">
|
|
580
|
+
<span class="pf-c-text-input-group__icon">
|
|
581
|
+
<i class="fas fa-fw fa-search"></i>
|
|
582
|
+
</span>
|
|
583
|
+
<input
|
|
584
|
+
class="pf-c-text-input-group__text-input"
|
|
585
|
+
type="text"
|
|
586
|
+
value="John Doe"
|
|
587
|
+
aria-label="Type to filter"
|
|
588
|
+
/>
|
|
589
|
+
</span>
|
|
590
|
+
</div>
|
|
591
|
+
<div class="pf-c-text-input-group__utilities">
|
|
592
|
+
<span class="pf-c-badge pf-m-read">3</span>
|
|
593
|
+
<button
|
|
594
|
+
class="pf-c-button pf-m-plain"
|
|
595
|
+
type="button"
|
|
596
|
+
aria-label="Clear input"
|
|
597
|
+
>
|
|
598
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
599
|
+
</button>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
### Search input group, match with navigable options
|
|
606
|
+
|
|
607
|
+
```html
|
|
608
|
+
<div class="pf-c-text-input-group">
|
|
609
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
610
|
+
<span class="pf-c-text-input-group__text">
|
|
611
|
+
<span class="pf-c-text-input-group__icon">
|
|
612
|
+
<i class="fas fa-fw fa-search"></i>
|
|
613
|
+
</span>
|
|
614
|
+
<input
|
|
615
|
+
class="pf-c-text-input-group__text-input"
|
|
616
|
+
type="text"
|
|
617
|
+
value="John Doe"
|
|
618
|
+
aria-label="Type to filter"
|
|
619
|
+
/>
|
|
620
|
+
</span>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="pf-c-text-input-group__utilities">
|
|
623
|
+
<span class="pf-c-badge pf-m-read">1 / 3</span>
|
|
624
|
+
<div class="pf-c-text-input-group__group">
|
|
625
|
+
<button
|
|
626
|
+
class="pf-c-button pf-m-plain"
|
|
627
|
+
type="button"
|
|
628
|
+
disabled
|
|
629
|
+
aria-label="Next"
|
|
630
|
+
>
|
|
631
|
+
<i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
|
|
632
|
+
</button>
|
|
633
|
+
<button class="pf-c-button pf-m-plain" type="button" aria-label="Next">
|
|
634
|
+
<i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
|
|
635
|
+
</button>
|
|
636
|
+
</div>
|
|
637
|
+
<button
|
|
638
|
+
class="pf-c-button pf-m-plain"
|
|
639
|
+
type="button"
|
|
640
|
+
aria-label="Clear input"
|
|
641
|
+
>
|
|
642
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
643
|
+
</button>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
### Search input group, with submit button
|
|
650
|
+
|
|
651
|
+
```html
|
|
652
|
+
<div class="pf-c-input-group">
|
|
653
|
+
<div class="pf-c-text-input-group">
|
|
654
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
655
|
+
<span class="pf-c-text-input-group__text">
|
|
656
|
+
<span class="pf-c-text-input-group__icon">
|
|
657
|
+
<i class="fas fa-fw fa-search"></i>
|
|
658
|
+
</span>
|
|
659
|
+
<input
|
|
660
|
+
class="pf-c-text-input-group__text-input"
|
|
661
|
+
type="text"
|
|
662
|
+
value
|
|
663
|
+
placeholder="Find by name"
|
|
664
|
+
aria-label="Type to filter"
|
|
665
|
+
/>
|
|
666
|
+
</span>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
670
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
671
|
+
</button>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
### Search input group, advanced search
|
|
677
|
+
|
|
678
|
+
```html
|
|
679
|
+
<div class="pf-c-input-group">
|
|
680
|
+
<div class="pf-c-text-input-group">
|
|
681
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
682
|
+
<span class="pf-c-text-input-group__text">
|
|
683
|
+
<span class="pf-c-text-input-group__icon">
|
|
684
|
+
<i class="fas fa-fw fa-search"></i>
|
|
685
|
+
</span>
|
|
686
|
+
<input
|
|
687
|
+
class="pf-c-text-input-group__text-input"
|
|
688
|
+
type="text"
|
|
689
|
+
value="username:root firstname:ned"
|
|
690
|
+
aria-label="Type to filter"
|
|
691
|
+
/>
|
|
692
|
+
</span>
|
|
693
|
+
</div>
|
|
694
|
+
<div class="pf-c-text-input-group__utilities">
|
|
695
|
+
<button
|
|
696
|
+
class="pf-c-button pf-m-plain"
|
|
697
|
+
type="button"
|
|
698
|
+
aria-label="Clear input"
|
|
699
|
+
>
|
|
700
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
701
|
+
</button>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
<button
|
|
705
|
+
class="pf-c-button pf-m-control"
|
|
706
|
+
type="button"
|
|
707
|
+
aria-expanded="false"
|
|
708
|
+
aria-label="Advanced search"
|
|
709
|
+
>
|
|
710
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
711
|
+
</button>
|
|
712
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
713
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
714
|
+
</button>
|
|
715
|
+
</div>
|
|
716
|
+
|
|
717
|
+
```
|
|
718
|
+
|
|
719
|
+
### Search input group, advanced search expanded
|
|
720
|
+
|
|
721
|
+
```html
|
|
722
|
+
<div class="pf-c-input-group">
|
|
723
|
+
<div class="pf-c-text-input-group">
|
|
724
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
725
|
+
<span class="pf-c-text-input-group__text">
|
|
726
|
+
<span class="pf-c-text-input-group__icon">
|
|
727
|
+
<i class="fas fa-fw fa-search"></i>
|
|
728
|
+
</span>
|
|
729
|
+
<input
|
|
730
|
+
class="pf-c-text-input-group__text-input"
|
|
731
|
+
type="text"
|
|
732
|
+
value="username:root firstname:ned"
|
|
733
|
+
aria-label="Type to filter"
|
|
734
|
+
/>
|
|
735
|
+
</span>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="pf-c-text-input-group__utilities">
|
|
738
|
+
<button
|
|
739
|
+
class="pf-c-button pf-m-plain"
|
|
740
|
+
type="button"
|
|
741
|
+
aria-label="Clear input"
|
|
742
|
+
>
|
|
743
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
744
|
+
</button>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
<button
|
|
748
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
749
|
+
type="button"
|
|
750
|
+
aria-expanded="true"
|
|
751
|
+
aria-label="Advanced search"
|
|
752
|
+
>
|
|
753
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
754
|
+
</button>
|
|
755
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
756
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
757
|
+
</button>
|
|
758
|
+
</div>
|
|
759
|
+
|
|
760
|
+
<div class="pf-c-panel pf-m-raised">
|
|
761
|
+
<div class="pf-c-panel__main">
|
|
762
|
+
<div class="pf-c-panel__main-body">
|
|
763
|
+
<form novalidate class="pf-c-form">
|
|
764
|
+
<div class="pf-c-form__group">
|
|
765
|
+
<div class="pf-c-form__group-label">
|
|
766
|
+
<label
|
|
767
|
+
class="pf-c-form__label"
|
|
768
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
769
|
+
>
|
|
770
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
771
|
+
</label>
|
|
772
|
+
</div>
|
|
773
|
+
<div class="pf-c-form__group-control">
|
|
774
|
+
<input
|
|
775
|
+
class="pf-c-form-control"
|
|
776
|
+
type="text"
|
|
777
|
+
value="root"
|
|
778
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
779
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-username"
|
|
780
|
+
/>
|
|
781
|
+
</div>
|
|
782
|
+
</div>
|
|
783
|
+
<div class="pf-c-form__group">
|
|
784
|
+
<div class="pf-c-form__group-label">
|
|
785
|
+
<label
|
|
786
|
+
class="pf-c-form__label"
|
|
787
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
788
|
+
>
|
|
789
|
+
<span class="pf-c-form__label-text">First name</span>
|
|
790
|
+
</label>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="pf-c-form__group-control">
|
|
793
|
+
<input
|
|
794
|
+
class="pf-c-form-control"
|
|
795
|
+
type="text"
|
|
796
|
+
value="ned"
|
|
797
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
798
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-firstname"
|
|
799
|
+
/>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
<div class="pf-c-form__group">
|
|
803
|
+
<div class="pf-c-form__group-label">
|
|
804
|
+
<label
|
|
805
|
+
class="pf-c-form__label"
|
|
806
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
807
|
+
>
|
|
808
|
+
<span class="pf-c-form__label-text">Group</span>
|
|
809
|
+
</label>
|
|
810
|
+
</div>
|
|
811
|
+
<div class="pf-c-form__group-control">
|
|
812
|
+
<input
|
|
813
|
+
class="pf-c-form-control"
|
|
814
|
+
type="text"
|
|
815
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
816
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-group"
|
|
817
|
+
/>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
<div class="pf-c-form__group">
|
|
821
|
+
<div class="pf-c-form__group-label">
|
|
822
|
+
<label
|
|
823
|
+
class="pf-c-form__label"
|
|
824
|
+
for="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
825
|
+
>
|
|
826
|
+
<span class="pf-c-form__label-text">Email</span>
|
|
827
|
+
</label>
|
|
828
|
+
</div>
|
|
829
|
+
<div class="pf-c-form__group-control">
|
|
830
|
+
<input
|
|
831
|
+
class="pf-c-form-control"
|
|
832
|
+
type="text"
|
|
833
|
+
id="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
834
|
+
name="text-input-group-advanced-search-input-expanded-legacy-form-example-email"
|
|
835
|
+
/>
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="pf-c-form__group pf-m-action">
|
|
839
|
+
<div class="pf-c-form__actions">
|
|
840
|
+
<button class="pf-c-button pf-m-primary" type="submit">Submit</button>
|
|
841
|
+
<button class="pf-c-button pf-m-link" type="reset">Reset</button>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
</form>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
|
|
849
|
+
```
|
|
850
|
+
|
|
851
|
+
### Search input group, autocomplete
|
|
852
|
+
|
|
853
|
+
```html
|
|
854
|
+
<div class="pf-c-text-input-group">
|
|
855
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
856
|
+
<span class="pf-c-text-input-group__text">
|
|
857
|
+
<span class="pf-c-text-input-group__icon">
|
|
858
|
+
<i class="fas fa-fw fa-search"></i>
|
|
859
|
+
</span>
|
|
860
|
+
<input
|
|
861
|
+
class="pf-c-text-input-group__text-input"
|
|
862
|
+
type="text"
|
|
863
|
+
value="app"
|
|
864
|
+
aria-label="Type to filter"
|
|
865
|
+
/>
|
|
866
|
+
</span>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="pf-c-text-input-group__utilities">
|
|
869
|
+
<button
|
|
870
|
+
class="pf-c-button pf-m-plain"
|
|
871
|
+
type="button"
|
|
872
|
+
aria-label="Clear input"
|
|
873
|
+
>
|
|
874
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
875
|
+
</button>
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
|
|
879
|
+
<div class="pf-c-menu">
|
|
880
|
+
<div class="pf-c-menu__content">
|
|
881
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
882
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
883
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
884
|
+
<span class="pf-c-menu__item-main">
|
|
885
|
+
<span class="pf-c-menu__item-text">apple</span>
|
|
886
|
+
</span>
|
|
887
|
+
</button>
|
|
888
|
+
</li>
|
|
889
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
890
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
891
|
+
<span class="pf-c-menu__item-main">
|
|
892
|
+
<span class="pf-c-menu__item-text">appleby</span>
|
|
893
|
+
</span>
|
|
894
|
+
</button>
|
|
895
|
+
</li>
|
|
896
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
897
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
898
|
+
<span class="pf-c-menu__item-main">
|
|
899
|
+
<span class="pf-c-menu__item-text">appleseed</span>
|
|
900
|
+
</span>
|
|
901
|
+
</button>
|
|
902
|
+
</li>
|
|
903
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
904
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
905
|
+
<span class="pf-c-menu__item-main">
|
|
906
|
+
<span class="pf-c-menu__item-text">appleton</span>
|
|
907
|
+
</span>
|
|
908
|
+
</button>
|
|
909
|
+
</li>
|
|
910
|
+
</ul>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
|
|
914
|
+
```
|
|
915
|
+
|
|
916
|
+
### Search input group, autocomplete last option hint
|
|
917
|
+
|
|
918
|
+
```html
|
|
919
|
+
<div class="pf-c-text-input-group">
|
|
920
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
921
|
+
<span class="pf-c-text-input-group__text">
|
|
922
|
+
<span class="pf-c-text-input-group__icon">
|
|
923
|
+
<i class="fas fa-fw fa-search"></i>
|
|
924
|
+
</span>
|
|
925
|
+
<input
|
|
926
|
+
class="pf-c-text-input-group__text-input pf-m-hint"
|
|
927
|
+
type="text"
|
|
928
|
+
value="appleseed"
|
|
929
|
+
disabled
|
|
930
|
+
aria-hidden="true"
|
|
931
|
+
/>
|
|
932
|
+
<input
|
|
933
|
+
class="pf-c-text-input-group__text-input"
|
|
934
|
+
type="text"
|
|
935
|
+
value="apples"
|
|
936
|
+
aria-label="Type to filter"
|
|
937
|
+
/>
|
|
938
|
+
</span>
|
|
939
|
+
</div>
|
|
940
|
+
<div class="pf-c-text-input-group__utilities">
|
|
941
|
+
<button
|
|
942
|
+
class="pf-c-button pf-m-plain"
|
|
943
|
+
type="button"
|
|
944
|
+
aria-label="Clear input"
|
|
945
|
+
>
|
|
946
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
947
|
+
</button>
|
|
948
|
+
</div>
|
|
949
|
+
</div>
|
|
950
|
+
|
|
951
|
+
<div class="pf-c-menu">
|
|
952
|
+
<div class="pf-c-menu__content">
|
|
953
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
954
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
955
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
956
|
+
<span class="pf-c-menu__item-main">
|
|
957
|
+
<span class="pf-c-menu__item-text">appleseed</span>
|
|
958
|
+
</span>
|
|
959
|
+
</button>
|
|
960
|
+
</li>
|
|
961
|
+
</ul>
|
|
962
|
+
</div>
|
|
963
|
+
</div>
|
|
964
|
+
|
|
965
|
+
```
|
|
966
|
+
|
|
967
|
+
### Search input group, advanced search expanded with autocomplete
|
|
968
|
+
|
|
969
|
+
```html
|
|
970
|
+
<div class="ws-example-wrapper">
|
|
971
|
+
<div class="pf-c-input-group">
|
|
972
|
+
<div class="pf-c-text-input-group">
|
|
973
|
+
<div class="pf-c-text-input-group__main pf-m-icon">
|
|
974
|
+
<span class="pf-c-text-input-group__text">
|
|
975
|
+
<span class="pf-c-text-input-group__icon">
|
|
976
|
+
<i class="fas fa-fw fa-search"></i>
|
|
977
|
+
</span>
|
|
978
|
+
<input
|
|
979
|
+
class="pf-c-text-input-group__text-input"
|
|
980
|
+
type="text"
|
|
981
|
+
value="username:root firstname:n"
|
|
982
|
+
aria-label="Type to filter"
|
|
983
|
+
/>
|
|
984
|
+
</span>
|
|
985
|
+
</div>
|
|
986
|
+
<div class="pf-c-text-input-group__utilities">
|
|
987
|
+
<button
|
|
988
|
+
class="pf-c-button pf-m-plain"
|
|
989
|
+
type="button"
|
|
990
|
+
aria-label="Clear input"
|
|
991
|
+
>
|
|
992
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
993
|
+
</button>
|
|
994
|
+
</div>
|
|
995
|
+
</div>
|
|
996
|
+
<button
|
|
997
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
998
|
+
type="button"
|
|
999
|
+
aria-expanded="true"
|
|
1000
|
+
aria-label="Advanced search"
|
|
1001
|
+
>
|
|
1002
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1003
|
+
</button>
|
|
1004
|
+
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
1005
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
1006
|
+
</button>
|
|
1007
|
+
</div>
|
|
1008
|
+
|
|
1009
|
+
<div class="pf-c-panel pf-m-raised">
|
|
1010
|
+
<div class="pf-c-panel__main">
|
|
1011
|
+
<div class="pf-c-panel__main-body">
|
|
1012
|
+
<form novalidate class="pf-c-form">
|
|
1013
|
+
<div class="pf-c-form__group">
|
|
1014
|
+
<div class="pf-c-form__group-label">
|
|
1015
|
+
<label
|
|
1016
|
+
class="pf-c-form__label"
|
|
1017
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1018
|
+
>
|
|
1019
|
+
<span class="pf-c-form__label-text">Username</span>
|
|
1020
|
+
</label>
|
|
1021
|
+
</div>
|
|
1022
|
+
<div class="pf-c-form__group-control">
|
|
1023
|
+
<input
|
|
1024
|
+
class="pf-c-form-control"
|
|
1025
|
+
type="text"
|
|
1026
|
+
value="root"
|
|
1027
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1028
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-username"
|
|
1029
|
+
/>
|
|
1030
|
+
</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
<div class="pf-c-form__group">
|
|
1033
|
+
<div class="pf-c-form__group-label">
|
|
1034
|
+
<label
|
|
1035
|
+
class="pf-c-form__label"
|
|
1036
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1037
|
+
>
|
|
1038
|
+
<span class="pf-c-form__label-text">First name</span>
|
|
1039
|
+
</label>
|
|
1040
|
+
</div>
|
|
1041
|
+
<div class="pf-c-form__group-control">
|
|
1042
|
+
<input
|
|
1043
|
+
class="pf-c-form-control"
|
|
1044
|
+
type="text"
|
|
1045
|
+
value="ned"
|
|
1046
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1047
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-firstname"
|
|
1048
|
+
/>
|
|
1049
|
+
</div>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="pf-c-form__group">
|
|
1052
|
+
<div class="pf-c-form__group-label">
|
|
1053
|
+
<label
|
|
1054
|
+
class="pf-c-form__label"
|
|
1055
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1056
|
+
>
|
|
1057
|
+
<span class="pf-c-form__label-text">Group</span>
|
|
1058
|
+
</label>
|
|
1059
|
+
</div>
|
|
1060
|
+
<div class="pf-c-form__group-control">
|
|
1061
|
+
<input
|
|
1062
|
+
class="pf-c-form-control"
|
|
1063
|
+
type="text"
|
|
1064
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1065
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-group"
|
|
1066
|
+
/>
|
|
1067
|
+
</div>
|
|
1068
|
+
</div>
|
|
1069
|
+
<div class="pf-c-form__group">
|
|
1070
|
+
<div class="pf-c-form__group-label">
|
|
1071
|
+
<label
|
|
1072
|
+
class="pf-c-form__label"
|
|
1073
|
+
for="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1074
|
+
>
|
|
1075
|
+
<span class="pf-c-form__label-text">Email</span>
|
|
1076
|
+
</label>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="pf-c-form__group-control">
|
|
1079
|
+
<input
|
|
1080
|
+
class="pf-c-form-control"
|
|
1081
|
+
type="text"
|
|
1082
|
+
id="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1083
|
+
name="text-input-group-advanced-search-input-form-with-autocomplete-example-email"
|
|
1084
|
+
/>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
<div class="pf-c-form__group pf-m-action">
|
|
1088
|
+
<div class="pf-c-form__actions">
|
|
1089
|
+
<button class="pf-c-button pf-m-primary" type="submit">Submit</button>
|
|
1090
|
+
<button class="pf-c-button pf-m-link" type="reset">Reset</button>
|
|
1091
|
+
</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
</form>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
|
|
1098
|
+
<div class="pf-c-menu">
|
|
1099
|
+
<div class="pf-c-menu__content">
|
|
1100
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1101
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1102
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1103
|
+
<span class="pf-c-menu__item-main">
|
|
1104
|
+
<span class="pf-c-menu__item-text">nancy</span>
|
|
1105
|
+
</span>
|
|
1106
|
+
</button>
|
|
1107
|
+
</li>
|
|
1108
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1109
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1110
|
+
<span class="pf-c-menu__item-main">
|
|
1111
|
+
<span class="pf-c-menu__item-text">ned</span>
|
|
1112
|
+
</span>
|
|
1113
|
+
</button>
|
|
1114
|
+
</li>
|
|
1115
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1116
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1117
|
+
<span class="pf-c-menu__item-main">
|
|
1118
|
+
<span class="pf-c-menu__item-text">neil</span>
|
|
1119
|
+
</span>
|
|
1120
|
+
</button>
|
|
1121
|
+
</li>
|
|
1122
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1123
|
+
<button class="pf-c-menu__item" type="button" role="menuitem">
|
|
1124
|
+
<span class="pf-c-menu__item-main">
|
|
1125
|
+
<span class="pf-c-menu__item-text">nicole</span>
|
|
1126
|
+
</span>
|
|
1127
|
+
</button>
|
|
1128
|
+
</li>
|
|
1129
|
+
</ul>
|
|
1130
|
+
</div>
|
|
1131
|
+
</div>
|
|
1132
|
+
</div>
|
|
1133
|
+
|
|
1134
|
+
```
|