Hướng dẫn modal react-bootstrap - modal react-bootstrap

Đã đăng vào May 31st, 12:45 p.m. 2 phút đọc 2 phút đọc

I. Tổng quan về Modals

• Modal là một meta component của bootstrap hỗ trợ tạo một popup có nội dung và các action được customize như một page thông thường.
• Modal được sử dụng rất dễ dàng với cấu trúc các tag trong thư bootstrap.

II. Cài đặt

• Modal là một component của bootstrap, vì vậy để sử dụng Modal chỉ cần cài đặt

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  0

• 
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  0 được cài đặt rất dễ dàng bằng câu lệnh

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  2 hoặc thêm vào file

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  3 thư viện:

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

trước khi chạy câu lệnh

    
        Modal heading
    
    
       Modal body
    
    
        Close
    

III. Các cách sử dụng Modal

1. Một ví dụ đơn giản nhất về Modal:

• Sử dụng thẻ

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  5 và các thẻ con với cấu trúc:

    
        Modal heading
    
    
       Modal body
    
    
        Close
    

• Cần khai báo một giá trị state

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  6 trong hàm khởi tạo để điều khiển việc đóng mở của modal:

constructor[props] {
    super[props];
    this.state = {
      showModal: true
    };
  }

• Cần tạo 2 action

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  7 và

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  8 để thực hiện đóng và mở

  
      
          Modal heading
      
      
         Modal body
      
      
          Close
      
  
  

  9:

close[] {
    this.setState[{ showModal: false }];
  }

  open[] {
    this.setState[{ showModal: true }];
  }

• Tạo button để mở modal từ trang gốc:

    Launch demo modal

Như vậy là ta đã tạo được một modal đơn giản nhất với bố cục đầy đủ 3 phần. Tiếp theo ta sẽ tìm hiểu cách tạo một modal phức tạp hơn.

2. Customize modal bằng css:

• Ta có thể tạo modal nằm trong một frame bằng cách custom css như sau:

.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

Với

constructor[props] {
    super[props];
    this.state = {
      showModal: true
    };
  }

constructor[props] {
    super[props];
    this.state = {
      showModal: true
    };
  }

constructor[props] {
    super[props];
    this.state = {
      showModal: true
    };
  }

• Ta cũng có thể chỉnh size cho

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  2 bằng thuộc tính

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  4 với các giá trị

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  5,

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  6,

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  7,

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  8 hoặc theo size custom bằng thuộc tính

  constructor[props] {
      super[props];
      this.state = {
        showModal: true
      };
    }
  

  9.
• Nội dung của modal được tạo ra như một page thông thường.

V. Kết luận

Trên đây là những ví dụ cơ bản nhất trong việc sử dụng Modal của

    
        Modal heading
    
    
       Modal body
    
    
        Close
    

    
        Modal heading
    
    
       Modal body
    
    
        Close
    

    
        Modal heading
    
    
       Modal body
    
    
        Close
    

close[] {
    this.setState[{ showModal: false }];
  }

  open[] {
    this.setState[{ showModal: true }];
  }

Tài liệu tham khảo và demo: //react-bootstrap.github.io/components/modal/

All rights reserved