Search code examples
screengravtabbed

How to make tabbed code screen on Grav Learn2

I could not find a solution for that tabbed code screen. Can anyone help me to figure it out ?

screenshot : https://i.sstatic.net/GUG4r.jpg

also this is the page which in screenshot: https://dev.iyzipay.com/tr/api/taksit-sorgulama

Thanks.

Solution

  • The tabs have been generated using the Grav Shortcode UI Plugin.

    Here is an example from https://learn.getgrav.org/16/content/media#url:

    markdown

    [ui-tabs]
  [ui-tab title="Twig"]
    {% verbatim %}
      {{ page.media['sample-image.jpg'].url|e }}
    {% endverbatim %}
  [/ui-tab]

  [ui-tab title="HTML Code"]
    {{ page.media['sample-image.jpg'].url|e }}
  [/ui-tab]
[/ui-tabs]

    result

    enter image description here

    The markdown source of above sample can be found at the repo of the docs: https://github.com/getgrav/grav-learn/blob/develop/pages/02.content/07.media/docs.md