Skip to content
No description, website, or topics provided.
Vue JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public first commit Dec 6, 2019
src make image responsive Jan 9, 2020
.browserslistrc first commit Dec 6, 2019
.eslintrc.js first commit Dec 6, 2019
.gitignore first commit Dec 6, 2019
README.md add demo link Jan 9, 2020
babel.config.js first commit Dec 6, 2019
package.json add demos Jan 9, 2020
postcss.config.js
tailwind.config.js
yarn.lock add demos Jan 9, 2020

README.md

Portals

Demo

Chapter: Intro

  1. problem: modals inside relative element
  2. solution: only 1 modal with portal with positon escaping

Portals work like inverted slots in Vue, but they don't render the slot inside the components, but somehwere else on your app or maybe even outside the app. Who knows :D

Chapter: Installing

  1. Install Portal 2.0 Library
  2. Add Portals to the App

Chapter: Syntax and Components

  1. portal component
  2. portal-target component
  3. seding first data to through the portal
  4. turn off the portal
  5. 1 receive multiple portals in one target
  6. 1a changing the order of tne ported items
  7. remove the wrapping of the portal target
  8. change the rendered html element of the portal

explain portal and portal-target components disabling portal-target and why do we need mounting-portal

Chapter: Exercise

  1. tooltips
  2. modals
    1. creating reusable modal portal
    2. passing portal actions via scoped slots
    3. add focus lock to the modal
    4. disable scrolling then modal is open

Chapter: Advanced

  1. portals in another window mounting-portal component
  2. portals outside of vue
  3. portals with scoped slots
You can’t perform that action at this time.