Ինչպես օգտագործել կոմպոնենտները

Կոճակ (<hd-button>)

Կոճակը ունի պլաստիկ անցումային էֆեկտներ և ճարտարապետական եզրագծերի դիզայն: Աջակցում է custom չափսեր և գույներ:

<hd-button 
  data-width="160px" 
  data-height="52px" 
  data-thickness="3px" 
  data-color="#083f39" 
  data-text-color="#ffffff"
>
  Սեղմել այստեղ
</hd-button>

Մուտքագրման Դաշտ (<hd-input>)

Գծային մուտքագրման դաշտ placeholder-ներով և վիճակների (focus/hover) ինքնաշխատ փոփոխություններով ու caret-ի անիմացիայով:

<hd-input 
  placeholder="Ներմուծեք ձեր էլ. հասցեն" 
  data-width="100%" 
  data-height="48px" 
  data-thickness="3px"
data-font-size="14pt" />

Տեքստային Դաշտ (<hd-textarea>)

Բազմատող տեքստային դաշտ, որն աջակցում է նաև հորիզոնական չափափոխման արգելափակում: Օգտակար է նամակների և երկար տեքստերի համար:

<hd-textarea 
  placeholder="Ձեր հաղորդագրությունը..." 
  data-width="100%" 
  data-height="200pt" 
  data-thickness="3px"
  data-disable-horizontal-resize="true"
data-font-size="14pt" />

Սահիկ (<hd-slider>)

Սահիկ արժեքների ընտրության համար՝ նախագծված դիզայն համակարգի գծային սկզբունքներով:

<hd-slider 
  min="0" 
  max="100" 
  value="50" 
  step="1"
  data-width="250px"
  data-thickness="3px"
/>

Հաստատման Վանդակ (<hd-checkbox>)

Մինիմալիստական հաստատման վանդակ` կլորացված անկյուններով և check-ինդիկատորով:

<hd-checkbox 
  checked 
  data-size="18px"
/>

Ռադիո Կոճակ (<hd-radio>)

Ռադիո կոճակ տարբերակների խմբից մեկն ընտրելու համար: Կարելի է միավորել ընդհանուր name ատրիբուտով:

<hd-radio 
  name="sample-group" 
  checked 
  data-size="18px"
/>

Փոխանջատիչ (<hd-switch>)

Գեղեցիկ անիմացիոն փոխանջատիչ (toggle) կարգավորումների արագ միացման կամ անջատման համար:

<hd-switch 
  checked 
  data-size="20px"
  data-thickness="4px"
/>

Ընտրացանկ / Դրոփդաուն (<hd-select>)

Մաքուր գծային դրոփդաուն ընտրացանկ: Տարբերակները տրվում են span տարրերի միջոցով՝ value և selected ատրիբուտներով:

<hd-select 
  placeholder="Ընտրեք տարբերակը" 
  data-width="200px" 
  data-height="46px" 
  data-thickness="3px"
>
  <span value="option1">Տարբերակ 1</span>
  <span value="option2" selected>Տարբերակ 2</span>
  <span value="option3">Տարբերակ 3</span>
</hd-select>

Սեգմենտավորված Կառավարում (<hd-segment>)

Տաբերի կամ սահմանափակ տարբերակների սեգմենտավորված փոխանջատիչ:

<hd-segment 
  data-width="300px" 
  data-height="46px" 
  data-thickness="3px"
>
  <span value="tab1" selected>Առաջին</span>
  <span value="tab2">Երկրորդ</span>
  <span value="tab3">Երրորդ</span>
</hd-segment>

Գույնի Ընտրիչ (<hd-color-picker>)

Կոմպակտ կոճակ, որի վրա սեղմելիս բացվում է բրաուզերի գունային ներկապնակը և թարմացնում data-color-ը:

<hd-color-picker 
  data-color="#083f39" 
  data-width="44px" 
  data-height="44px"
/>

Գունային Վահանակ (<hd-color-panel>)

Ինտեգրված գունային վահանակ, որը թույլ է տալիս ուղղակիորեն ընտրել գույներ HTML էջի վրա:

<hd-color-panel 
  value="#083f39" 
  data-width="100%" 
  data-height="200px"
/>

Կոմպակտ Սահնակ / Սքրոլբար (<hd-scrollbar>)

Հատուկ սահնակով (scrollbar) պատված տարան, որը փոխարինում է բրաուզերի ստանդարտ սքրոլբարին ավելի մինիմալիստական գծային տարբերակով:

<hd-scrollbar style={{ width: "100%", height: "150px", overflow: "auto" }}>
  <div style={{ padding: "20px", height: "300px", color: "var(--text)" }}>
    Երկար պարունակություն սքրոլ անելու համար...
  </div>
</hd-scrollbar>

Scroll Reveal / Սքրոլ Անիմացիա (<hd-reveal>)

Տարրերի հայտնվելու անիմացիա սքրոլ անելիս: Աջակցում է տարբեր ուղղություններ, ուշացում (delay), տևողություն (duration) և IntersectionObserver-ի շեմ (threshold)։

<hd-reveal 
  data-direction="up" 
  data-delay="200" 
  data-duration="1000" 
  data-threshold="0.15"
>
  <div style={{ padding: "24px", background: "var(--panel)", borderRadius: "16px" }}>
    <h3>Անիմացիոն Բովանդակություն</h3>
    <p>Այս տարրը սահուն կերպով կհայտնվի սքրոլի ժամանակ:</p>
  </div>
</hd-reveal>