REACT_Sweetalert2 Position

Sweetalert2 Position 

:  Sweetalert2 패키지는 알림창의 표시 방식과 구성 요소들을 원하는 형태로 변경할 수 있느 옵션을 제공한다

옵션 중 Position 은 알림창의 표시 위치를 결정한다

 

-Swal.fire 함수의 position 옵션 값은 다음과 같은 형식으로 사용할 수 있다

top : 중앙 상단

top-start : 좌측 상단

top-end : 우측 상단

center : 정중앙

center-start : 중앙 좌측, 

center-end : 중앙 우측

bottom : 중앙 하단

bottom-start : 좌측 하단

bottom -end : 우측 하단  

---

- R057_Sweetalert2Position.js

import React, { Component } from 'react';
import Swal from 'sweetalert2';

class R057_Sweetalert2Position extends Component {
    saveAlert = (flag, positionflag, e) => {
        Swal.fire({
            position: positionflag,
            icon: 'success',
            title: flag + '되었습니다',
            showConfirmButton : false,
            timer: 1500
        })
    }


render() {
    return(
        <>
        <h1>Sweetalert2</h1>
        <button onClick={e => this.saveAlert('저장', 'center')}>저장</button>
        <button onClick={e => this.saveAlert('수정', 'bottom-end')}>수정</button>
        </>
    )
}
}

export default R057_Sweetalert2Position;

 

 

- App.js

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

import Sweetalert2Position from './R057_Sweetalert2Position'
//import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <Sweetalert2Position/>
    </div>
  );
}

export default App;

 

결과