Contact us Create app

Directory

← Back

skeleton-focal

Focal point for your images

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/FabricElements/skeleton-focal on 2019-05-22 ]

Build Status Published on webcomponents.org

<skeleton-focal>

skeleton-focal is a Polymer 2 element that provides a focal point for your images. Allows you to drag the focal point and returns the value in attributes that reflects the selected x and y coordinates in a 0-1 range.

<dom-bind>
  <template>
    <skeleton-focal
      src="https://source.unsplash.com/random/800x400"
      x="{{x}}"
      y="{{y}}"></skeleton-focal>
    
    <h4>Focal point coordinates</h4>
    <ul>
      <li><strong>X:</strong> [[x]]</li>
      <li><strong>Y:</strong> [[y]]</li>
    </ul>
  </template>
</dom-bind>

Installation

Install skeleton-focal with Bower

$ bower install --save FabricElements/skeleton-focal

Usage

Import it into the <head> of your page

<link rel="import" href="bower_components/skeleton-focal/skeleton-focal.html">

Example: basic usage

<skeleton-focal src="image.jpg" x="{{x}}" y="{{y}}"></skeleton-focal>
  • src (string) - The URL of an image.
  • x (number) - attribute that reflects the selected x coordinate in a 0-1 range.
  • y (number) - attribute that reflects the selected y coordinate in a 0-1 range.

Other attributes

  • loaded (boolean) - Read-only value that is true when the image is loaded.
  • crossorigin (string) - CORS enabled images support: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
  • placeholder (string) - This image will be used as a background/placeholder until the src image has loaded. Use of a data-URI for placeholder is encouraged for instant rendering.
  • preventLoad (boolean) - When true, the image is prevented from loading and any placeholder is shown. This may be useful when a binding to the src property is known to be invalid, to prevent 404 requests.

Contributing

Please check CONTRIBUTING.

License

Released under the BSD 3-Clause License.

Compatibility

(Loading compatibility data...)

Last updated: 2017-08-25

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • iron-image#PolymerElements/iron-image#^2.1.2
Released
2017-08-25
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

skeleton-focal - Vaadin Add-on Directory

Focal point for your images skeleton-focal - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/FabricElements/skeleton-focal](https://github.com//FabricElements/skeleton-focal/blob/v2.0.0/README.md) on 2019-05-22 ]** [![Build Status](https://travis-ci.org/FabricElements/skeleton-focal.svg?branch=master)](https://travis-ci.org/FabricElements/skeleton-focal) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/FabricElements/skeleton-focal) ## \ `skeleton-focal` is a [Polymer 2](http://polymer-project.org) element that provides a focal point for your images. Allows you to drag the focal point and returns the value in attributes that reflects the selected `x` and `y` coordinates in a 0-1 range. ```html ``` ## Installation Install skeleton-focal with Bower ```shell $ bower install --save FabricElements/skeleton-focal ``` ## Usage Import it into the `` of your page ```html ``` ### Example: basic usage ```html ``` * `src` (string) - The URL of an image. * `x` (number) - attribute that reflects the selected x coordinate in a 0-1 range. * `y` (number) - attribute that reflects the selected y coordinate in a 0-1 range. ### Other attributes * `loaded` (boolean) - Read-only value that is true when the image is loaded. * `crossorigin` (string) - CORS enabled images support: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image * `placeholder` (string) - This image will be used as a background/placeholder until the src image has loaded. Use of a data-URI for placeholder is encouraged for instant rendering. * `preventLoad` (boolean) - When true, the image is prevented from loading and any placeholder is shown. This may be useful when a binding to the src property is known to be invalid, to prevent 404 requests. ## Contributing Please check [CONTRIBUTING](./CONTRIBUTING.md). ## License Released under the [BSD 3-Clause License](./LICENSE.md).
Online Demo
Documentation
License
GitHub Homepage
View on GitHub
Issue tracker

skeleton-focal version 2.0.0
### Dependencies * polymer#Polymer/polymer#^2.0.0 * iron-image#PolymerElements/iron-image#^2.1.2

Online