Tính năng sao chép vào khay nhớ tạm cho Bootstrap 5 mới nhất. Cho phép người dùng của bạn dễ dàng sao chép văn bản hoặc liên kết bằng một cú nhấp chuột
Cài đặt
Cài đặt thủ công (gói zip)
Để tận dụng thành phần hình ảnh Bootstrap của chúng tôi và sử dụng chúng trong dự án của bạn, trước tiên bạn cần cài đặt
MDB CLI
Xem Hướng dẫn bắt đầu nhanh của chúng tôi để khám phá và sử dụng toàn bộ tiềm năng của MDB 5 và MDB CLI
NPM
điều kiện tiên quyếtTrước khi bắt đầu dự án, hãy đảm bảo cài đặt Node LTS (12. x. x khuyến nghị)
Cài đặtĐể cài đặt MDB UI KIT trong dự án của bạn, hãy dễ dàng gõ lệnh sau trong terminal
npm i mdb-ui-kit
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nhập các mô-đun JSBạn có thể nhập toàn bộ thư viện hoặc chỉ các mô-đun riêng lẻ
import * as mdb from 'mdb-ui-kit'; // lib import { Input } from 'mdb-ui-kit'; // module
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nhập tệp CSSĐể nhập biểu định kiểu MDB, vui lòng sử dụng cú pháp sau
@import '~mdb-ui-kit/css/mdb.min.css';
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nhập mô-đun SCSSBạn cũng có thể nhập các mô-đun SCSS riêng lẻ. Để thực hiện đúng cách, chúng tôi khuyên bạn nên sao chép chúng từ vị trí node_modules/mdb-ui-kit/src/scss trực tiếp vào dự án của bạn và nhập theo cách tương tự như các tệp CSS
Tích hợp webpackBạn có thể tăng tốc đáng kể quá trình tạo một dự án mới dựa trên Webpack bằng Starter của chúng tôi
CDN
Cài đặt qua CDN là một trong những phương pháp dễ dàng nhất để tích hợp MDB UI KIT với dự án của bạn. Chỉ cần sao chép thẻ tập lệnh JS được biên dịch mới nhất và thẻ liên kết CSS từ cdnjs vào ứng dụng
Đừng quên thêm Font Awesome và Roboto font nếu bạn cần. Đây là một mã ví dụ
CSS<!-- Font Awesome --> <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> <!-- Google Fonts --> <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <!-- MDB --> <link href="//cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet" />
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
JS<!-- MDB --> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js" ></script>
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
tùy chỉnh
Ví dụ cơ bảnBằng cách thêm nút có tên lớp clipboard và thuộc tính data-mdb-target, bạn có thể dễ dàng sao chép văn bản của mình
Nút bấm Sao chép văn bản từ đầu vào chủ yếu được sử dụng trong các trang web. Vì vậy, ở đây chúng tôi đã tạo một giao diện người dùng đơn giản cho phần tử này bằng cách sử dụng Bootstrap 5 và các thành phần
cũng đọc. - Bảng giá đáp ứng Bulma
Trong phần tử này, chúng tôi đã sử dụng phương thức javascript execCommand để sao chép văn bản đầu vào bằng ID. Để xem xét giao diện người dùng nhóm, chúng tôi đã sử dụng các thành phần biểu mẫu nhóm đầu vào với ID đầu vào. Đây là một phương thức đáp ứng cho chế độ xem trên thiết bị di động và máy tính bảng
Biến nó thành của bạn ngay bây giờ bằng cách sử dụng, tải xuống và vui lòng chia sẻ nó. chúng tôi sẽ thiết kế thêm các yếu tố cho bạn
Tải xuống
Tải xuống SVG để sử dụng hoặc chỉnh sửa
Tải xuống SVGphông chữ biểu tượng
Sử dụng phông chữ web?
điểm mã
- bảng chữ cái. U+F290
- CSS. \F290
- JS. \uF290
- HTML.
Sao chép HTML
Dán SVG ngay vào mã dự án của bạn
Clipboard là một cách tiếp cận hiện đại để sao chép văn bản vào clipboard. Không có đèn flash. Không có khuôn khổ. Để có tài liệu đầy đủ, vui lòng kiểm tra trang web của plugin
Các tệp CSS và Javascript của Clipboard được đóng gói trong các gói plugin chung và được bao gồm trên toàn cầu trong tất cả các trang
sao chép
Chỉ cần thêm thuộc tính data-clipboard-target vào một nút hành động với phần tử đầu vào là // Select elements const target = document.getElementById('kt_clipboard_1'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.value; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) });0 để nó hoạt động. Sau đó thêm clipboard JS để khởi tạo nó
sao chép
________số 8_______
Copy
Thêm // Select elements const target = document.getElementById('kt_clipboard_1'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.value; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) });1 vào phần tử nút hành động để xác định hành động cắt. Sau đó thêm clipboard JS để khởi tạo nó
sao chép
// Select elements const target = document.getElementById('kt_clipboard_2'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.innerText; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) });
Cut
Thêm // Select elements const target = document.getElementById('kt_clipboard_1'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.value; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) });2 vào nút hành động và nó sẽ sao chép giá trị được đặt khi nhấp. Sau đó thêm clipboard JS để khởi tạo nó
sao chép
// Select element const target = document.getElementById('kt_clipboard_3'); // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ clipboard = new ClipboardJS(target); // Success action handler clipboard.on('success', function (e) { const currentLabel = target.innerHTML; // Exit label update when already in progress if (target.innerHTML === 'Copied!') { return; } // Update button label target.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function () { target.innerHTML = currentLabel; }, 3000) });
Copy to clipboard
Thêm thuộc tính data-clipboard-target vào một nút hành động với phần tử tĩnh // Select elements const target = document.getElementById('kt_clipboard_1'); const button = target.nextElementSibling; // Init clipboard -- for more info, please read the offical documentation: //clipboardjs.com/ var clipboard = new ClipboardJS(button, { target: target, text: function() { return target.value; } }); // Success action handler clipboard.on('success', function(e) { const currentLabel = button.innerHTML; // Exit label update when already in progress if(button.innerHTML === 'Copied!'){ return; } // Update button label button.innerHTML = 'Copied!'; // Revert button label after 3 seconds setTimeout(function(){ button.innerHTML = currentLabel; }, 3000) });0 để nó hoạt động. Sau đó thêm clipboard JS để khởi tạo nó