REACT_reactstrap List Group

List Group 사용하기

: List Group 패키지는 정돈된 스타일의 목록을 표시할 때 사용한다

<ListGroup>과 <ListGroupItem> 태그는 html에서 목록을 만드는 태그인 <ul>, <li>로 변환된다

Button과 링크(<a>태그)에 변도의 태그를 추가하지 않고 속성 값으로 간편하게 사용할 수 있다

 

- R047_ReactstrapListGroup.js

import React, { Component } from 'react';
import { ListGroup, ListGroupItem, Badge } from 'reactstrap';

class R047_ReactstrapListGroup extends Component {
    render() {
        return(
            <>
                <ListGroup>
                    <ListGroupItem color="danger" className='jstify-content-between'>
                        Badge<Badge pill>200</Badge>
                    </ListGroupItem>
                    <ListGroupItem disabled tag='a' href='#'>Disable</ListGroupItem>
                    <ListGroupItem tag='a' href="http://example.com">Link</ListGroupItem>
                    <ListGroupItem tag='button' action onClick={e => alert("button")}>Button</ListGroupItem>
                </ListGroup>
            </>
        )
    }
}
export default R047_ReactstrapListGroup;

 

- App.js

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

import ReactstrapListGroup from './R047_ReactstrapListGroup'
import 'bootstrap/dist/css/bootstrap.css'

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

export default App;

 

결과