Menu Drop-down Bootstrap Sederhana Untuk Aplikasi React

Penulis: grizzthedj
Halaman resmi: Buka situs web
Pembaharuan Terakhir: 17 Juli 2021
Lisensi: DENGAN

Deskripsi:

Buat menu drop-down Bootstrap yang sederhana dan indah untuk proyek React Anda. Ini akan berfungsi seperti menu tarik-turun pengaturan pengguna di kanan atas. Menu tarik-turun akan terbuka pada acara ‘Klik’.

Bagaimana cara menggunakannya?

1. Instal komponen dengan di atas permukaan laut.

npm install react-bootstrap-dropdown-menu --save

2. Sertakan pustaka Bootstrap jika tidak disertakan dalam proyek Anda.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="all">

3. Impor komponen.

import React from 'react';
import { DropdownMenu, MenuItem } from 'react-bootstrap-dropdown-menu';

4. Buat menu drop-down sebagai berikut.

class SettingsMenu extends React.Component {
  constructor() {
    super();
    this.deleteAccount = this.deleteAccount.bind(this);
    this.logout = this.logout.bind(this);
  }

  deleteAccount(e) {
    console.log("Deleting Account")
  }

  logout(e) {
    console.log("Logging out")
  }

  render() {
    return (
      <DropdownMenu userName="Chris Smith">
        <MenuItem text="Home" location="/home" />
        <MenuItem text="Edit Profile" location="/profile" />
        <MenuItem text="Change Password" location="/change-password" />
        <MenuItem text="Privacy Settings" location="/privacy-settings" />
        <MenuItem text="Delete Account" onClick={this.deleteAccount} />
        <MenuItem text="Logout" onClick={this.logout} />
      </DropdownMenu>
    );
  }
}

export default SettingsMenu;

Kategori: React Navigasi & Menu Tag: reaksi menu tarik-turun