search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Tailwind Touch method

    Tailwind CSS Touch

    This component allows you to improve the user experience on mobile touch screens by calling methods on the following custom events: pinch, swipe, tap, press, pan and rotate.

    Required ES init: Touch *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Press

    Press calls the chosen method when the touch event on the element lasts longer than 250 milliseconds.

    Hold the button to remove the mask from the image

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="remove-bg"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p id="press-text" class="text-white opacity-100">
                  Hold the button to remove the mask from the image
                </p>
              </div>
            </div>
          </div>
    
          <button
            id="btn-press"
            data-twe-touch-init
            data-twe-event="press"
            data-twe-time="2000"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Tap & hold to show image
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Ripple,
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Ripple, Touch });
    
          const btnPress = document.querySelector("#btn-press");
          const removeBg = document.querySelector("#remove-bg");
          const pressText = document.querySelector("#press-text");
    
          btnPress.addEventListener("press", (e) => {
            removeBg.style.backgroundColor = "rgba(0,0,0,0)";
            pressText.innerText = "";
          });
          
            
        
            
                
          const btnPress = document.querySelector("#btn-press");
          const removeBg = document.querySelector("#remove-bg");
          const pressText = document.querySelector("#press-text");
    
          btnPress.addEventListener("press", (e) => {
            removeBg.style.backgroundColor = "rgba(0,0,0,0)";
            pressText.innerText = "";
          });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Press duration

    Touch event press with custom duration.

    Hold the button to remove the mask from the image with 5 seconds

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="bg-press-duration"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p id="press-duration-text" class="text-white opacity-100">
                  Hold the button to remove the mask from the image with 5 seconds
                </p>
              </div>
            </div>
          </div>
    
          <button
            id="btn-press-duration"
            data-twe-touch-init
            data-twe-event="press"
            data-twe-time="5000"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Tap & hold to show image
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Ripple,
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Ripple, Touch });
    
          const btnPressDuration = document.querySelector("#btn-press-duration");
          const bgPressDuration = document.querySelector("#bg-press-duration");
          const pressDurationText = document.querySelector("#press-duration-text");
    
          btnPressDuration.addEventListener("press", () => {
            bgPressDuration.style.backgroundColor = "rgba(0,0,0,0)";
            pressDurationText.innerText = "";
          });
          
            
        
            
                
          const btnPressDuration = document.querySelector("#btn-press-duration");
          const bgPressDuration = document.querySelector("#bg-press-duration");
          const pressDurationText = document.querySelector("#press-duration-text");
    
          btnPressDuration.addEventListener("press", () => {
            bgPressDuration.style.backgroundColor = "rgba(0,0,0,0)";
            pressDurationText.innerText = "";
          });
          
            
        

    Tap

    The callback on tap event is called with an object containing origin field - the x and y cooridinates of the user's touch.

    Tap button to change a color

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="bg-tap"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p class="text-white opacity-100">Tap button to change a color</p>
              </div>
            </div>
          </div>
    
          <button
            id="btn-tap"
            data-twe-touch-init
            data-twe-event="tap"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Tap to change color
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Ripple,
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Ripple, Touch });
    
          const btnTap = document.querySelector("#btn-tap");
          const bgTap = document.querySelector("#bg-tap");
          
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
          
          btnTap.addEventListener("tap", (e) => {
            bgTap.style.backgroundColor = colorGen();
          });
          
            
        
            
                
          const btnTap = document.querySelector("#btn-tap");
          const bgTap = document.querySelector("#bg-tap");
          
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
          
          btnTap.addEventListener("tap", (e) => {
            bgTap.style.backgroundColor = colorGen();
          });
          
            
        

    Double Tap

    Set default taps to touch event.

    Change background color with 2 taps

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="bg-double-tap"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p class="text-white opacity-100">
                  Change background color with 2 taps
                </p>
              </div>
            </div>
          </div>
    
          <button
            id="btn-double-tap"
            data-twe-touch-init
            data-twe-event="tap"
            data-twe-taps="2"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            type="button"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Tap button twice
          </button>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Ripple,
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Ripple, Touch });
    
          const btnDoubleTap = document.querySelector("#btn-double-tap");
          const doubleTapBg = document.querySelector("#bg-double-tap");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          btnDoubleTap.addEventListener("tap", (e) => {
            doubleTapBg.style.backgroundColor = colorGen();
          });
          
            
        
            
                
          const btnDoubleTap = document.querySelector("#btn-double-tap");
          const doubleTapBg = document.querySelector("#bg-double-tap");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          btnDoubleTap.addEventListener("tap", (e) => {
            doubleTapBg.style.backgroundColor = colorGen();
          });
          
            
        

    Pan

    The pan event is useful for dragging elements - every time the user moves a finger on the element to which the directive is attached to, the given method is being called with an argument consisting of two keys: x and y (the values corresponds to the horizontal and vertical translation).

    • HTML
    • javascript
    • umd
            
                
          <div
            id="pan"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="img-pan"
              data-twe-touch-init
              data-twe-event="pan"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const panEl = document.querySelector("#pan");
          const imgPan = document.querySelector("#img-pan");
          let moveElement = {
            x: null,
            y: null,
          };
    
          panEl.addEventListener("pan", (e) => {
            moveElement = {
              x: moveElement.x + e.x,
              y: moveElement.y + e.y,
            };
    
            imgPan.style.transform = `translate(${moveElement.x}px, ${moveElement.y}px)`;
          });
          
            
        
            
                
          const panEl = document.querySelector("#pan");
          const imgPan = document.querySelector("#img-pan");
          let moveElement = {
            x: null,
            y: null,
          };
    
          panEl.addEventListener("pan", (e) => {
            moveElement = {
              x: moveElement.x + e.x,
              y: moveElement.y + e.y,
            };
    
            imgPan.style.transform = `translate(${moveElement.x}px, ${moveElement.y}px)`;
          });
          
            
        

    Pan Left

    Pan with only left direction.

    • HTML
    • javascript
    • umd
            
                
          <div
            id="pan-left"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="img-pan-left"
              data-twe-touch-init
              data-twe-event="pan"
              data-twe-direction="left"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const panLeftEl = document.querySelector("#pan-left");
          const imgPanLeft = document.querySelector("#img-pan-left");
          let moveElementLeft = {
            x: null,
          };
    
          panLeftEl.addEventListener("panleft", (e) => {
            moveElementLeft = {
              x: moveElementLeft.x + e.x,
            };
            imgPanLeft.style.transform = `translate(${moveElementLeft.x}px, 0px)`;
          });
          
            
        
            
                
          const panLeftEl = document.querySelector("#pan-left");
          const imgPanLeft = document.querySelector("#img-pan-left");
          let moveElementLeft = {
            x: null,
          };
    
          panLeftEl.addEventListener("panleft", (e) => {
            moveElementLeft = {
              x: moveElementLeft.x + e.x,
            };
            imgPanLeft.style.transform = `translate(${moveElementLeft.x}px, 0px)`;
          });
          
            
        

    Pan Right

    Pan with only right direction.

    • HTML
    • javascript
    • umd
            
                
          <div
            id="pan-right"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="img-pan-right"
              data-twe-touch-init
              data-twe-event="pan"
              data-twe-direction="right"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const panRightEl = document.querySelector("#pan-right");
          const imgPanRight = document.querySelector("#img-pan-right");
          let moveElementRight = {
            x: null,
          };
    
          panRightEl.addEventListener("panright", (e) => {
            moveElementRight = {
              x: moveElementRight.x + e.x,
            };
            imgPanRight.style.transform = `translate(${moveElementRight.x}px, 0px)`;
          });
          
            
        
            
                
          const panRightEl = document.querySelector("#pan-right");
          const imgPanRight = document.querySelector("#img-pan-right");
          let moveElementRight = {
            x: null,
          };
    
          panRightEl.addEventListener("panright", (e) => {
            moveElementRight = {
              x: moveElementRight.x + e.x,
            };
            imgPanRight.style.transform = `translate(${moveElementRight.x}px, 0px)`;
          });
          
            
        

    Pan Up/Down

    Pan with only up/down direction.

    • HTML
    • javascript
    • umd
            
                
          <div
            id="pan-up-down"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="img-pan-up-down"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import { Touch } from "tw-elements";
    
          const panUpDown = document.querySelector("#pan-up-down");
          const imgPanUpDown = document.querySelector("#img-pan-up-down");
    
          const touchDown = new Touch(panUpDown, {
            event: "pan",
            direction: "down",
          });
          const touchUp = new Touch(panUpDown, {
            event: "pan",
            direction: "up",
          });
    
          let moveElementUpDown = {
            y: null,
          };
    
          panUpDown.addEventListener("panup", (e) => {
            moveElementUpDown = {
              y: moveElementUpDown.y + e.y,
            };
            imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
          });
    
          panUpDown.addEventListener("pandown", (e) => {
            moveElementUpDown = {
              y: moveElementUpDown.y + e.y,
            };
            imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
          });
          
            
        
            
                
          const panUpDown = document.querySelector("#pan-up-down");
          const imgPanUpDown = document.querySelector("#img-pan-up-down");
    
          const touchDown = new twe.Touch(panUpDown, {
            event: "pan",
            direction: "down",
          });
          const touchUp = new twe.Touch(panUpDown, {
            event: "pan",
            direction: "up",
          });
    
          let moveElementUpDown = {
            y: null,
          };
    
          panUpDown.addEventListener("panup", (e) => {
            moveElementUpDown = {
              y: moveElementUpDown.y + e.y,
            };
            imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
          });
    
          panUpDown.addEventListener("pandown", (e) => {
            moveElementUpDown = {
              y: moveElementUpDown.y + e.y,
            };
            imgPanUpDown.style.transform = `translate(0px, ${moveElementUpDown.y}px)`;
          });
          
            
        

    Pinch

    The pinch event calls the given method with an object containing two keys - ratio and origin. The first one it the ratio of the distance between user's fingers on touchend to the same distance on touchstart - it's particularly useful for scaling images. The second one, similarly as in doubleTap event, is a pair of coordinates indicating the middle point between the user's fingers.

    • HTML
    • javascript
    • umd
            
                
          <div
            id="div-pinch"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="pinch"
              data-twe-touch-init
              data-twe-event="pinch"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const pinchEl = document.querySelector("#pinch");
    
          pinchEl.addEventListener("pinch", (e) => {
            e.target.style.transform = `scale(${e.ratio})`;
            e.target.style.transformOrigin = `translate(${e.origin.x}px, ${e.origin.y}px,)`;
          });
          
            
        
            
                
          const pinchEl = document.querySelector("#pinch");
    
          pinchEl.addEventListener("pinch", (e) => {
            e.target.style.transform = `scale(${e.ratio})`;
            e.target.style.transformOrigin = `translate(${e.origin.x}px, ${e.origin.y}px,)`;
          });
          
            
        

    Swipe Left/Right

    The swipe event comes with several modifiers (left, right, up, down) - each of them will ensure that event will fire only on swipe in that particular direction. If the directive is used without any modifier, the callback method will be called each time the swiping occurs, and the string indicating the direction will be passed as an argument.

    This example shows example with left and right:

    Swipe Left-Right to change a color

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="swipe-left-right"
              data-twe-touch-init
              data-twe-event="swipe"
              data-twe-treshold="100"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p class="text-white opacity-100">
                  Swipe Left-Right to change a color
                </p>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const swipeLeftRight = document.querySelector("#swipe-left-right");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          swipeLeftRight.addEventListener("swipeleft", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          swipeLeftRight.addEventListener("swiperight", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          
            
        
            
                
          const swipeLeftRight = document.querySelector("#swipe-left-right");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          swipeLeftRight.addEventListener("swipeleft", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          swipeLeftRight.addEventListener("swiperight", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          
            
        

    Swipe Up/Down

    This example shows example with up and down:

    Swipe Up-Down to change a color

    • HTML
    • javascript
    • umd
            
                
          <div
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
            <div
              id="swipe-up-down"
              data-twe-touch-init
              data-twe-event="swipe"
              data-twe-treshold="120"
              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
              <div class="flex h-full items-center justify-center">
                <p class="text-white opacity-100">
                  Swipe Up-Down to change a color
                </p>
              </div>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const swipeUpDown = document.querySelector("#swipe-up-down");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          swipeUpDown.addEventListener("swipeup", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          swipeUpDown.addEventListener("swipedown", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          
            
        
            
                
          const swipeUpDown = document.querySelector("#swipe-up-down");
    
          const colorGen = () => {
            const randomNum = () => {
              return Math.floor(Math.random() * 255) + 1;
            };
            return `rgba(${randomNum()},${randomNum()},${randomNum()},.4)`;
          };
    
          swipeUpDown.addEventListener("swipeup", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          swipeUpDown.addEventListener("swipedown", (e) => {
            e.target.style.backgroundColor = colorGen();
          });
          
            
        

    Rotate

    This example shows example with rotate:

    • HTML
    • javascript
    • umd
            
                
          <div
            id="div-rotate"
            class="relative mb-3 max-w-xl overflow-hidden bg-cover bg-[50%] bg-no-repeat">
            <img
              id="rotate"
              data-twe-touch-init
              data-twe-event="rotate"
              src="https://tecdn.b-cdn.net/img/new/standard/city/053.webp"
              class="h-auto" />
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Touch,
            initTWE,
          } from "tw-elements";
    
          initTWE({ Touch });
    
          const rotate = document.querySelector("#rotate");
    
          rotate.addEventListener("rotate", (e) => {
            rotate.style.transform = `rotate(${e.currentAngle}turn)`;
          });
          
            
        
            
                
          const rotate = document.querySelector("#rotate");
    
          rotate.addEventListener("rotate", (e) => {
            rotate.style.transform = `rotate(${e.currentAngle}turn)`;
          });
          
            
        

    Related resources

    Hover Effects Buttons Images
    • Press
    • Duration
    • Tap
    • Double Tap
    • Pan
    • Pan Left
    • Pan Right
    • Pan Up/Down
    • Pinch
    • Swipe Left/Right
    • Swipe Up/Down
    • Rotate
    • Related resources

    Tailwind Touch method - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Touch, initTWE } from "tw-elements";
            initTWE({ Touch });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    • HTML
            
                
            <button
              id="btn-press"
              data-twe-touch-init
              type="button"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
              Tap & hold to show image
            </button>
            
            
        

    Via JavaScript

    • javascript
    • umd
            
                
            const myTouch = new Touch(document.getElementById('id'), options);
            
            
        
            
                
            const myTouch = new twe.Touch(document.getElementById('id'), options)
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-event="press".

    Touch

    Name Type Default Description
    event String 'swipe' Event type. Can be 'pan', 'pinch', 'press', 'rotate', 'swipe', 'tap'.

    Pan

    Name Type Default Description
    direction String 'all' Set direction to pan. Available options: all, right, left, up, down.
    pointers Number 1 Set default value of number for pointers.
    threshold Number 20 Set distance bettwen when event fires.

    Pinch

    Name Type Default Description
    pointers Number 2 Option for tap event, set duration to how long it takes to take a tap.
    threshold Number 10 Set distance bettwen when event fires.

    Press

    Name Type Default Description
    pointers Number 1 Set default value of number for pointers.
    time Number 250 Set time delays to take tap.

    Rotate

    Name Type Default Description
    angle Number 0 Set started angle to rotate.
    pointers Number 2 Set default value of number for pointers.

    Swipe

    Name Type Default Description
    direction String 'all' Set direction to pan. Available options: all, right, left, up, down.
    treshold Number 10 Set distance bettwen when event fires.

    Tap

    Name Type Default Description
    interval Number 500 Set interval to tap.
    pointers Number 1 Set default value of number for pointers.
    taps Number 1 Set default value of number for taps.
    time Number 250 Set delays time to tap event.

    Methods

    Method Description Example
    dispose Manually disposes an instance. touch.dispose();
    getInstance Static method which allows you to get the touch instance associated to a DOM element. Touch.getInstance(element)
    getOrCreateInstance Static method which returns the touch instance associated to a DOM element or create a new one in case it wasn't initialized. Touch.getOrCreateInstance(element)
    • javascript
    • umd
            
                
            const element = document.getElementById('id');
            const myTouch = new Touch(element, { event: 'tap' });
            myTouch.dispose();
            
            
        
            
                
            const element = document.getElementById('id');
            const myTouch = new twe.Touch(element, { event: 'tap' });
            myTouch.dispose();
            
            
        

    Events

    Event type Description
    pan This event fires pan touch funcionality.
    pinch This event fires pinch touch funcionality.
    press This event fires press touch funcionality.
    rotate This event fires rotate touch funcionality.
    swipe This event fires swipe touch funcionality.
    tap This event fires tap touch funcionality.
    • JavaScript
            
                
            const myTouch = document.getElementById('element-id');
    
            myTouch.addEventListener('rotate', (e) => {
              // do something...
            })
            
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO