Go one step further with our solutions for creating an intuitive, personalized experience.
Sheet components offer you new dimensions and perspectives for adding interactive content.
To create a Sheet component, use the h_sheet class.
This component will appear when called.
This component has 3 parts: h_sheet_header, h_sheet_body and h_sheet_footer
h_sheet_body is scrollable if necessary.
The id attribute allows you to target it.
<div class="h_sheet" id="sheet_1">
<div class="h_sheet_header"></div>
<div class="h_sheet_body"></div>
<div class="h_sheet_footer"></div>
</div>
Once the component is in place, call it with the sheet.open() method.
<button type="button" onclick="sheet.open('sheet_1')">Sheet</button>
<div class="h_sheet" id="sheet_1">
<div class="h_sheet_header">Header</div>
<div class="h_sheet_body">Hello World!</div>
<div class="h_sheet_footer">Footer</div>
</div>
To close the Sheet component, use the sheet.close() method.
<button type="button" onclick="sheet.open('sheet_2')">Sheet</button>
<div class="h_sheet" id="sheet_2">
<div class="h_sheet_header">Header</div>
<div class="h_sheet_body">Hello World!</div>
<div class="h_sheet_footer">
<button type="button" onclick="sheet.close('sheet_2')">Close</button>
</div>
</div>
By default, these components appear from the bottom of the screen. The left and right classes redefine the positioning of the Sheet component.
<button type="button" onclick="sheet.open('sheet_3')">Left</button>
<div class="h_sheet left" id="sheet_3">
<div class="h_sheet_body">From Left</div>
</div>
<button type="button" onclick="sheet.open('sheet_4')">Right</button>
<div class="h_sheet right" id="sheet_4">
<div class="h_sheet_body">From Right</div>
</div>
The left--[B] and right--[B] structure allows you to change the positioning according to the [B] breakpoint (e.g. left--t, right--m).
<button type="button" onclick="sheet.open('sheet_5')">Open Sheet</button>
<div class="h_sheet left--t width_400px--t" id="sheet_5">
<div class="h_sheet_body">
I come from the left above the breakpoint "t",<br>
and I come from below the breakpoint "t".
</div>
</div>
The static--[X] class displays the component beyond the specified breakpoint X.
For example, static--t the component will be visible beyond the breakpoint t.
It is also possible to resize them using sizing classes.
<div class="h_sheet static--d width_400px--t" id="sheet_6">...</div>
The sheet.open() method takes a second parameter that prevents the sheet from being closed from its overlay.
By default this parameter is true, set it to false to prevent closing from the overlay.
This sheet can only be closed by clicking on this next button.
<button type="button" onclick="sheet.open('sheet_7', false)">Open sheet</button>
<div class="h_sheet left" id="sheet_7">
<div class="h_sheet_body">
<p>This sheet can only be closed by clicking on this next button.</p>
<button type="button" onclick="sheet.close('sheet_7')">Close</button>
</div>
</div>
<button type="button" onclick="sheet.open('sheet_8')">Open Sheet</button>
<div class="h_sheet left--t width_400px--t" id="sheet_8">
<div class="h_sheet_body">
I come from the left above the breakpoint "t",<br>
and I come from below the breakpoint "t".
</div>
</div>
| Class | Definition |
|---|---|
| h_sheet | Create a Sheet component. |
| h_sheet_header | Sheet header. |
| h_sheet_body | Sheet body (scrollable). |
| h_sheet_footer | Sheet footer. |
| left | From left. |
| right | From right. |
| left--[B] | From left with breakpoint [B]. |
| right--[B] | From right with breakpoint [B]. |
| static--[B] | Static behavior at the breakpoint [B]. |
| Methods | Definition |
|---|---|
| sheet.open(idSheet, canClose = true) | Open a Sheet component. |
| sheet.close(idSheet) | Close a Sheet component. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings