[How to use label]
We will output a method for implementing the function of displaying an icon in the view and clicking the icon to display the file selection screen. This time we will use haml notation.
Specify the label.class name as the parent element as shown in the image above, Nest the icon you want to display to the parent element.
This time this icon I want to add a function that the file selection screen appears when you click on Write input. class name {type: "file"} under icon.
This input {type: "file"} is the description part of the function that the file selection screen appears.
In this way, the file selection screen can be displayed when the icon is clicked in the flow of nesting for label → describing the icon to be displayed → describing the function to be implemented for the icon.
Click the icon to the left of the Send button to see the following.
The file selection screen is appearing.
As an additional note, input {type: "file"} is a description for making the file selection screen appear, but as it is, it is as follows.
Since the message "Select file" appears, you need to write the following in css to turn off this display.
.Hidden is the class name for input {type: "file"}. You can hide the selection of files by setting display: none ;.
that's all.
Recommended Posts