رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

زبانه

وضعیت: پیش‌نویس

پنل نمای کلی: خلاصهٔ آنچه کاربر اول باید ببیند.

<div class="hq-tabs">
  <div class="hq-tablist" role="tablist" aria-label="اطلاعات پروژه">
    <button class="hq-tab" role="tab" id="demo-tab-1" aria-selected="true" aria-controls="demo-panel-1" type="button">نمای کلی</button>
    <button class="hq-tab" role="tab" id="demo-tab-2" aria-selected="false" aria-controls="demo-panel-2" tabindex="-1" type="button">مشخصات</button>
    <button class="hq-tab" role="tab" id="demo-tab-3" aria-selected="false" aria-controls="demo-panel-3" tabindex="-1" type="button">تاریخچه</button>
  </div>
  <div class="hq-tabpanel" role="tabpanel" id="demo-panel-1" aria-labelledby="demo-tab-1" tabindex="0">
    <p>پنل نمای کلی: خلاصهٔ آنچه کاربر اول باید ببیند.</p>
  </div>
  <div class="hq-tabpanel" role="tabpanel" id="demo-panel-2" aria-labelledby="demo-tab-2" tabindex="0" hidden>
    <p>پنل مشخصات.</p>
  </div>
  <div class="hq-tabpanel" role="tabpanel" id="demo-panel-3" aria-labelledby="demo-tab-3" tabindex="0" hidden>
    <p>پنل تاریخچه.</p>
  </div>
</div>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای محتوای هم‌سطح که کاربر هر بار فقط یکی را لازم دارد، مثل نمای کلی، مشخصات و تاریخچهٔ یک مورد.
  • حداکثر پنج زبانه با برچسب‌های کوتاه (یک یا دو واژه).

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای مراحل پشت‌سرهم؛ مراحل فرایند است، نه زبانه.
  • برای رفتن به صفحهٔ دیگر؛ از ناوبری استفاده کنید.
  • وقتی کاربر باید محتوای چند زبانه را کنار هم مقایسه کند.
انجام بدهبرچسب کوتاه و اسم‌محور.
انجام ندهبرچسب جمله‌مانند که در یک خط جا نمی‌شود.