Stylebook

Dropdown small

        {% include "@Components/dropdown/dropdown.twig" with {
  props : {
    variant: "small",
    options: [
      {
        title: "Výchozí řazení"
      }, {
        title: "Nejlépe hodnocené"
      }, {
        title: "Nejprve nejstarší",
        selected: true
      }, {
        title: "Nejprve nejnovější"
      }
    ]
  }
} %}

          <div class="dropdown__wrapper --small">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Výchozí řazení</option>
          <option value=""  >Nejlépe hodnocené</option>
          <option value=""  selected="selected"  >Nejprve nejstarší</option>
          <option value=""  >Nejprve nejnovější</option>
    
  </select>

</div>

Dropdown

        {% include "@Components/dropdown/dropdown.twig" with {
  props : {
    options: [
      {
        title: "Vyberte region"
      }, {
        title: "Jihočeský"
      }, {
        title: "Jihomoravský"
      }, {
        title: "Středočeský"
      }, {
        title: "Severočeský"
      }, {
        title: "Severomoravský"
      }, {
        title: "Východočeský"
      }, {
        title: "Západočeský"
      }
    ]
  }
} %}

          <div class="dropdown__wrapper --default">
    <select class="form-control dropdown" name="choices-single-no-sorting"
            >

    
          <option value=""  >Vyberte region</option>
          <option value=""  >Jihočeský</option>
          <option value=""  >Jihomoravský</option>
          <option value=""  >Středočeský</option>
          <option value=""  >Severočeský</option>
          <option value=""  >Severomoravský</option>
          <option value=""  >Východočeský</option>
          <option value=""  >Západočeský</option>
    
  </select>

</div>

Dropdown

        {% include "@Components/dropdown/dropdown.twig" with {props: {
    variant: "with-icon",
    id: "with-icon",
    options: [
      {
        title: "Byty",
        icon: {
          src: "images/svg/flat.svg"
        }
      },
      {
        title: "Domy",
        icon: {
          src: "images/svg/house.svg"
        }
      },
      {
        title: "Pozemky",
        icon: {
          src: "images/svg/land.svg"
        }

      },
      {
        title: "Rekreační",
        icon: {
          src: "images/svg/recreation.svg"
        }
      },
      {
        title: "Zahraniční",
        icon: {
          src: "images/svg/foreign.svg"
        }
      },
      {
        title: "Komerční",
        icon: {
          src: "images/svg/commercial.svg"
        }
      },
      {
        title: "Projekty",
        icon: {
          src: "images/svg/project.svg"
        },
        selected: true
      },
      {
        title: "Ostatní",
        icon: {
          src: "images/svg/other.svg"
        }
      }
    ]
  }
} %}

          <div class="dropdown__wrapper --with-icon">
    <select class="form-control dropdown" id="with-icon" name="choices-single-no-sorting"
            >

    
          <option value=""   data-icon="images/svg/flat.svg" >Byty</option>
          <option value=""   data-icon="images/svg/house.svg" >Domy</option>
          <option value=""   data-icon="images/svg/land.svg" >Pozemky</option>
          <option value=""   data-icon="images/svg/recreation.svg" >Rekreační</option>
          <option value=""   data-icon="images/svg/foreign.svg" >Zahraniční</option>
          <option value=""   data-icon="images/svg/commercial.svg" >Komerční</option>
          <option value=""  selected="selected"   data-icon="images/svg/project.svg" >Projekty</option>
          <option value=""   data-icon="images/svg/other.svg" >Ostatní</option>
    
  </select>

</div>

Dropdown

        {% include "@Components/dropdown/dropdown.twig" with {props: {
    variant: "outline-white",
    id: "outline-white",
    options: [
      {
        title: "Byty",
      },
      {
        title: "Domy",
      },
      {
        title: "Pozemky",
      },
      {
        title: "Rekreační",
      },
      {
        title: "Zahraniční",
      },
      {
        title: "Komerční",
      },
      {
        title: "Projekty",
        selected: true
      },
      {
        title: "Ostatní",
      }
    ]
  }
} %}

          <div class="dropdown__wrapper --outline-white">
    <select class="form-control dropdown" id="outline-white" name="choices-single-no-sorting"
            >

    
          <option value=""  >Byty</option>
          <option value=""  >Domy</option>
          <option value=""  >Pozemky</option>
          <option value=""  >Rekreační</option>
          <option value=""  >Zahraniční</option>
          <option value=""  >Komerční</option>
          <option value=""  selected="selected"  >Projekty</option>
          <option value=""  >Ostatní</option>
    
  </select>

</div>

Dropdown s "odkazy"

Nejsou to přímo odkazy, kliknutí odchytne JS a přesměruje na value zvolené option selectu.

        {% include "@Components/dropdown/dropdown.twig" with {
	props : {
		asLinks: true,
		options: [
			{
				selected: true,
				title: "Výchozí řazení",
				value: "https://www.ceskereality.cz/",
			}, {
				title: "Nejlépe hodnocené",
				value: "https://www.vn1.cz/",
			}, {
				title: "Nejprve nejstarší",
				value: "https://www.vn1.cz/",
			}, {
				title: "Nejprve nejnovější",
				value: "https://www.vn1.cz/",
			}
		]
	}
} %}

          <div class="dropdown__wrapper --default">
    <select class="form-control dropdown" name="choices-single-no-sorting"
                        onchange="location = this.value;"
            >

    
          <option value="https://www.ceskereality.cz/"  selected="selected"  >Výchozí řazení</option>
          <option value="https://www.vn1.cz/"  >Nejlépe hodnocené</option>
          <option value="https://www.vn1.cz/"  >Nejprve nejstarší</option>
          <option value="https://www.vn1.cz/"  >Nejprve nejnovější</option>
    
  </select>

</div>

Dropdown submit onchange

        {% include "@Components/dropdown/dropdown.twig" with {
	props : {
		name: 'test-param',
		submitOnChange: true,
		options: [
			{
				selected: true,
				title: "Výchozí řazení",
				value: "1",
			}, {
				title: "Nejlépe hodnocené",
				value: "2",
			}, {
				title: "Nejprve nejstarší",
				value: "3",
			}, {
				title: "Nejprve nejnovější",
				value: "4",
			}
		]
	}
} %}

          <div class="dropdown__wrapper --default">
    <select class="form-control dropdown" name="test-param"
                        onchange="this.form.submit();"
            >

    
          <option value="1"  selected="selected"  >Výchozí řazení</option>
          <option value="2"  >Nejlépe hodnocené</option>
          <option value="3"  >Nejprve nejstarší</option>
          <option value="4"  >Nejprve nejnovější</option>
    
  </select>

</div>

Schema

    {
  "props": {
    "variant": {
      "type": "string",
      "description": "small | with-icon | default(default)"
    },
    "id": {
      "type": "string",
      "description": "ID of select"
    },
    "option": {
      "type": "array of objects",
      "title": {
        "type": "string",
        "description": "Title of the option"
      },
      "src": {
        "type": "string",
        "description": "Path to icon"
      },
      "selected": {
        "type": "boolean",
        "description": "true | undefined"
      }
    }
  }
}