From 644c033dca70227e49b67da9fd0fc1d1945a4fcf Mon Sep 17 00:00:00 2001 From: Nikita Drozhzhin Date: Sun, 27 Jun 2021 12:58:29 +0300 Subject: [PATCH] Extended set of examples --- src/app/app.component.html | 188 ++++++++++++++++++++++++++++++++++++- src/app/app.component.sass | 136 +++++++++++++++++++++++++++ 2 files changed, 321 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index c6987a9..2006063 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,185 @@ - - - \ No newline at end of file +
+

Properties

+ + +
+

transition-duration: 1000

+

Defines the speed of the animation of positioning and transforming.

+ + + +
+ + +
+

limit-zoom: 2

+

Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size.

+ + + +
+ + +
+

minScale: 1

+

Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan.

+ + + +
+ + +
+

auto-zoom-out: true

+

Automatic restoration of the original size of an image after its zooming in by two fingers.

+ + + +
+ + +
+

double-tap: false

+

Zooming in and zooming out of an image, depending on its current condition, with double tap.

+ + + +
+ + +
+

double-tap-scale: 4

+

Double tap scaling factor.

+ + + +
+ + +
+

disabled: true

+ + + +
+ + +
+

disablePan: true

+

Turn off panning with one finger.

+ + + +
+ + +
+

minPanScale: 2

+

Minimum zoom at which panning is enabled.

+ + + +
+ + +
+

overflow: 'visible'

+

hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box.

+ + + +
+ + +
+

disableZoomControl: 'disable'

+

Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices.

+ + + +
+ + +
+

zoomControlScale: 2

+

Zoom factor when using zoom controls.

+ + + +
+ + +
+

backgroundColor: 'rgba(0,0,0,0.65)'

+

The background color of the container.

+ + + +
+ + +
+

limitPan: true

+

Stop panning when the edge of the image reaches the edge of the screen.

+ + + +
+ + +
+

listeners: 'auto'

+

By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen.

+ + + +
+ + +
+

wheel: false

+

Scale with the mouse wheel.

+ + + +
+ + +
+

wheelZoomFactor: 0.5

+

Zoom factor when zoomed in with the mouse wheel.

+ + + +
+ + +
+

autoHeight: true

+

Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the tag. When setting the property value to `true`, a subscription to the window resize listener will be created.

+ + + +
+ + +
+

draggableImage: true

+

Sets the attribute draggable to the img tag.

+ + + +
+ + +

Methods

+
+ + + +
+ + +
+
+
\ No newline at end of file diff --git a/src/app/app.component.sass b/src/app/app.component.sass index e69de29..463f721 100644 --- a/src/app/app.component.sass +++ b/src/app/app.component.sass @@ -0,0 +1,136 @@ +.wrapper + max-width: 500px + margin: 0 auto + font-family: system-ui + +.demo + margin-bottom: 60px + +.actions + padding-top: 20px + +h1 + font-size: 30px +h2 + font-size: 20px + +/* Colors */ + +$black: #00000a +$white: #fff +$dark-white: rgba(0, 0, 0, 0.75) +$blue: #0366d6 +$dark-blue: #035cbf +$green: #7cae7a +$dark-green: #709a6e +$gray: rgba(0, 0, 0, 0.5) +$light-shadow: rgba(0, 0, 0, 0.15) + +/* Buttons */ + +.btn + display: inline-block + min-width: 190px + line-height: 56px + font-weight: 500 + border-radius: 6px + text-align: center + margin: 0 15px 15px 0 + background: none + transition: all 200ms + color: $black + outline: none + font-size: 15px + letter-spacing: 1px + text-transform: uppercase + font-weight: 600 + background: $white +.btn:hover + color: $dark-white + text-decoration: none + cursor: pointer + box-shadow: 0px 3px 10px $light-shadow +.btn:active + position: relative + top: 2px + +.btn-small + line-height: 32px + font-weight: normal + padding: 0 8px + font-size: 14px + letter-spacing: 0px + min-width: auto + text-transform: none + +.btn-outline + border: 1px solid #999 +.btn-outline:hover + border-color: $dark-white +.btn-rounded + border-radius: 100px +.btn[disabled] + cursor: default + box-shadow: none + +.btn-light + color: $white +.btn-light:hover + color: rgba(255, 255, 255, 0.75) +.btn-light.btn-outline + border: 1px solid $white +.btn-light.btn-outline:hover + border-color: rgba(255, 255, 255, 0.75) + +.btn-green + background: $green + color: $white + border: none +.btn-green.btn-outline + border: 1px solid $green + color: $green + background: none +.btn-green.btn-clear + color: $green +.btn-green:hover + background: $dark-green + color: $white +.btn-green.btn-outline:hover + background: none + border-color: $dark-green + color: $dark-green +.btn-green.btn-clear:hover + color: $dark-green +.btn-green[disabled] + background: #aaa +.btn-green.btn-outline[disabled] + background: none + border-color: #aaa + color: #aaa + +.btn-blue + background: $blue + color: $white + border: none +.btn-blue.btn-outline + border: 1px solid $blue + color: $blue + background: none +.btn-blue.btn-clear + color: $blue + background: none +.btn-blue:hover + background: $dark-blue + color: $white +.btn-blue.btn-outline:hover + background: none + border-color: $dark-blue + color: $dark-blue +.btn-blue.btn-clear:hover + color: $dark-blue + +.btn-clear + background: none + border: none +.btn-clear:hover + background: none \ No newline at end of file