| .background { | |
| will-change: opacity; | |
| transition: opacity 250ms; | |
| visibility: hidden; | |
| opacity: 0; | |
| position: fixed; | |
| top: 0; | |
| left: 0; |
| import React from 'react' | |
| import styled from 'styled-components' | |
| function flex(name, defaultValue) { | |
| return (props) => { | |
| let value = props[name] | |
| if (!value && typeof defaultValue === 'undefined') return '' | |
| if (!value) value = defaultValue | |
| return `flex-${name}: ${value};` | |
| } |
Infinite list: Automatically lazy-loads content from a data source as the user scrolls, view-recycling as necessary.
Lazy-load image: Won't load the resource until it is on or near the screen.
Pull to refresh: Recreate the "pull down to refresh" UI from iOS and Android.
Carousel: Side scroller that handles lazy-loading and optionally snaps to elements.
Multi-line ellipsis: Automatically hide text and replace with a fade/ellipsis after a specified number of lines.
| // "counter.react" | |
| import {format} from 'externalLib'; | |
| state { | |
| // acts like default state | |
| counter = 0; | |
| } | |
| props { |
| if (typeof window!=='undefined' && navigator.serviceWorker && navigator.serviceWorker.controller) { | |
| let reloadOnNext = false; | |
| let pushState = history.pushState; | |
| history.pushState = function(state, title, url) { | |
| pushState.call(this, state, title, url); | |
| if (reloadOnNext===true) location.reload(true); | |
| }; | |
| navigator.serviceWorker.controller.addEventListener('statechange', e => { |
| import { h, Component } from 'preact'; | |
| import { Router } from 'preact-router'; | |
| import Header from './header'; | |
| import Home from '../routes/home'; | |
| import Profile from '../routes/profile'; | |
| import NotifyChange from "./NotifyChange/index"; | |
| // import Home from 'async!../routes/home'; | |
| // import Profile from 'async!../routes/profile'; |
| // add this please | |
| // add this please | |
| require("preact-cli/lib/lib/webpack/polyfills"); | |
| // look above | |
| import { h } from "preact"; | |
| import habitat from "preact-habitat"; | |
| import Widget from "./components/hello-world"; |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> |
| dialog { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| right: auto; | |
| padding: 30px; | |
| transform: perspective(500px) translate(-50%, -50%); | |
| background: linear-gradient(to bottom, #FFF, #F4F4F4) #FFF; | |
| border: none; | |
| border-radius: 3px; |
