Docs

Toast

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
Overview   Configuration   Styling   Arguments  

Overview  

  Important

To support multiple toast messages on the same page, each toast message is explicitly linked to a button using the parameter id since release v0.14.3  . Hinode wraps the individual toast messages in a container to stack them automatically.

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen. Give the toast a unique id and assign this value to the toast argument of a button. As an example, the following shortcode displays two buttons that, when clicked, trigger a toast message. The messages are stacked when both buttons are clicked in a short timeframe.

Show toast 1   Show toast 2  
markdown 
{{< button toast-id="toast-example-1" >}}
    Show toast 1
{{< /button >}}

{{< button toast-id="toast-example-2" >}}
    Show toast 2
{{< /button >}}

{{< toast id="toast-example-1" title="First title" >}}
    This is the first toast message.
{{< /toast >}}

{{< toast id="toast-example-2" title="Second title" >}}
    This is the second toast message.
{{< /toast >}}

Configuration  

Added in v0.14.4     

By default, toast messages are displayed in the bottom right of the viewport. Hinode vertically stacks multiple toast messages automatically. Adjust the configuration by adjusting messages in the site parameters.

[messages]
    placement = "bottom-right"

The following arguments are supported:

Setting Default Description
placement “bottom-right” Optional position of the toast messages relative to the viewport: “top-left”, “top-center”,“top-right”, “middle-left”, “middle-center”, “middle-right”, “bottom-left”, “bottom-center”, or “bottom-right” (default).
Setting Default
placement “bottom-right”
Optional position of the toast messages relative to the viewport: “top-left”, “top-center”,“top-right”, “middle-left”, “middle-center”, “middle-right”, “bottom-left”, “bottom-center”, or “bottom-right” (default).

Styling  

The file assets/scss/components/_toast.scss defines the Hinode-specific styling of the toast shortcode. Check the Bootstrap documentation  for additional styling options.

.toast {
    border-radius: #{$theme-border-radius};
    overflow: hidden;
}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
header string v1.0.0      Use title instead. Header of the toast message. Uses the site title by default.
id string Unique identifier of the current element.
title string, hstring.RenderedString, hstring.HTML, template.HTML v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
header string
v1.0.0      Use title instead. Header of the toast message. Uses the site title by default.
id string
Unique identifier of the current element.
title string, hstring.RenderedString, hstring.HTML, template.HTML
v1.0.0      Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
On this page