属性とメタタグ

データ属性

次のデータ属性を要素に対して利用することで、Turbo の挙動をカスタマイズできます。

原文

The following data attributes can be applied to elements to customize Turbo’s behaviour.

  • data-turbo="false" disables Turbo Drive on links and forms including descendants. To reenable when an ancestor has opted out, use data-turbo="true". Be careful: when Turbo Drive is disabled, browsers treat link clicks as normal, but native adapters may exit the app.
  • data-turbo-track="reload" tracks the element’s HTML and performs a full page reload when it changes. Typically used to keep script and CSS link elements up-to-date.
  • data-turbo-frame identifies the Turbo Frame to navigate. Refer to the Frames documentation for further details.
  • data-turbo-preload signals to Drive to pre-fetch the next page’s content
  • data-turbo-action customizes the Visit action. Valid values are replace or advance. Can also be used with Turbo Frames to promote frame navigations to page visits.
  • data-turbo-permanent persists the element between page loads. The element must have a unique id attribute. It also serves to exclude elements from being morphed when using page refreshes with morphing
  • data-turbo-temporary removes the element before the document is cached, preventing it from reappearing when restored.
  • data-turbo-eval="false" prevents inline script elements from being re-evaluated on Visits.
  • data-turbo-method changes the link request type from the default GET. Ideally, non-GET requests should be triggered with forms, but data-turbo-method might be useful where a form is not possible.
  • data-turbo-stream specifies that a link or form can accept a Turbo Streams response. Turbo automatically requests stream responses for form submissions with non-GET methods; data-turbo-stream allows Turbo Streams to be used with GET requests as well.
  • data-turbo-confirm presents a confirm dialog with the given value. Can be used on form elements or links with data-turbo-method.
  • data-turbo-submits-with specifies text to display when submitting a form. Can be used on input or button elements. While the form is submitting the text of the element will show the value of data-turbo-submits-with. After the submission, the original text will be restored. Useful for giving user feedback by showing a message like “Saving…” while an operation is in progress.

自動的に追加される属性

次の属性は Turbo が自動的に追加します。ある瞬間の Visit の状態を判断するのに便利です。

原文

The following attributes are automatically added by Turbo and are useful to determine the Visit state at a given moment.

  • disabled is added to the form submitter while the form request is in progress, to prevent repeat submissions.
  • data-turbo-preview is added to the html element when displaying a preview during a Visit.
  • data-turbo-visit-direction is added to the html element during a visit, with a value of forward or back or none, to indicate its direction.
  • aria-busy is added to html and turbo-frame elements when a navigation is in progress.

メタタグ

次のmeta要素をhead要素に追加することで、キャッシュや Visit の振る舞いをカスタマイズできます。

原文

The following meta elements, added to the head, can be used to customize caching and Visit behavior.