file
元素是封装了 <input type="file">
的简单的互动标签。它包含几个子元素:
-
file
是主容器
-
file-label
是实际互动和可点击的元素
-
file-input
是原生的文件输入框,基于美化目的已隐藏
-
file-cta
上传调用操作
-
file-icon
是可选的上传图标
-
file-label
显示文字“选择一个文件……”
-
file-name
一个包含选择的文件名字的容器
HTML
Modifiers
#
联合使用 has-name
修饰符和 file-name
元素,您可以为选择的文件名添加一个占位符。
您可以使用 is-right
修饰符将 CTA 移动到右侧。
也可以用 is-fullwidth
修饰符扩展名字占满全部宽度。
您还可以用 is-boxed
修饰符得到一个盒状块。
也可以联合使用 has-name
和 is-boxed
。
颜色
#
您可以通过添加一个 10 颜色修饰符之一美化文件上传元素:
-
is-white
-
is-black
-
is-light
-
is-dark
-
is-primary
-
is-link
-
is-info
-
is-success
-
is-warning
-
is-danger
HTML
HTML
HTML
HTML
型号
#
您可以附加 4 个可用型号之一:
-
is-small
-
is-normal
(默认)
-
is-medium
-
is-large
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
对齐方式
#
您可以对齐文件上传输入框:
-
用
is-centered
修饰符居中对齐
-
用
is-right
修饰符向右对齐
HTML
HTML
JavaScript
#
文件上传输入框需要 JavaScript 来获取选择的文件名。
这是一个演示如何运行的示例:
HTML
Variables
#
Name
Type
Value
Computed Value
Computed Type
variable
color