hf-lightbox
v1.0.8
Published
yarn add hf-lightbox
Downloads
7
Readme
安裝
yarn add hf-lightbox
元件
<ScrollableLightbox>
特性
支援 RWD: 手機,平板 支援動畫,web 版由上到下,手機版右進右出。
屬性
show : 顯示/關閉 lightbox close : close btn 事件的 callback title : lightbox 的 title
CSS
.lightbox-close-btn : 可以更換 close btn 的圖形。 .lightbox-header .lightbox-title : 可以設定標題的樣式。 .lightbox-content : 可以設定內容的樣式。 .lightbox-visible : 可以是設定 lightbox 顯示的動畫。 .lightbox-hidden : 可以是設定 lightbox 消失的動畫。
demo
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import ScrollableLightbox from "./ScrollableLightbox";
class App extends React.Component {
state = { show: false };
click() {
this.setState({
show: true
});
}
close() {
this.setState({
show: false
});
}
render() {
return (
<div className="App">
<button onClick={this.click.bind(this)}> Click </button>
<ScrollableLightbox
show={this.state.show}
close={this.close.bind(this)}
title={"分店位置"}
>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.Distinctio possimus dignissimos eos temporibus magni!A
deleniti maiores iusto voluptate!Reiciendis dolor animi
repellendus ut.Error qui id, voluptatem quod nihil.
</p>
<p>
Asperiores esse tempore quasi quibusdam, provident vel voluptatum
nisi sed fugiat quos molestias, doloremque placeat quia
dignissimos expedita soluta cum alias autem delectus tenetur
perspiciatis deserunt voluptate, debitis.Asperiores, eius ?
</p>
</div>
</ScrollableLightbox>
</div>
);
}
}
export default App;