File upload

ورودی file upload سفارشی بدون JavaScript

Experimental
رنگ دارد
اندازه دازد
متغیر دازد

المان file یک برچسب تعاملی ساده است که یک <input type="file"> را دربرمی گیرد. این شامل چندین المان فرعی است:

  • file بخش اصلی
    • file-label قسمت تعاملی و قابل کلیک واقعی المان
      • file-input ورودی file محلی، مخفی برای اهداف طراحی
      • file-cta فراخوانس آپلود
        • file-icon آیکون upload اختیاری
        • file-label متن "انتخاب فایل …"
      • file-name بخشی برای نام فایل انتخاب شده

<div class="file">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                </label>
</div>

اصلاح کننده ها #

با استفاده از کلاس اصلاح کننده has-name، همراه با المان file-name، می توانید یک placeholder برای نام فایل انتخاب شده اضافه کنید.


<div class="file has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
</div>

با کلاس اصلاح کننده is-left می توانید CTA را به سمت چپ حرکت دهید.


<div class="file has-name is-left">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
</div>

همچنین می توانید نام را برای پر کردن فضا با کلاس اصلاح کننده is-fullwidth گسترش دهید


<div class="file has-name is-fullwidth">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
</div>

می توانید یک بلوک جعبه ای با کلاس اصلاح کننده is-boxed داشته باشید.

<div class="file is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                </label>
</div>

می توانید has-name و is-boxed را ترکیب کنید.

<div class="file has-name is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
        انتخاب فایل…
                                </span>
                                </span>
                                <span class="file-name">
      Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
</div>

رنگ ها #

می توانید المان file رابا 10 کلاس اصلاح رنگ طراحی کنید:

  • is-white
  • is-black
  • is-light
  • is-dark
  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

<div class="field">
                                <div class="file is-primary">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Primary file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-info has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Info file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-warning is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                                </span>
                                <span class="file-label">
          Warning file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-danger has-name is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                                </span>
                                <span class="file-label">
          Danger file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

اندازه #

یکی از3 اندازه را می توانید اضافه کنید:

  • is-small
  • is-medium
  • is-large

<div class="field">
                                <div class="file is-small">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Small file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Normal file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-medium">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Medium file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-large">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Large file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-small has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Small file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Normal file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-medium has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Medium file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-large has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Large file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-small is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Small file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Normal file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-medium is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Medium file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-large is-boxed">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Large file…
                                </span>
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-small is-boxed has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Small file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-boxed has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Normal file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-medium is-boxed has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Medium file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-large is-boxed has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Large file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

جهت #

می توانید به ورودی file جهت دهید:

  • به مرکز با اصلاح کننده is-centered
  • به سمت چپ با اصلاح کننده is-left

<div class="field">
                                <div class="file is-centered is-boxed is-success has-name">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Centered file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

<div class="field">
                                <div class="file is-right is-info">
                                <label class="file-label">
                                <input class="file-input" type="file" name="resume">
                                <span class="file-cta">
                                <span class="file-icon">
                                <i class="fas fa-upload"></i>
                                </span>
                                <span class="file-label">
          Right file…
                                </span>
                                </span>
                                <span class="file-name">
        Screen Shot 2017-07-29 at 15.54.25.png
                                </span>
                                </label>
                                </div>
</div>

JavaScript #

ورودی file upload برای بازیابی نام فایل انتخاب شده به JavaScript نیاز دارد. در اینجا مثالی از چگونگی انجام این کار آورده شده است:


<div id="file-js-example" class="file has-name">
                                        <label class="file-label">
                                        <input class="file-input" type="file" name="resume">
                                        <span class="file-cta">
                                        <span class="file-icon">
                                        <i class="fas fa-upload"></i>
                                        </span>
                                        <span class="file-label">
         انتخاب فایل…
                                        </span>
                                        </span>
                                        <span class="file-name">
      No file uploaded
                                        </span>
                                        </label>
</div>

<script>
                                        const fileInput = document.querySelector('#file-js-example input[type=file]');
                                        fileInput.onchange = () => {
                                        if (fileInput.files.length > 0) {
                                        const fileName = document.querySelector('#file-js-example .file-name');
                                        fileName.textContent = fileInput.files[0].name;
                                        }
                                        }
</script>

متغیر ها #

برای شخصی سازی این المان می توانید از این متغیر ها استفاده کنید. قبل از وارد کردن Bulma ، کافی است یک یا چند مورد از این متغیرها را تنظیم کنید. یاد بگیرند که چگونه.
نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$file-border-color color $border hsl(0, 0%, 86%)
$file-radius size $radius 4px
$file-cta-background-color color $white-ter hsl(0, 0%, 96%)
$file-cta-color color $grey-dark hsl(0, 0%, 29%)
$file-cta-hover-color color $grey-darker hsl(0, 0%, 21%)
$file-cta-active-color color $grey-darker hsl(0, 0%, 21%)
$file-name-border-color color $border hsl(0, 0%, 86%)
$file-name-border-style string solid
$file-name-border-width size 1px 1px 1px 0
$file-name-max-width size 16em