REACT_reactstrap Popover

Popover 사용하기

: Popover 패키지는 html 요소를 클릭했을 때 요소에 연결된 메시지 박스르 띄울 수 있는 기능을 제공한다

tooltip과 거의 동일하게 동작한다

 

- UncontrolledPopover : 태그나 함수를 생략해도 기본 기능을 제공한다

기본적인 기능만 사용할 것이라면 Popover 보다 UncontrolledPopover를 사용하는 것이 간편하다

 

- R051_ReactstrapPopover.js

import React, { Component } from 'react';
import { Button, UncontrolledPopover, PopoverHeader, PopoverBody } from 'reactstrap';

class R051_ReactstrapPopover extends Component {
    render() {
        return(
            <>
            <Button id="Popover_id" type="button">
                Popover button
            </Button>
            <UncontrolledPopover placement="right" target="Popover_id">
                <PopoverHeader>React 200</PopoverHeader>
                <PopoverBody>
                    Aenean id magna id risus congue ornare.
                    Vestibulum sed diam et mi pulvinas facilisis sed eu risus.
                </PopoverBody>
            </UncontrolledPopover>
            </>
        )
    }
}
export default R051_ReactstrapPopover;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactstrapPopover from './R051_ReactstrapPopover'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ReactstrapPopover/>
    </div>
  );
}

export default App;

 

결과

Popover 버튼을 누르면 창이 생성된다