Gov Design System CE - Templates

Filters 

<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>
 
<form class="gov-filters">
    <gov-flex direction="column" gap="s">
        {{#each filter-group as |group index|}}
            <fieldset>
                <legend class="gov-filters__heading" aria-label="{{ lookup ../filter-aria-label index }}">{{ group.name }}</legend>
                {{#if group.search }}
                    <gov-form-control type="input">
                        <gov-form-input placeholder="{{ search }}" size="s" aria-label="{{ lookup ../search-aria-label index }}">
                            <gov-icon slot="icon-end" type="templates" name="search"></gov-icon>
                        </gov-form-input>
                    </gov-form-control>
                {{/if}}
                <ul class="gov-list--plain">
                    {{#if group.checkbox}}
                        {{#each group.filter}}
                        <li>
                            <gov-form-checkbox size="m" value="{{ value }}"{{#if checked}} checked{{/if}}{{#if disabled}} disabled{{/if}}>
                                <gov-form-label size="m" slot="label">{{ value }} {{ count }}</gov-form-label>
                            </gov-form-checkbox>
                        </li>
                        {{/each}}
                    {{/if}}
                    {{#if group.radio}}
                        {{#each group.filter}}
                            <li>
                                <gov-form-radio size="m" name="example" value="{{ value }}"{{#if checked}} checked{{/if}}{{#if disabled}} disabled{{/if}}>
                                    <gov-form-label size="m" slot="label">{{ value }} {{ count }}</gov-form-label>
                                </gov-form-radio>
                            </li>
                        {{/each}}
                    {{/if}}
                </ul>
                {{#if group.more}}
                    {{#> @button more }}
                        <span class="gov-text-weight--normal">{{ label }}</span>
                    {{/@button}}
                {{/if}}
            </fieldset>
        {{/each}}

        {{#if accordion}}
            <fieldset>
                <legend class="gov-sr-only">{{ accordions/legend }}</legend>
                <gov-accordion size="m" no-border>
                    {{#each accordion}}
                    <gov-accordion-item>
                        <span slot="label">{{ name }}</span>
                        <ul class="gov-list--plain">
                            {{#if checkbox}}
                                {{#each filter}}
                                    <li>
                                        <gov-form-checkbox size="m" value="{{ value }}">
                                            <gov-form-label size="m" slot="label">{{ value }} {{ count }}</gov-form-label>
                                        </gov-form-checkbox>
                                    </li>
                                {{/each}}
                            {{/if}}
                            {{#if radio}}
                                {{#each filter}}
                                    <li>
                                        <gov-form-radio name="example" size="m" value="{{ value }}">
                                            <gov-form-label size="m" slot="label">{{ value }} {{ count }}</gov-form-label>
                                        </gov-form-radio>
                                    </li>
                                {{/each}}
                            {{/if}}
                        </ul>
                    </gov-accordion-item>
                    {{/each}}
                </gov-accordion>
            </fieldset>
        {{/if}}
    </gov-flex>
</form>
 
{
  "accordions": {
    "legend": "Další filtry aktualit"
  },
  "filter-group": [
    {
      "name": "Název filtru",
      "checkbox": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    },
    {
      "name": "Název filtru",
      "radio": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    },
    {
      "name": "Název filtru",
      "checkbox": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    }
  ],
  "accordion": [
    {
      "name": "Název filtru",
      "checkbox": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    },
    {
      "name": "Název filtru",
      "radio": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    },
    {
      "name": "Název filtru",
      "checkbox": "true",
      "filter": [
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        },
        {
          "value": "Hodnota",
          "count": "(10)"
        }
      ]
    }
  ]
}
  • Content: 
    .gov-filters {
    ul li {
        padding: 0 var(--spacing-m);
        li {
            padding: 0;
        }
    }
    ul ul {
        margin: 0;
        padding-top: var(--spacing-2xs);
        padding-bottom: var(--spacing-s);
    }
    &__heading {
        display: inline-block;
        padding-top: var(--spacing-s);
        padding-bottom: var(--spacing-s);
        color: var(--text-primary-color);
    }
    &__more {
        padding-bottom: var(--spacing-s) !important;
    }
    gov-accordion-item__content, .gov-accordion-item__content {
        padding: var(--spacing-2xs) 0 var(--spacing-s) 0 !important;
    }
}
  • URL: /components/raw/filters/filters.scss
  • Filesystem Path: src/components/organisms/filters/filters.scss
  • Size: 627 Bytes

No notes defined.