From 945880e99a7690cbafaf58c09e8ed32cf0a55e2d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 31 Aug 2021 10:44:06 +0300 Subject: [PATCH] Docs for Image --- src/components/image/Image.d.ts | 5 + src/views/image/ImageDemo.vue | 2 +- src/views/image/ImageDoc.vue | 311 ++++++++++---------------------- 3 files changed, 97 insertions(+), 221 deletions(-) diff --git a/src/components/image/Image.d.ts b/src/components/image/Image.d.ts index 539276c9d..e1aa4cbfd 100644 --- a/src/components/image/Image.d.ts +++ b/src/components/image/Image.d.ts @@ -1,9 +1,14 @@ +import { VNode } from 'vue'; + interface ImageProps { preview?: boolean; } declare class Image { $props: ImageProps; + $slots: { + indicator: VNode[]; + } } export default Image; diff --git a/src/views/image/ImageDemo.vue b/src/views/image/ImageDemo.vue index b52dd1dd7..142d1a47b 100644 --- a/src/views/image/ImageDemo.vue +++ b/src/views/image/ImageDemo.vue @@ -14,7 +14,7 @@ Image
Preview
- Image + Image diff --git a/src/views/image/ImageDoc.vue b/src/views/image/ImageDoc.vue index 0211b9aba..d98c9e7c1 100644 --- a/src/views/image/ImageDoc.vue +++ b/src/views/image/ImageDoc.vue @@ -7,81 +7,28 @@ import Image from 'primevue/image';
Getting Started
-

A model can be bound using the standard v-model directive.

+

Image is used as the native img element and supports all properties that the native element has.


-<InputText type="text" v-model="value" />
+<Image src="image1.png" alt="Image Text" />
-
Float Label
-

A floating label is implemented by wrapping the input and the label inside a container having .p-float-label style class.

+
Preview
+

Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.

+ +
Indicator Templating
+

An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.


-<span class="p-float-label">
-	<InputText id="username" type="text" v-model="value" />
-	<label for="username">Username</label>
-</span>
-
-
- -
Icons
-

An icon can be integrated within an input field by wrapping the input and the icon with an element having p-input-icon-right - and p-input-icon-left classes depending on the icon location.

-

-<span class="p-input-icon-left">
-    <i class="pi pi-search" />
-    <InputText type="text" v-model="value1" placeholder="Search" />
-</span>
-
-<span class="p-input-icon-right">
-    <InputText type="text" v-model="value2" />
-    <i class="pi pi-spin pi-spinner" />
-</span>
-
-<span class="p-input-icon-left p-input-icon-right">
-    <i class="pi pi-search" />
-    <InputText type="text" v-model="value3" />
-    <i class="pi pi-spin pi-spinner" />
-</span>
-
-
- -
Sizes
-

2 more sizes are available in addition to a regular input, for a smaller input add p-inputtext-sm and for a larger one, use p-inputtext-lg. - Note that these classes are mainly be used to change the size of a particular field, for global scaling see the theming page.

-

-<InputText type="text" class="p-inputtext-sm" placeholder="Small" />
-<InputText type="text" placeholder="Normal" />
-<InputText type="text" class="p-inputtext-lg"  placeholder="Large" />
-
-
- -

Instead of repeating the scale classes for each input, sizing can also be applied to a group by adding the - class to a container element so that descendant inputs share the same style easier.

-

-<div class="p-inputtext-sm">
-    <InputText />
-    <InputNumber />
-    <InputMask />
-</div>
-
-
- -
Outlined vs Filled
-

Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color - to the field. Applying p-input-filled to an ancestor of an input enables the filled style. If you prefer - to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.

- -

-<div class="p-input-filled">
-    <InputText type="text" />
-    <InputText type="text" />
-    <InputText type="text" />
-</div>
+<Image src="image1.png" alt="Image Text">
+    <template #indicator>
+        Preview Content
+    </template>
+</Image>
Properties
-

InputText passes any valid attribute to the underlying input element, additional attribute is the following.

+

Image passes any valid attribute to the underlying img element, additional attribute is the following.

@@ -94,17 +41,58 @@ import Image from 'primevue/image'; - - - - + + + +
modelValueanynullValue of the component.previewbooleanfalseControls the preview functionality.
Events
-

Any valid event such as focus, blur and input are passed to the underlying input element.

+

Any valid event like click and mouseover are passed to the underlying input element. Events below are the additional ones related to the preview functionality.

+
+ + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
show-Triggered when the preview overlay is shown.
hide-Triggered when the preview overlay is hidden.
+
+ +
Slots
+
+ + + + + + + + + + + + + +
NameParameters
indicator-
+
Styling

Following is the list of structural style classes, for theming classes visit theming page.

@@ -118,20 +106,36 @@ import Image from 'primevue/image'; - p-inputtext - Input element + p-image + Container element - p-inputtext-sm - Smaller input element + p-image-preview-container + Container element with preview enabled - p-inputtext-lg - Larger input element + p-image-preview-indicator + Mask layer over the image when hovered - p-inputtext-filled - Filled input style. + p-image-preview-icon + Icon of the preview indicator + + + p-image-mask + Preview overlay container + + + p-image-toolbar + Transformation options container + + + p-image-action + An element inside the toolbar + + + p-image-preview + Image element inside the preview overlay @@ -154,83 +158,18 @@ export default {