react tabs

رد الفعل

علامات تبويب React البسيطة باستخدام React Contextapi الجديد لإدارة تغييرات التغييرات النشطة أم لا. وليس هناك حاجة لإضافة حاوية علامات التبويب ، يمكنك فقط إضافة مكون علامة تبويب.

العرض التوضيحي

• للحصول على تجريبي سريع ، يرجى الخروج من قصة القصص.
• لاستخدام الرمز السريع pelase check out this codesandbox

مقدمة

تم القيام بهذا المشروع باستخدام ReactJS والتصميم العادي لإضافة مكون صغير React-Tabs إلى مشروعك بدون مكتبة ضخمة.

تثبيت

يتم توزيع هذه الوحدة عبر NPM التي يتم تجميعها بالعقدة ويجب تثبيتها كأحد تبعيات مشروعك:

غزل

 yarn add @feuer/react-tabs

NPM

 npm install @feuer/react-tabs

تعتمد هذه الحزمة أيضًا على react ، tslib فقط ESM لـ UMD ، تم تضمينها بالفعل ، react-dom ، prop-types . يرجى التأكد من تثبيته أيضًا.

الاستخدام

جربه في المتصفح

 import React from "react" ;
import { Tabs } from "@feuer/react-tabs" ;

const styles = {
  fontFamily : "sans-serif" ,
  textAlign : "center"
} ;

const LeftTabs = ( ) => (
  < div style = { styles } >
    < Tabs
      activeTab = { {
        id : "tab1"
      } }
    >
      < Tabs . Tab id = "tab1" title = "Tab 1" >
        < div style = { { padding : 10 } } >
          This is tab 1
        </ div >
      </ Tabs . Tab >
      < Tabs . Tab id = "tab2" title = "Tab 2" >
        < div style = { { padding : 10 } } >
          This is tab 2
        </ div >
      </ Tabs . Tab >
    </ Tabs >
  </ div >
) ; 

الدعائم الأساسية

هذه هي قائمة الدعائم التي ربما يجب أن تعرفها عند استخدام TABS React.

علامات التبويب الدعائم المكون

 Tabs . propTypes = {
  activeTab : {
    id : PropTypes . string . isRequired ,
  } ,
  children : PropTypes . arrayOf ( PropTypes . node ) . isRequired ,
  tabsProps : {
    style : PropTypes . object ,
    className : PropTypes . string
  }
} ;

الدعائم مكون علامة التبويب

 Tab . propTypes = {
  id : PropTypes . string . isRequired ,
  title : PropTypes . string . isRequired ,
  tabIndex : PropTypes . oneOf ( [ PropTypes . string , PropTypes . number ] )
} ; 

المساهمة

يرجى قراءة المساهمة.

الإصدار

نستخدم Semver للنسخة. للحصول على الإصدارات المتاحة ، راجع العلامات الموجودة على هذا المستودع.

المؤلفون

• يازان عابد
• انظر أيضًا قائمة المساهمين الذين شاركوا في هذا المشروع.

رخصة

تم ترخيص هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا - راجع ملف الترخيص.