[Ruby] [How to use label]

1 minute read

We will output the method to display the icon in the view and click the icon to display the file selection screen. This time I will use the haml notation.

icon_label.png

Specify the label.class name as the parent element as shown in the image above, Nest the icon you want to display with respect to the parent element.

This time this icon Since I want to add the function that a file selection screen appears when I click on, Under the icon, write input. class name {type:”file”}.

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 appear when clicking an icon in the flow of nesting → describing the icon you want to display → describing the function you want to implement for the icon.

label.png

Click on the icon to the left of the Send button to see the following.

label1.png

The file selection screen has appeared.

As a postscript, input{type: “file”} is a description for making the file selection screen appear.

label4.png

Since the display that the file is selected appears, it is necessary to describe it in css as follows to delete this display.

label5.png

.Hidden is the class name of input{type: “file”}. You can hide the selection of files by setting display:none;.

that’s all.