Uploading implementation can be overridden by enabling customUpload property and defining a custom uploader handler event.
+
Uploading implementation can be overridden by enabling customUpload property. This sample, displays the image on the client side with a grayscale filter.
- SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
- aria-labelledby property.
-
+
SelectButton component uses ToggleButton internally and has group role. Value to describe the component can be provided via aria-labelledby property.
Keyboard Support
Keyboard interaction is derived from the native browser handling of checkboxs in a group.
@@ -19,25 +16,11 @@
tab
-
Moves focus to the first selected option, if there is none then first option receives the focus.
+
Moves focus to the next the focusable element in the page tab sequence.
-
-
- right arrow
- up arrow
-
-
-
Moves focus to the previous option.
-
-
-
-
- left arrow
- down arrow
-
-
-
Moves focus to the next option.
+
shift + tab
+
Moves focus to the previous the focusable element in the page tab sequence.
space
diff --git a/apps/showcase/doc/styleclass/AnimationDoc.vue b/apps/showcase/doc/styleclass/AnimationDoc.vue
index 1779c9fbf..fc41d165e 100644
--- a/apps/showcase/doc/styleclass/AnimationDoc.vue
+++ b/apps/showcase/doc/styleclass/AnimationDoc.vue
@@ -4,14 +4,30 @@
Classes to apply during enter and leave animations are specified using the enterFromClass, enterActiveClass, enterToClass, leaveFromClass, leaveActiveClass,leaveToClassproperties. In addition in
case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked.
+
First example uses a custom fade animation, and second one uses animate-slide from tailwind-primeui plugin.
+
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+ ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+ qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+
+
+
+
+
+
diff --git a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue b/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
index 43152ba13..16a58c474 100644
--- a/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
+++ b/apps/showcase/doc/theming/styled/csslayer/SpecificityDoc.vue
@@ -4,11 +4,11 @@
The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
MDN to begin with. In styled mode, when the cssLayer option is enabled at theme configuration, PrimeVue wraps the built-in style classes under
the primevue cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is
- written. The cssLayer is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
+ written. The cssLayer is disabled by default to avoid compatibility issues with 3rd party CSS libraries which require a layer configuration for compatibility that is discussed in the next reset section.
For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, .p-toggleswitch .p-toggleswitch-slider selector needs to be overriden. Without
- the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as my-switch-slider.
+ the layers, we'd have to write a stronger css or use !important, however, with layers, this does not present an issue as your CSS can always override PrimeVue with a more straightforward class name such as my-switch-slider.
Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
- The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead. This
+ The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building your own style, building your own preset should be preferred instead. This
configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
- ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props,
- it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
- that does not change related to state.
+ ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props, it is
+ highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
+ does not change related to state.
Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.
- In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node obje to indicate
+ In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node object to indicate
selection.
Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.
- In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node obje to indicate
+ In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node object to indicate
selection.
-