19 Убакыт белгилери жана башкалар үчүн баардык түрдөгү өтмөктөрдү кабыл алыңыз

Өтмөктөргө реакция жасаңыз

Ошол кезде эле биз ошол веб бөлүктөр үчүн бир катар мөөнөттөрдү бөлүшөбүз анда биз бир катар иш-чараларды жазууну каалайбыз. Азыр алар Ушул эле максатты көздөгөн 19 табулатураReact программасында болсо да, окуяларды убакыттын графигинде же компанияңыздын тарыхында байланышкан текстти камтыган идеалды таба аласыз.

19 React табулатурасынын бул жыйнагында бар горизонталдык жана вертикалдык жана алардын бардыгы толугу менен акысыз. Ошентип, сиз аларды каалагандай ала аласыз. Ушул жылы 2018-жылы веб-дизайндын учурдагы стандартына ылайык иштөөнүн бардык түрлөрүн камтыган өтмөктөр сериясы. Эч кимди кайдыгер калтырбай турган 19 React табулатурасы менен жасайлы.

Tiny Tabs

Кичинекей табулатура

React with табулатура компоненти өзгөчөлөштүрүү үчүн негизги параметрлер тема. Мисал баракчасынан ар кандай композиция процесстерин көрө аласыз, натыйжада бир аз өзгөчө дизайндагы негизги табулатура пайда болот.

бул жерде Github.

Re супер табулатура

Аккорды

Коддордон жана кутудан аласыз React үчүн бул өтмөктүн демонстрациясына кирүү кайра колдонууга мүмкүнчүлүгү менен айырмаланат. Мисалда көрүнүп тургандай, алар биздин веб-сайтыбызда камсыз кылууну каалаган маалыматтарды камтыган негизги өтмөктөр. Сизде бардык тиешелүү маалыматтар бар.

бул жерде Github.

Веб өтмөктөрүнө реакция жасаңыз

Веб өтмөктөрүнө реакция жасаңыз

React үчүн бул өтмөк менен биз жасай алабыз горизонталдуу жайгашууну тандаңыз тигинен же тигинен. Айрым өтмөктөргө модулдук жана жеткиликтүүлүгү менен айырмаланат, аларды сиз өз веб-сайтыңызга ылайыкташтыра колдонуу үчүн, алардын мисалдарынан көрө аласыз.

бул жерде Github.

Reaction Responsive Tabs

Ыкчам реакция

Бар экендиги менен айырмаланган React үчүн жооптуу өтмөктөр мобилдик үчүн. Мисал баракчасында сиз бул өтмөктөрдүн Реакция үчүн берген настройкаларын көрүү үчүн ар кандай параметрлерди таба аласыз.

Сиздикин сагынган жоксуз Github.

Жеткиликтүү өтмөктөргө реакция жасаңыз

Жеткиликтүү өтмөктөргө реакция жасаңыз

Компонент React үчүн өтмөктөргө жеткиликтүү. Берилген мисалда келтирилген үч бөлүм үчүн, анын маңызы боюнча абдан жөнөкөй, андыктан React үчүн бул өтмөктөр жөнүндө түшүнүк аласыз.

Su Github.

Tabs material

Tabs material

Бул жерде React in situ табулатурасын көрүү үчүн демо баракчабыз жок, бирок бардык коддорду колуңузда кармоо үчүн github вебсайтына өтүңүз. Бул компонентин сунуш кылган React топтому Материалдык жасалгалоого, дизайн тилине өтмөктөр бир нече жылдан бери биз менен жүргөн Google'дан. Бул жерде сиз жарыяланган куралдарга кире аласыз Материалдык Дизайнды колдонуу үчүн Google тарабынан.

Өтмөктөрдү чабыттоону реакциялоо

Өтмөктөрдү чабыттоону реакциялоо

React tabs навигациясы - бул сизге мүмкүнчүлүк берген React сапатынын компоненти өтмөктөрдү карап чыгууга мүмкүндүк берет веб колдонмоңузда. Ушул эле шилтемеден мисал барагына өтсөңүз болот, анын калган кодуна күбө болуу үчүн анын Githubка кире аласыз.

TabTab

Табта табы

Мобилдик колдоосу бар React табулатурасы жана аны түзөтсө болот. Бир React JavaScript үчүн табулатура негизделген API. Сизде мисал баракчасынан үч теманын бирин тандап, андагы "Документ" баскычынан Github бөлүмүнө өтүү мүмкүнчүлүгү бар. Ал жүзөгө ашырылышы мүмкүн болгон бардык настройкалоо көрсөтүлгөн ошол эле мисал баракчасында.

Aria Tabpanel реакциясы

Reia aria

Менен өтмөктөр менен иштешүүгө мүмкүнчүлүк берет баскычтоп жебе баскычтары жогорку настройка мүмкүндүк берген жогорку ийкемдүү React компоненти үчүн. Сизде анын демо баракчасынан ар кандай мисалдар бар.

Tabbordion реакциясы

Tabbordion реакциясы

Ыңгайлаштыруунун ар кандай варианттары бар React үчүн дагы бир компонент кампанын дареги сыяктуу. Универсалдуу жана семантикалык өз вебсайтыңызга аккордеон жана табулатура түзүүгө мүмкүнчүлүк берет. Аны ишке ашыруу үчүн зарыл болгон бардык маалыматтардын деталдары жок эмес.

Faster React табулатура

Тезирээк реакция өтмөктөрү

Аны колдонгон React үчүн табулатура компоненти ийкемдүүлүк жана анын агностикалык контексти. Оңой кирүү өтмөктөрүн көрсөтүү үчүн кемчиликсиз. Бардык маалыматтар, ошондой эле Github'дагы репозиторийге шилтеме берилген мисал баракчасынан алынган.

Серпүү көрүнүштөрүнө реакция жасаңыз

Серпип өтмөктөргө реакция жасаңыз

Кыстарылган өтмөктөр жана көрүнүштөр үчүн реакциянын компоненти жаңсоолор аркылуу элестетүү. Мобилдик арналган сайт үчүн кемчиликсиз. Бул React компонентинин чоо-жайын өткөрүп жибербөө үчүн, мисал баракчасында ар кандай варианттардын мисалдары бар.

Аккорды

Аккорды

Анын мисалындагы веб-сайттан айырмаланган React табулатурасынын компоненти аны настройкалоо үчүн берилген параметрлер. Бул компонентти оңой эле ишке ашыра тургандай, бардык маалыматтар жетиштүү деңгээлде уюштурулган.

Өтмөктөрдү реакцияга салыңыз

Өтмөктөргө реакция жасаңыз

JavaScript өтмөгүнүн мыкты компоненти колдонуунун жеңилдиги жана жеткиликтүү. Мисал баракчасынан сиз Github'дагы репозиторийге кире аласыз. Алар, мисалы, демейки боюнча өчүрүлгөн табулатура бар сыяктуу ар кандай мисалдарды келтиришти. Өтмөктөрдү токтотуп, өтмөктөргө көңүл буруп, жебе баскычтарын колдонуп, алардын ортосунда которула аласыз.

M- табулатура

React үчүн жергиликтүү табулатура үчүн жергиликтүү үчүн веб. Берилген бетте бул компонент кандай иштээрин көрүү үчүн бир нече мисал келтирилген. Оң жактагы жогорку бурчта Github репозиторийине шилтеме бар, эгер сиз көбүрөөк билгиңиз келсе же вебсайтыңызга алсаңыз болот.

Түпнуска материалдык табулатура

Түпнуска материалды кабыл алыңыз

Анын аты айтып тургандай, ошондой материалдык Дизайн багытталган табулатураларды ишке ашыруу үчүн. Бизде мисал баракча жок, бирок анын интеграциясы үчүн керектүү нерселердин бардыгын таба турган Github сактагычы бар.

Түпнуска табулатура көрүнүшүн реакцияга салыңыз

Түпнуска материалды кабыл алыңыз

React Native үчүн кайчылаш платформа табулатура компоненти. Бул ишке ашыруу JavaScript тилинде гана жана жаңсоолорду колдонууга мүмкүнчүлүк берет ар кандай өтмөктөрдүн ортосунда которуштуруу. Бул ар кандай гүлдөп-өнүгүүгө мүмкүндүк берген, өтө ыңгайлаштырылгандыгы менен мүнөздөлөт.

Табулатура таблицасынын навигаторун кабыл алыңыз

Жергиликтүү өтмөктү реакцияга салыңыз

Түзүүчү React табулатура үчүн компонент сонун браузер жана тилке кирпик.

Native Tabs

Native Tabs

Түпнуска өтмөгүн өз алдынча платформа катары кабыл алыңыз төмөнкү кирпиктер үчүн колдонулат ошондой эле секциялык көз караштар. Ушуну менен биз React үчүн бир катар өтмөктөрдү бүтүрөбүз. Биз сизге CSS формаларынын сериясын калтырабыз ошону менен көз салып, алардын веб-сайтыңызга пайдалуу экендигин көрө аласыз.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт.

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

bool(чын)