<section aria-label="Počet výsledků vyhledávání a jejich řazení">
<gov-flex gap="m" justify-content="space-between" align-items="center">
<span>96 výsledků vyhledávání</span>
<gov-button color="primary" size="m" type="solid" class=" gov-mobile-only gov-button-text-left" expanded="true">
<gov-icon type="templates" name="sliders" slot="icon-start"></gov-icon>
Filtrovat výsledky
</gov-button>
<gov-dialog id="dialog" accessible-close-label="Zavřít dialog s filtry">
<h3 slot="title">Filtry</h3>
<form class="gov-filters">
<gov-flex direction="column" gap="s">
<fieldset>
<legend class="gov-filters__heading" aria-label="">Název filtru</legend>
<ul class="gov-list--plain">
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
</ul>
</fieldset>
<fieldset>
<legend class="gov-filters__heading" aria-label="">Název filtru</legend>
<ul class="gov-list--plain">
<li>
<gov-form-radio size="m" name="example" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio size="m" name="example" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio size="m" name="example" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio size="m" name="example" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
</ul>
</fieldset>
<fieldset>
<legend class="gov-filters__heading" aria-label="">Název filtru</legend>
<ul class="gov-list--plain">
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
</ul>
</fieldset>
<fieldset>
<legend class="gov-sr-only">Další filtry aktualit</legend>
<gov-accordion size="m" no-border>
<gov-accordion-item>
<span slot="label">Název filtru</span>
<ul class="gov-list--plain">
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
</ul>
</gov-accordion-item>
<gov-accordion-item>
<span slot="label">Název filtru</span>
<ul class="gov-list--plain">
<li>
<gov-form-radio name="example" size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio name="example" size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio name="example" size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
<li>
<gov-form-radio name="example" size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-radio>
</li>
</ul>
</gov-accordion-item>
<gov-accordion-item>
<span slot="label">Název filtru</span>
<ul class="gov-list--plain">
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
<li>
<gov-form-checkbox size="m" value="Hodnota">
<gov-form-label size="m" slot="label">Hodnota (10)</gov-form-label>
</gov-form-checkbox>
</li>
</ul>
</gov-accordion-item>
</gov-accordion>
</fieldset>
</gov-flex>
</form>
<gov-button color="error" size="m" type="base" expanded="true" slot="footer">
Zrušit filtry
</gov-button>
<gov-button color="primary" size="m" type="solid" expanded="true" slot="footer">
Zobrazit výsledky (96)
</gov-button>
</gov-dialog>
<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-flex>
</section>
<section aria-label="{{ aria-label }}">
<gov-flex gap="m" justify-content="space-between" align-items="center">
<span>{{ count }}</span>
{{ render '@button' button }}
<gov-dialog id="dialog" accessible-close-label="{{ filter-dialog/close }}">
{{ render '@heading' filter-dialog/heading }}
{{ render '@filters' filters }}
{{#each filter-dialog/button}}
{{ render '@button' this }}
{{/each}}
</gov-dialog>
{{ render '@sorting' this merge=true }}
</gov-flex>
</section>
{
"aria-label": "Počet výsledků vyhledávání a jejich řazení",
"count": "96 výsledků vyhledávání",
"button": {
"text": "Filtrovat výsledky",
"color": "primary",
"type": "solid",
"size": "m",
"expanded": true,
"classes": [
"gov-mobile-only",
"gov-button-text-left"
],
"icon-start": {
"slot": "icon-start",
"type": "templates",
"name": "sliders"
}
},
"filter-dialog": {
"heading": {
"slot": "title",
"tag": "h3",
"name": "Filtry"
},
"close": "Zavřít dialog s filtry",
"button": [
{
"text": "Zrušit filtry",
"color": "error",
"type": "base",
"size": "m",
"expanded": true,
"slot": "footer"
},
{
"text": "Zobrazit výsledky (96)",
"color": "primary",
"type": "solid",
"size": "m",
"expanded": true,
"slot": "footer"
}
]
}
}
No notes defined.