Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
Horizontal file upload status expanded
Drag and drop files here
or
Accepted file types: JPEG, Doc, PDF, PNG
Documentation
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-c-multiple-file-upload | <div> | Initiates the multiple file upload component. Required |
.pf-c-multiple-file-upload__main | <div> | Defines the main section. |
.pf-c-multiple-file-upload__title | <div> | Defines the title. |
.pf-c-multiple-file-upload__title-icon | <div> | Defines the title icon. |
.pf-c-multiple-file-upload__title-text | <div> | Defines the title text. |
.pf-c-multiple-file-upload__title-text-separator | <div> | Defines the title text separator. |
.pf-c-multiple-file-upload__upload | <div> | Defines the upload button. |
.pf-c-multiple-file-upload__info | <div> | Defines the info section. |
.pf-c-multiple-file-upload__status | <div> | Defines the status section. |
.pf-c-multiple-file-upload__status-progress | <div> | Defines the status toggle progress. |
.pf-c-multiple-file-upload__status-progress-icon | <div> | Defines the status toggle progress icon. |
.pf-c-multiple-file-upload__status-progress-text | <div> | Defines the status toggle progress text. |
.pf-c-multiple-file-upload__status-list | <div> | Defines the status item list. |
.pf-c-multiple-file-upload__status-item | <div> | Defines a status item. |
.pf-c-multiple-file-upload__status-item-icon | <div> | Defines the status item icon. |
.pf-c-multiple-file-upload__status-item-main | <div> | Defines the status item main progress section. |
.pf-c-multiple-file-upload__status-item-close | <div> | Defines the status item close button. |
.pf-c-multiple-file-upload__status-item-progress | <div> | Defines the status item progress description. |
.pf-c-multiple-file-upload__status-item-progress-text | <div> | Defines the status item progress description text. |
.pf-c-multiple-file-upload__status-item-progress-size | <div> | Defines the status item progress description size. |
CSS variables
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--GridTemplateColumns | 1fr | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--Gap | 1.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--TextAlign | center | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--GridTemplateColumns | auto | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--GridTemplateRows | auto | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--GridTemplateAreas | "title"
"upload"
"info" | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--Gap | 1rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--PaddingTop | 1.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--PaddingRight | 1.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--PaddingBottom | 2rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--PaddingLeft | 1.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--BorderWidth | 1px | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--BorderStyle | dashed | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--BorderColor | #d2d2d2 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__main--BackgroundColor | #fff | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title--Display | grid | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title--GridTemplateColumns | auto | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title--Gap | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title-icon--Color | #6a6e73 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title-text-separator--Display | block | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__title-text-separator--MarginTop | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__info--FontSize | 0.875rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__info--Color | #6a6e73 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__info--MarginTop | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle | solid | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main--BorderColor | #06c | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor | #e7f1fa | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color | #06c | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color | #06c | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-drag-over__main__info--Color | #06c | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns | fit-content(100%) | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__main--TextAlign | left | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns | 1fr auto | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas | "title upload"
"info upload" | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__main--Gap | 0.5rem 3rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom | 1.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns | auto 1fr | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__title--Gap | 0.25rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display | inline | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop | 0 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload--m-horizontal__info--MarginTop | 0 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-progress--GridTemplateColumns | auto 1fr | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-progress--Gap | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-progress-icon--Color | #6a6e73 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--PaddingTop | 1rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--PaddingBottom | 1rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--first-child--PaddingTop | 0 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--GridTemplateColumns | auto 1fr auto | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--Gap | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--BorderWidth | 1px | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item--BorderColor | #d2d2d2 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-icon--Color | #6a6e73 | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-close--MarginTop | calc(0.375rem * -1) | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns | fit-content(100%) max-content | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-progress--Gap | 0.5rem | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-progress-text--Color | #06c | |
| .pf-c-multiple-file-upload | --pf-c-multiple-file-upload__status-item-progress-size--Color | #6a6e73 | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload--GridTemplateColumns | fit-content(100%) | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__main--TextAlign | left | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__main--GridTemplateColumns | 1fr auto | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__main--GridTemplateAreas | "title upload"
"info upload" | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__main--Gap | 0.5rem 3rem | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__main--PaddingBottom | 1.5rem | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__title--GridTemplateColumns | auto 1fr | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__title--Gap | 0.25rem | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__title-text-separator--Display | inline | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__title-text-separator--MarginTop | 0 | |
| .pf-c-multiple-file-upload.pf-m-horizontal | --pf-c-multiple-file-upload__info--MarginTop | 0 | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__main--BorderStyle | solid | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__main--BorderColor | #06c | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__main--BackgroundColor | #e7f1fa | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__title-icon--Color | #06c | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__title-text--Color | #06c | |
| .pf-c-multiple-file-upload.pf-m-drag-over | --pf-c-multiple-file-upload__info--Color | #06c | |
| .pf-c-multiple-file-upload__status-item:first-child | --pf-c-multiple-file-upload__status-item--PaddingTop | 0 | |
View source on GitHub
