templates/templates/docs/atoms.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/master.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  6.     {{ encore_entry_link_tags('css/styleguide') }}
  7. {% endblock %}
  9. {% block bodyClass %}tpl-generic-page{% endblock %}
  11. {% block pageHeader %}
  12.     {% include 'molecules/page-header.html.twig' with {
  13.         breadcrumb: [
  14.             { path: path('index'), title: 'Libro de estilo web da USC' }
  15.         ],
  16.         title: 'Átomos'
  17.     } %}
  18. {% endblock %}
  20. {% block pageContent %}
  21.     <article class="generic-page-wrapper">
  22.         <div class="generic-page-intro">
  23.             <ul>
  24.                 <li><a href="#breadcrumb">Migas de pan</a></li>
  25.                 <li><a href="#buttons">Botóns</a></li>
  26.                 <li><a href="#desc-lists">Lista de descrición</a></li>
  27.                 <li><a href="#embeds">Embed</a></li>
  28.                 <li><a href="#icons">Iconas</a></li>
  29.                 <li><a href="#link-smart-icon">Ligazón con icona intelixente</a></li>
  30.                 <li><a href="#images">Imaxes</a></li>
  31.                 <li><a href="#lead-text">Texto de introdución</a></li>
  32.                 <li><a href="#tags">Etiquetas</a></li>
  33.                 <li><a href="#titles">Títulares</a></li>
  34.                 <li><a href="#text-filter">Filtro de texto</a></li>
  35.                 <li><a href="#dropdown-filter">Filtro despregable</a></li>
  36.                 <li><a href="#selectize-filter">Filtro <em>selectize</em></a></li>
  37.                 <li><a href="#print-button">Botón de imprimir</a></li>
  38.             </ul>
  39.         </div>
  40.         <div class="generic-page-content">
  41.             <div class="org-content-block" id="breadcrumb">
  42.                 <div class="content-block-content-wrapper">
  43.                     <h2>Migas de pan</h2>
  44.                     <p>Serven para indicar a localización da páxina actual na xerarquía de navegación.</p>
  46.                     {%
  47. set code = '<nav>
  48.     <ol class="at-breadcrumb">
  49.         <li class="breadcrumb-item">
  50.             <a href="">Nivel 1</a>
  51.         </li>
  52.         <li class="breadcrumb-item">
  53.             <a href="">Nivel 2</a>
  54.         </li>
  55.     </ol>
  56. </nav>'
  57.                     %}
  59.                     <div class="org-example">
  60.                         <div class="example-display">
  61.                             {{ code|raw }}
  62.                         </div>
  64.                         <pre class="example-code"><code>{{ code }}</code></pre>
  65.                     </div>
  66.                 </div>
  67.             </div>
  69.             <div class="org-content-block" id="buttons">
  70.                 <div class="content-block-content-wrapper">
  71.                     <h2>Botóns</h2>
  72.                     <p>Inclúense diferentes estilos de botóns. Poden usarse tanto con <code>&lt;button&gt;</code> coma con <code>&lt;a&gt;</code>.</p>
  74.                     {%
  75.                         set code = '
  76. <button type="button" class="at-button is-primary">Botón</button>
  77. <a href="" class="at-button is-secondary">Botón secundario</a>
  78. <a href="" class="at-button is-tertiary at-icon-image">Botón con icona</a>
  79. '
  80.                     %}
  82.                     <div class="org-example">
  83.                         <div class="example-display">
  84.                             {{ code|raw }}
  85.                         </div>
  87.                         <pre class="example-code"><code>{{ code }}</code></pre>
  88.                     </div>
  89.                 </div>
  90.             </div>
  92.             <div class="org-content-block" id="desc-lists">
  93.                 <div class="content-block-content-wrapper">
  94.                     <h2>Listas de descrición</h2>
  96.                     {%
  97.                         set code = '<dl class="at-desc-list">
  98.     <dt>Tipo</dt>
  99.     <dd>Presencial</dd>
  100.     <dt>Área</dt>
  101.     <dd>Ciencias Sociais e Xurídicas</dd>
  102. </dl>'
  103.                     %}
  105.                     <div class="org-example">
  106.                         <div class="example-display">
  107.                             {{ code|raw }}
  108.                         </div>
  110.                         <pre class="example-code"><code>{{ code }}</code></pre>
  111.                     </div>
  112.                 </div>
  113.             </div>
  115.             <div class="org-content-block" id="embeds">
  116.                 <div class="content-block-content-wrapper">
  117.                     <h2>Embeds</h2>
  118.                     <p>Para a visualización de contidos embebidos con comportamento responsive. É necesario empregar un modificador en función do ratio de aspecto do elementos entres os dispoñibles: <code>is-21by9</code>, <code>is-16by9</code>, <code>is-4by3</code> ou <code>is-1by1</code>. A lenda é opcional.</p>
  120.                     {%
  121.                         set code = '<figure class="at-embed is-16by9">
  122.     <div class="embed-wrapper">
  123.         <iframe src="https://www.youtube.com/embed/xpljv2ZCv3c" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" width="560" height="315" frameborder="0"></iframe>
  124.     </div>
  125.     <figcaption class="embed-caption">Este é un vídeo embebido cunha proporción 16:9</figcaption>
  126. </figure>'
  127.                     %}
  129.                     <div class="org-example">
  130.                         <div class="example-display">
  131.                             {{ code|raw }}
  132.                         </div>
  134.                         <pre class="example-code"><code>{{ code }}</code></pre>
  135.                     </div>
  136.                 </div>
  137.             </div>
  139.             <div class="org-content-block" id="icons">
  140.                 <div class="content-block-content-wrapper">
  141.                     <h2>Iconas</h2>
  142.                     <p>Inclúese unha fonte de iconas propia.</p>
  144.                     <div class="row">
  145.                         <div class="col-md-3">
  146.                             <div class="at-icon-facebook"></div>
  147.                             <code>at-icon-facebook</code>
  148.                         </div>
  149.                         <div class="col-md-3">
  150.                             <div class="at-icon-twitter"></div>
  151.                             <code>at-icon-twitter</code>
  152.                         </div>
  153.                         <div class="col-md-3">
  154.                             <div class="at-icon-whatsapp"></div>
  155.                             <code>at-icon-whatsapp</code>
  156.                         </div>
  157.                         <div class="col-md-3">
  158.                             <div class="at-icon-instagram"></div>
  159.                             <code>at-icon-instagram</code>
  160.                         </div>
  161.                         <div class="col-md-3">
  162.                             <div class="at-icon-intranet"></div>
  163.                             <code>at-icon-intranet</code>
  164.                         </div>
  165.                         <div class="col-md-3">
  166.                             <div class="at-icon-researchgate"></div>
  167.                             <code>at-icon-researchgate</code>
  168.                         </div>
  169.                         <div class="col-md-3">
  170.                             <div class="at-icon-orcid"></div>
  171.                             <code>at-icon-orcid</code>
  172.                         </div>
  173.                         <div class="col-md-3">
  174.                             <div class="at-icon-linkedin"></div>
  175.                             <code>at-icon-linkedin</code>
  176.                         </div>
  177.                         <div class="col-md-3">
  178.                             <div class="at-icon-google"></div>
  179.                             <code>at-icon-google</code>
  180.                         </div>
  181.                         <div class="col-md-3">
  182.                             <div class="at-icon-microsoft"></div>
  183.                             <code>at-icon-microsoft</code>
  184.                         </div>
  185.                         <div class="col-md-3">
  186.                             <div class="at-icon-pinterest"></div>
  187.                             <code>at-icon-pinterest</code>
  188.                         </div>
  189.                         <div class="col-md-3">
  190.                             <div class="at-icon-tv"></div>
  191.                             <code>at-icon-tv</code>
  192.                         </div>
  193.                         <div class="col-md-3">
  194.                             <div class="at-icon-image"></div>
  195.                             <code>at-icon-image</code>
  196.                         </div>
  197.                         <div class="col-md-3">
  198.                             <div class="at-icon-file-doc"></div>
  199.                             <code>at-icon-file-doc</code>
  200.                         </div>
  201.                         <div class="col-md-3">
  202.                             <div class="at-icon-file-excel"></div>
  203.                             <code>at-icon-file-excel</code>
  204.                         </div>
  205.                         <div class="col-md-3">
  206.                             <div class="at-icon-file-odt"></div>
  207.                             <code>at-icon-file-odt</code>
  208.                         </div>
  209.                         <div class="col-md-3">
  210.                             <div class="at-icon-file-pdf"></div>
  211.                             <code>at-icon-file-pdf</code>
  212.                         </div>
  213.                         <div class="col-md-3">
  214.                             <div class="at-icon-file-ppt"></div>
  215.                             <code>at-icon-file-ppt</code>
  216.                         </div>
  217.                         <div class="col-md-3">
  218.                             <div class="at-icon-file-word"></div>
  219.                             <code>at-icon-file-word</code>
  220.                         </div>
  221.                         <div class="col-md-3">
  222.                             <div class="at-icon-file-zip"></div>
  223.                             <code>at-icon-file-zip</code>
  224.                         </div>
  225.                         <div class="col-md-3">
  226.                             <div class="at-icon-access"></div>
  227.                             <code>at-icon-access</code>
  228.                         </div>
  229.                         <div class="col-md-3">
  230.                             <div class="at-icon-arrow"></div>
  231.                             <code>at-icon-arrow</code>
  232.                         </div>
  233.                         <div class="col-md-3">
  234.                             <div class="at-icon-briefcase"></div>
  235.                             <code>at-icon-briefcase</code>
  236.                         </div>
  237.                         <div class="col-md-3">
  238.                             <div class="at-icon-calendar"></div>
  239.                             <code>at-icon-calendar</code>
  240.                         </div>
  241.                         <div class="col-md-3">
  242.                             <div class="at-icon-check"></div>
  243.                             <code>at-icon-check</code>
  244.                         </div>
  245.                         <div class="col-md-3">
  246.                             <div class="at-icon-close"></div>
  247.                             <code>at-icon-close</code>
  248.                         </div>
  249.                         <div class="col-md-3">
  250.                             <div class="at-icon-envelope-open"></div>
  251.                             <code>at-icon-envelope-open</code>
  252.                         </div>
  253.                         <div class="col-md-3">
  254.                             <div class="at-icon-external-link"></div>
  255.                             <code>at-icon-external-link</code>
  256.                         </div>
  257.                         <div class="col-md-3">
  258.                             <div class="at-icon-flag"></div>
  259.                             <code>at-icon-flag</code>
  260.                         </div>
  261.                         <div class="col-md-3">
  262.                             <div class="at-icon-location"></div>
  263.                             <code>at-icon-location</code>
  264.                         </div>
  265.                         <div class="col-md-3">
  266.                             <div class="at-icon-location-alt"></div>
  267.                             <code>at-icon-location-alt</code>
  268.                         </div>
  269.                         <div class="col-md-3">
  270.                             <div class="at-icon-menu"></div>
  271.                             <code>at-icon-menu</code>
  272.                         </div>
  273.                         <div class="col-md-3">
  274.                             <div class="at-icon-menu-secondary"></div>
  275.                             <code>at-icon-menu-secondary</code>
  276.                         </div>
  277.                         <div class="col-md-3">
  278.                             <div class="at-icon-option"></div>
  279.                             <code>at-icon-option</code>
  280.                         </div>
  281.                         <div class="col-md-3">
  282.                             <div class="at-icon-paperclip"></div>
  283.                             <code>at-icon-paperclip</code>
  284.                         </div>
  285.                         <div class="col-md-3">
  286.                             <div class="at-icon-play"></div>
  287.                             <code>at-icon-play</code>
  288.                         </div>
  289.                         <div class="col-md-3">
  290.                             <div class="at-icon-search"></div>
  291.                             <code>at-icon-search</code>
  292.                         </div>
  293.                         <div class="col-md-3">
  294.                             <div class="at-icon-selected"></div>
  295.                             <code>at-icon-selected</code>
  296.                         </div>
  297.                         <div class="col-md-3">
  298.                             <div class="at-icon-selector-down"></div>
  299.                             <code>at-icon-selector-down</code>
  300.                         </div>
  301.                         <div class="col-md-3">
  302.                             <div class="at-icon-selector-up"></div>
  303.                             <code>at-icon-selector-up</code>
  304.                         </div>
  305.                         <div class="col-md-3">
  306.                             <div class="at-icon-square"></div>
  307.                             <code>at-icon-square</code>
  308.                         </div>
  309.                         <div class="col-md-3">
  310.                             <div class="at-icon-last"></div>
  311.                             <code>at-icon-last</code>
  312.                         </div>
  313.                         <div class="col-md-3">
  314.                             <div class="at-icon-first"></div>
  315.                             <code>at-icon-first</code>
  316.                         </div>
  317.                         <div class="col-md-3">
  318.                             <div class="at-icon-plus"></div>
  319.                             <code>at-icon-plus</code>
  320.                         </div>
  321.                         <div class="col-md-3">
  322.                             <div class="at-icon-minus"></div>
  323.                             <code>at-icon-minus</code>
  324.                         </div>
  325.                         <div class="col-md-3">
  326.                             <div class="at-icon-equal"></div>
  327.                             <code>at-icon-equal</code>
  328.                         </div>
  329.                         <div class="col-md-3">
  330.                             <div class="at-icon-etc"></div>
  331.                             <code>at-icon-etc</code>
  332.                         </div>
  333.                         <div class="col-md-3">
  334.                             <div class="at-icon-more"></div>
  335.                             <code>at-icon-more</code>
  336.                         </div>
  337.                         <div class="col-md-3">
  338.                             <div class="at-icon-target"></div>
  339.                             <code>at-icon-target</code>
  340.                         </div>
  341.                         <div class="col-md-3">
  342.                             <div class="at-icon-grid"></div>
  343.                             <code>at-icon-grid</code>
  344.                         </div>
  345.                         <div class="col-md-3">
  346.                             <div class="at-icon-logout"></div>
  347.                             <code>at-icon-logout</code>
  348.                         </div>
  349.                         <div class="col-md-3">
  350.                             <div class="at-icon-alert"></div>
  351.                             <code>at-icon-alert</code>
  352.                         </div>
  353.                         <div class="col-md-3">
  354.                             <div class="at-icon-info"></div>
  355.                             <code>at-icon-info</code>
  356.                         </div>
  357.                         <div class="col-md-3">
  358.                             <div class="at-icon-clock"></div>
  359.                             <code>at-icon-clock</code>
  360.                         </div>
  361.                         <div class="col-md-3">
  362.                             <div class="at-icon-temperature"></div>
  363.                             <code>at-icon-temperature</code>
  364.                         </div>
  365.                     </div>
  366.                 </div>
  367.             </div>
  369.             <div class="org-content-block" id="link-smart-icon">
  370.                 <aside class="content-block-attachments-wrapper">
  371.                     <div class="ml-alert is-attached">
  372.                         <h3 class="at-title">Nota sobre aplicación en Drupal</h3>
  373.                         <div class="at-text">
  374.                             <p>Nos estilos para Drupal contémplase a posibilidade de que a clase deste átomo non vaia na propia ligazón, senón no pai, como se pode ver na segunda lista de ligazóns. Neste caso este átomo debe levar o modificador <code>has-anchor-as-child</code>.</p>
  375.                         </div>
  376.                     </div>
  377.                 </aside>
  378.                 <div class="content-block-content-wrapper">
  379.                     <h2>Ligazón con icona intelixente</h2>
  381.                     {%
  382.                         set code = '<ul>
  383.     <li><a href="https://www.researchgate.net/profile/perfil_exemplo" class="at-link-smart-icon">Ligazón a ResearchGate</a></li>
  384.     <li><a href="https://orcid.org/exemplo" class="at-link-smart-icon">Ligazón a ORCID</a></li>
  385.     <li><a href="https://facebook.com/exemplo" class="at-link-smart-icon">Ligazón a Facebook</a></li>
  386.     <li><a href="https://twitter.com/exemplo" class="at-link-smart-icon">Ligazón a Twitter</a></li>
  387.     <li><a href="https://instagram.com/exemplo" class="at-link-smart-icon">Ligazón a Instagram</a></li>
  388.     <li><a href="https://linkedin.com/exemplo" class="at-link-smart-icon">Ligazón a LinkedIn</a></li>
  389.     <li><a href="https://pinterest.com/exemplo" class="at-link-smart-icon">Ligazón a Pinterest</a></li>
  390.     <li><a href="https://sharepoint.usc.gal/exemplo" class="at-link-smart-icon">Ligazón a intranet</a></li>
  391.     <li><a href="https://usc.gal/exemplo.pdf" class="at-link-smart-icon">Ligazón a un arquivo PDF</a></li>
  392.     <li><a href="https://usc.gal/exemplo.docx" class="at-link-smart-icon">Ligazón a un arquivo Word</a></li>
  393.     <li><a href="https://usc.gal/exemplo.odt" class="at-link-smart-icon">Ligazón a un arquivo ODT</a></li>
  394.     <li><a href="https://usc.gal/exemplo.xlsx" class="at-link-smart-icon">Ligazón a un arquivo Excel</a></li>
  395.     <li><a href="https://usc.gal/exemplo.ppt" class="at-link-smart-icon">Ligazón a un arquivo de presentación</a></li>
  396.     <li><a href="https://usc.gal/exemplo.zip" class="at-link-smart-icon">Ligazón a un arquivo ZIP</a></li>
  397.     <li><a href="https://usc.gal/" class="at-link-smart-icon">Calquera outra ligazón</a></li>
  398. </ul>
  400. <ul class="ml-buttons-list is-vertical">
  401.     <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://www.researchgate.net/profile/perfil_exemplo" class="">Ligazón a ResearchGate</a></li>
  402.     <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://www.linkedin.com/exemplo" class="">Ligazón a LinkedIn</a></li>
  403.     <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://usc.gal/exemplo.pdf">Ligazón a un arquivo PDF</a></li>
  404.     <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://usc.gal/">Calquera outra ligazón</a></li>
  405.     <li class="at-button is-tertiary at-link-smart-icon has-anchor-as-child"><a href="https://sharepoint.usc.gal/">Ligazón a intranet</a></li>
  406. </ul>
  407. '
  408.                     %}
  410.                     <div class="org-example">
  411.                         <div class="example-display">
  412.                             {{ code|raw }}
  413.                         </div>
  415.                         <pre class="example-code"><code>{{ code }}</code></pre>
  416.                     </div>
  417.                 </div>
  418.             </div>
  420.             <div class="org-content-block" id="images">
  421.                 <div class="content-block-content-wrapper">
  422.                     <h2>Imaxes</h2>
  424.                     {%
  425.                         set code = '<figure class="at-image">
  426.     <img src="https://picsum.photos/768/433" alt="">
  427.     <figcaption class="image-caption">Texto descritivo</figcaption>
  428. </figure>'
  429.                     %}
  431.                     <div class="org-example">
  432.                         <div class="example-display">
  433.                             {{ code|raw }}
  434.                         </div>
  436.                         <pre class="example-code"><code>{{ code }}</code></pre>
  437.                     </div>
  438.                 </div>
  439.             </div>
  441.             <div class="org-content-block" id="lead-text">
  442.                 <div class="content-block-content-wrapper">
  443.                     <h2>Texto de introdución</h2>
  445.                     {%
  446.                         set code = '<div class="at-lead-text">
  447.     <p>Vestibulum ac convallis lectus. <a href="">Proin in nibh imperdiet</a>, iaculis dui in, aliquet augue. Fusce tincidunt mattis massa et sollicitudin. Proin at lacinia metus.</p>
  448. </div>'
  449.                     %}
  451.                     <div class="org-example">
  452.                         <div class="example-display">
  453.                             {{ code|raw }}
  454.                         </div>
  456.                         <pre class="example-code"><code>{{ code }}</code></pre>
  457.                     </div>
  458.                 </div>
  459.             </div>
  461.             <div class="org-content-block" id="tags">
  462.                 <div class="content-block-content-wrapper">
  463.                     <h2>Etiquetas</h2>
  465.                     {%
  466.                         set code = '
  467. <a href="" class="at-tag is-primary">Etiqueta</a>
  468. <a href="" class="at-tag is-secondary">Etiqueta</a>
  469. <span class="at-tag is-secondary is-dismissable">
  470.     Etiqueta
  471.     <a href="" class="tag-dismiss"><span class="is-sr-only">Eliminar</span></a>
  472. </span>'
  473.                     %}
  475.                     <div class="org-example">
  476.                         <div class="example-display">
  477.                             {{ code|raw }}
  478.                         </div>
  480.                         <pre class="example-code"><code>{{ code }}</code></pre>
  481.                     </div>
  482.                 </div>
  483.             </div>
  485.             <div class="org-content-block" id="titles">
  486.                 <div class="content-block-content-wrapper">
  487.                     <h2>Titulares</h2>
  489.                     {%
  490.                         set code = '<h1 class="at-title is-1">Título 1</h1>
  491. <h2 class="at-title is-2">Título 2</h2>
  492. <h2 class="at-title is-2 is-sans">Título 2</h2>
  493. <h3 class="at-title is-3">Título 3</h3>
  494. <h3 class="at-title is-3 is-light">Título 3</h3>
  495. <h4 class="at-title is-4">Título 4</h4>
  496. <h6 class="at-title is-6">Título 6</h6>
  497. '
  498.                     %}
  500.                     <div class="org-example">
  501.                         <div class="example-display">
  502.                             {{ code|raw }}
  503.                         </div>
  505.                         <pre class="example-code"><code>{{ code }}</code></pre>
  506.                     </div>
  507.                 </div>
  508.             </div>
  510.             <div class="org-content-block" id="text-filter">
  511.                 <div class="content-block-content-wrapper">
  512.                     <h2>Filtro de texto</h2>
  514.                     {%
  515.                         set code = '<usc-text-filter
  516.     label="Filtro de texto"
  517.     name="filter_1"
  518.     icon="at-icon-search"
  519.     target-container="#container-1"
  520.     target-items=".ml-banner"
  521. ></usc-text-filter>'
  522.                     %}
  524.                     <div class="org-example">
  525.                         <div class="example-display">
  526.                             {{ code|raw }}
  527.                         </div>
  529.                         <pre class="example-code"><code>{{ code }}</code></pre>
  530.                     </div>
  531.                 </div>
  532.             </div>
  534.             <div class="org-content-block" id="dropdown-filter">
  535.                 <div class="content-block-content-wrapper">
  536.                     <h2>Filtro despregable</h2>
  538.                     {%
  539.                         set code = '<usc-dropdown-filter
  540.     label="Filtro"
  541.     target-container="#filtered-container-selector"
  542.     target-items=".target-items-selector"
  543.     :initial-value="{key: \'is-type-1\', value: \'Tipo 1\'}"
  544. >
  545.     <template v-slot:default="slotProps">
  546.         <li>
  547.             <button type="button" @click="slotProps.reset">Todos</button>
  548.         </li>
  549.         <li>
  550.             <button type="button" @click="slotProps.filter" data-value="is-type-1">Tipo 1</button>
  551.         </li>
  552.         <li>
  553.             <button type="button" @click="slotProps.filter" data-value="is-type-2">Tipo 2</button>
  554.         </li>
  555.     </template>
  556. </usc-dropdown-filter>
  558. <usc-dropdown-filter
  559.     label="Filtro"
  560. >
  561.     <template v-slot:default>
  562.         <li>
  563.             <a href="">Filtro con ligazón a páxina 1</a>
  564.         </li>
  565.         <li>
  566.             <a href="">Filtro con ligazón a páxina 2</a>
  567.         </li>
  568.     </template>
  569. </usc-dropdown-filter>'
  570.                     %}
  572.                     <div class="org-example">
  573.                         <div class="example-display">
  574.                             {{ code|raw }}
  575.                         </div>
  577.                         <pre class="example-code"><code>{{ code }}</code></pre>
  578.                     </div>
  579.                 </div>
  580.             </div>
  582.             <div class="org-content-block" id="selectize-filter">
  583.                 <div class="content-block-content-wrapper">
  584.                     <h2>Filtro <em>selectize</em></h2>
  586.                     <p>Para filtros tipo despregable con moitos resultados. Permite buscar sobre as opcións diposñibles.</p>
  588.                     {%
  589.                         set code = '<usc-selectize-filter
  590.     label="Filtro"
  591.     target-container="#filtered-container-selector"
  592.     target-items=".target-items-selector"
  593.     :options="[{key: \'is-type-1\', value: \'Tipo 1\'}, {key: \'is-type-2\', value: \'Tipo 2\'}]"
  594. >
  595. </usc-selectize-filter>'
  596.                     %}
  598.                     <div class="org-example">
  599.                         <div class="example-display">
  600.                             {{ code|raw }}
  601.                         </div>
  603.                         <pre class="example-code"><code>{{ code }}</code></pre>
  604.                     </div>
  605.                 </div>
  606.             </div>
  608.             <div class="org-content-block" id="print-button">
  609.                 <div class="content-block-content-wrapper">
  610.                     <h2>Botón de imprimir</h2>
  612.                     <p>Este compoñente permite imprimir unha parte determinada da páxina. Hai que especificarlle o id do elemento que queremos que se imprima na propiedade target. Podemos especificarlle un modificador de tipo de <a href="#buttons">botón</a>.</p>
  614.                     {%
  615.                         set code = '<usc-print-button target="print-button" class="is-primary">
  616.     Imprimir
  617. </usc-print-button>'
  618.                     %}
  620.                     <div class="org-example">
  621.                         <div class="example-display">
  622.                             {{ code|raw }}
  623.                         </div>
  625.                         <pre class="example-code"><code>{{ code }}</code></pre>
  626.                     </div>
  627.                 </div>
  628.             </div>
  629.         </div>
  630.     </article>
  631. {% endblock %}