Bulma-form-file
提供：Dev Guides
ブルマ-ファイル
説明
inputタグの_.file_要素を使用して、ユーザーデータからファイルをアップロードするために使用されます。 _.file_要素は、以下のサブ要素を含むメインコンテナです-
*.file-label* -要素のクリック可能な部分と見なされます。*.file-input* -いくつかのスタイリングのために隠されています。*.file-cta* -アップロードプロセスを呼び出します。.file-icon -アップロードアイコンを指定します。
.file-label -ファイルラベルのテキストを定義します。
*.file-name* -選択したファイルの名前を返します。
以下に示すように、上記のサブ要素を使用して、ファイルのアップロードの簡単な例を作成しましょう-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
File Upload
</span>
<br>
<br>
<div class = "file">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Upload a file…
</span>
</span>
</label>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
色とサイズ
Bulmaは、ファイル要素をスタイルするために次の10の修飾子を提供します。
- 白色
- 黒
- 軽い
- は暗い
- プライマリです
- is-link
- is-info
- 成功
- 警告です
- 危険です
また、3つの追加サイズを使用してファイル要素を使用することができます-
- 小さいです
- 媒体
- は大きい
以下の例では、上記の修飾子の使用法とファイル要素のサイズについて説明します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
File Upload Color Modifiers
</span>
<br>
<br>
<div class = "field">
<div class = "file is-primary">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Primary File Upload…
</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 = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Info File Upload…
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-warning">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-cloud-upload-alt"></i>
</span>
<span class = "file-label">
Warning File Upload…
</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 = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-cloud-upload-alt"></i>
</span>
<span class = "file-label">
Danger File Upload…
</span>
</span>
</label>
</div>
</div>
<br>
<br>
<span class = "is-size-5">
File Upload Sizes
</span>
<br>
<br>
<div class = "field">
<div class = "file is-small">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Small File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Normal File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-medium">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Medium File Upload...
</span>
</span>
</label>
</div>
</div>
<div class = "field">
<div class = "file is-large">
<label class = "file-label">
<input class = "file-input" type = "file" name = "fileupload">
<span class = "file-cta">
<span class = "file-icon">
<i class = "fas fa-upload"></i>
</span>
<span class = "file-label">
Large File Upload...
</span>
</span>
</label>
</div>
</div>
</div>
</section>
</body>
</html>上記を実行すると、以下の出力が得られます-
