1. Komponenty

Akordeon

angl. Accordion

Slouží ke sbalení obsahu, který pro uživatele není v dané chvíli podstatný.

Ukázka použití akordeonu v textu


    <div class="accordion">
        <a href="#" class="accordion__link">
            <h3 class="accordion__title">05. Kdo je oprávněn v této věci jednat (podat žádost apod.)</h3>
        </a>
        <div class="accordion__content">
            <p>
                The main advantage of a computer audio player is that you can play your audio CDs and there is no longer any need to have a separate CD player. However the capabilities of the computer audio player go beyond just playing traditional music CDs. You can also play sound clips in one of the many audio formats found in the information technology industry today. The MP3 format is a standard whereby a high rate of compression can be achieved on sound files allowing the ability to store large numbers of them on hard disk.
            </p>
        </div>
    </div>
    <div class="accordion">
        <a href="#" class="accordion__link">
            <h3 class="accordion__title">06. Jaké jsou podmínky a postup pro řešení životní situace</h3>
        </a>
        <div class="accordion__content">
            <p>
                Do důchodu se započítávají všechny příjmy, z nichž je odváděno pojistné na sociální zabezpečení (např. i brigády). Nezapočítávají se takové příjmy v rámci zaměstnání, z kterých se neodvádí pojistné. Započítává se však náhrada mzdy po skončení pracovní neschopnosti náležející za pracovní úraz nebo nemoc z povolání, i když se z ní pojistné neplatí.
            </p>
            <h3 class="mb-1">Výpočet starobního důchodu v roce 2017:</h3>
            <p>
                Muž narozený 5.5.1954 požádal o starobní důchod podle § 29 zákona o důchodovém pojištění od dosažení důchodového věku. Jeho důchodový věk činí 63 let a 2 měsíce, tohoto věku dosáhne 5.7.2017. Získal celkem 45 let pojištění a jeho osobní vyměřovací základ za rozhodné období let 1986 až 2016 činí 45 000 Kč.
                Výpočtový základ se stanoví z osobního vyměřovacího základu následujícím způsobem:
            </p>
            <ul class="accordion__list">
                <li>částka 12 423 Kč náleží v plné výši,</li>
                <li>k této částce se přičte 26 % rozdílu mezi částkou 45 000 Kč  a částkou 12 423 Kč, tj. 26 % z částky 32 577 Kč, tedy 8 471 Kč.</li>
            </ul>
            <p>
                Výpočtový základ činí celkem 20 894 Kč. Za každý rok pojištění náleží 1,5 % výpočtového základu, tzn., že za 45 let pojištění činí procentní výměra starobního důchodu 67,5 % výpočtového základu, tj. 14 104 Kč. Starobní důchod, včetně základní výměry 2 550 Kč, činí 16 654 Kč.
            </p>
        </div>
    </div>

   

Ukázka použití menšího akordeonu ve formuláři


    <div class="accordion accordion--smaller">
        <a href="#" class="accordion__link">
            <h4 class="accordion__title">Direct Mail Advertising How I Made …</h4>
        </a>
        <div class="accordion__content">
            <div class="row">
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-1">
                        <label for="accordion-checkbox-1">Pictures In The Sky</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-2">
                        <label for="accordion-checkbox-2">Radio Astronomy</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-3">
                        <label for="accordion-checkbox-3">The Basics Of Buying A Telescope</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion accordion--smaller">
        <a href="#" class="accordion__link">
            <h4 class="accordion__title">Feedback Management</h4>
        </a>
        <div class="accordion__content">
            <div class="row">
                <div class="col-12">
                    <div class="form-group custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="accordion-checkbox-4">
                        <label for="accordion-checkbox-4">Pictures In The Sky</label>
                        <span class="custom-control-indicator"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

  • Pro zpřehlednění stránky a pro urychlení orientace v případech, kdy uživatelé potřebují pouze malou část obsahu
  • V případě omezeného vertikálního prostoru na stránce, nebo pokud není žádoucí, aby byla stránka příliš dlouhá
  • Vyhněte se vnořeným akordeonům
  • Umožněte v akordeonu rozbalení (otevření) více sekcí zároveň
  • Zajistěte klikatelnou celou oblast záhlaví
  • Označení jednotlivých sekcí akordeonu volte takové, aby bylo jasné, co je jejich obsahem, ještě než je uživatel rozbalí—

Akordeon v textu

  • Nadpis je dostatečně velký
  • Vhodné pro velmi dlouhé a odborné texty

Akordeon ve formuláři

  • Vhodné pro dlouhé formuláře, kde není potřeba vyplňovat všechny údaje
  • Nadpis akordeonu je menší kvůli omezenějšímu prostoru uvnitř formuláře

Užitečné odkazy

Pravidla pro formuláře