Share code download button hiển thị thông tin file
Theo yêu cầu của một số bạn, hôm nay mình sẽ chia sẻ download button hiển thị thông tin file mà Code Pro thường sử dụng.
Share code download button hiển thị thông tin file |
Button này được cài đặt mặc định trong template Median UI, mình đã lấy ra và chỉnh lại chút và tất nhiên bây giờ template nào cũng có thể sử dụng. Cùng xem ngay nào!
Hướng dẫn cài đặt và sử dụng
Bước 1: Copy toà bộ CSS dưới đây
<style type='text/css'>
.codepro-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.codepro-icon.codepro-download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.codepro-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.codepro-downloadInfo a,.codepro-downloadInfo .codepro-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.codepro-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.codepro-downloadInfo a:after{content:attr(aria-label)}.codepro-downloadInfo .codepro-fileType:before{content:attr(data-text)}.codepro-downloadInfo .codepro-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.codepro-downloadInfo .codepro-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codepro-downloadInfo .codepro-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .codepro-downloadInfo{background-color:#2d2d30;border:0}.darkMode .codepro-downloadInfo .codepro-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.codepro-downloadInfo{padding:12px}.codepro-downloadInfo a{width:50px;height:50px;border-radius:10px}.codepro-downloadInfo a:after{display:none}.codepro-downloadInfo a .codepro-icon{margin:0}}
</style>
Bước 2: Chèn toàn bộ code vừa copy vào trước thẻ </body>
Bước 3: Cách sử dụng → copy code dưới đây, chỉnh sửa thông tin và chèn vào vị trí cần hiển thị.
<div class='codepro-downloadInfo'>
<span class='codepro-fileType' data-text='zip'></span>
<div class='codepro-fileName'>
<span>codepro.zip</span>
<span class='codepro-fileSize'>1000GB</span>
</div>
<a aria-label='Download' href='#link'><i class='codepro-icon codepro-download'></i></a>
</div>
Lời kết
Trên đây là toàn bộ code và hướng dẫn sử dụng download button hiển thị thông tin file. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!
Copyright © Code Pro
18 تعليقًا