Gov Design System CE - Templates

Řazení 

<gov-dropdown class="gov-mobile-only" aria-label="Výběr způsobu řazení výsledků vyhledávání">
    <gov-button color="primary" size="m" type="outlined" class=" gov-button-text-left" expanded="true">
        <gov-icon type="templates" name="sort-down" slot="icon-start"></gov-icon>

        <span class="gov-text-weight--normal">Řazení:</span> Nejčastěji navštěvované

    </gov-button>
    <ul slot="list" role="menu">
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Nejčastěji navštěvované

            </gov-button>
        </li>
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Online vyřízení jako první

            </gov-button>
        </li>
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Podle názvu (od A po Z)

            </gov-button>
        </li>
    </ul>
</gov-dropdown>
<gov-dropdown position="right" class="gov-desktop-only" aria-label="Výběr způsobu řazení výsledků vyhledávání">
    <gov-button color="primary" size="m" type="base">

        <span class="gov-text-weight--normal">Řazení:</span> Nejčastěji navštěvované

        <gov-icon type="templates" name="chevron-down" slot="icon-end"></gov-icon>
    </gov-button>
    <ul slot="list" role="menu">
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Nejčastěji navštěvované

            </gov-button>
        </li>
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Online vyřízení jako první

            </gov-button>
        </li>
        <li role="presentation">
            <gov-button color="neutral" size="m" type="base" expanded="true" role="menuitem">
                Podle názvu (od A po Z)

            </gov-button>
        </li>
    </ul>
</gov-dropdown>
 
<gov-dropdown class="gov-mobile-only"{{#if dropdown/aria-label}} aria-label="{{ dropdown/aria-label }}"{{/if}}>
    {{#> @button button-mobile }}
        <span class="gov-text-weight--normal">{{ label/normal }}</span> {{ label/bold }}
    {{/@button}}
    <ul slot="list" role="menu">
        {{#each list}}
            <li role="presentation">
                {{ render '@button' this }}
            </li>
        {{/each}}
    </ul>
</gov-dropdown>
<gov-dropdown position="right" class="gov-desktop-only"{{#if dropdown/aria-label}} aria-label="{{ dropdown/aria-label }}"{{/if}}>
    {{#> @button button-desktop }}
        <span class="gov-text-weight--normal">{{ label/normal }}</span> {{ label/bold }}
    {{/@button}}
    <ul slot="list" role="menu">
        {{#each list}}
            <li role="presentation">
                {{ render '@button' this }}
            </li>
        {{/each}}
    </ul>
</gov-dropdown>
 
{
  "dropdown": {
    "aria-label": "Výběr způsobu řazení výsledků vyhledávání"
  },
  "button-mobile": {
    "color": "primary",
    "type": "outlined",
    "size": "m",
    "expanded": true,
    "classes": [
      "gov-button-text-left"
    ],
    "icon-start": {
      "slot": "icon-start",
      "type": "templates",
      "name": "sort-down"
    },
    "label": {
      "normal": "Řazení:",
      "bold": "Nejčastěji navštěvované"
    }
  },
  "button-desktop": {
    "color": "primary",
    "type": "base",
    "size": "m",
    "icon-end": {
      "slot": "icon-end",
      "type": "templates",
      "name": "chevron-down"
    },
    "label": {
      "normal": "Řazení:",
      "bold": "Nejčastěji navštěvované"
    }
  },
  "list": [
    {
      "text": "Nejčastěji navštěvované",
      "color": "neutral",
      "type": "base",
      "size": "m",
      "expanded": true,
      "role": "menuitem"
    },
    {
      "text": "Online vyřízení jako první",
      "color": "neutral",
      "type": "base",
      "size": "m",
      "expanded": true,
      "role": "menuitem"
    },
    {
      "text": "Podle názvu (od A po Z)",
      "color": "neutral",
      "type": "base",
      "size": "m",
      "expanded": true,
      "role": "menuitem"
    }
  ]
}

No notes defined.