BlazorXTabs

Blazorxtabs

مكتبة مكونات علامات تبويب ممتدة توفر ميزات علامات تبويب مختلفة للبلازور!

الخروج من جميع الأمثلة على: Blazorxtabs Demo

الميزات الرئيسية:

• إغلاق علامات التبويب
• انتقل إلى الصفحة وجعلها كعلامة تبويب
• لن تتكرر علامات التبويب عند التنقل إلى نفس الصفحة
• استخدم فئات XTABS لزيادة تخصيص المظهر
• حافظ على علامات التبويب حالة عند التبديل بين علامات التبويب
• ارتباط بالأحداث: محدد / تم تغييره / إزالته
• v1.2.0
  • معالج الإعداد مثل علامات التبويب مع الأحداث: الأزرار السابقة / التالية والقابلة للتخصيص السابقة / التالية
  • إمكانية تعيين علامة التبويب النشطة للتحميل
• v1.3.0
  • قادرة على سحب وإسقاط علامات التبويب
• v1.4.0
  • قادر على استبدال مكون Routeview القياسي بمكون XtAbsRouteview الذي يجعل الصفحات تلقائيًا كعلامات تبويب
• v1.5.0
  • عندما يتم تمكين Closetabs. قادر على إغلاق جميع علامات التبويب وتكوين عتبة لعرض زر إغلاق All Tabs.
  • عندما يتم تمكين Closetabs. قادر على استخدام زر الماوس الأوسط انقر لإغلاق علامة التبويب.
  • عندما يتم تمكين Closetabs. قادرة على الحد من علامات التبويب القابلة للإغلاق إلى 1.
• v1.6.0
  • ثابت rendermode.partial علامات تبويب التكرار
  • تم تقديم XtabSauthorizerOuteview للسماح بتكامل علامات التبويب مع المصادقة
• v1.7.0
  • دعم Net6
• v1.8.0
  • دعم Net7
• v1.9.0
  • تم تقديم NavigationMode ، هذا هو إعداد XtabSrouteview فقط.
    • sevigationmode.standard: هذا هو الافتراضي وسيعمل xtabs كما حدث دائمًا. سيتم ضبط النقر على علامة تبويب الصفحة على أنها نشطة.
    • التنقل mode.navigable: هذا الإعداد الجديد سيجعله بحيث يكون كلما تم تعيين علامة تبويب الصفحة على نشط ، فإنه يؤدي بالإضافة إلى ذلك إلى التنقل. يعد هذا مفيدًا لمزامنة عنوان URL للمتصفح في علامة تبويب الصفحة النشطة حاليًا.
• v2.0.0
  • دعم Net8
• v3.0.0
  • دعم Net9

أمثلة:

الاستخدام القياسي:

 <XTabs>
    <XTab Title="Tab1">
        Content 1
    </XTab>
    <XTab Title="Tab2">
        Content 2
    </XTab>
</XTabs>

باستخدام XtabsRouteview أو XtabSauthorizerOuteview لتقديم الصفحات كعلامات تبويب:

 <Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <XTabsRouteView CloseTabs="true" NewTabSetActive="true" 
        NavigationMode="BlazorXTabs.Configuration.NavigationMode.Navigable"
        RenderMode="BlazorXTabs.Configuration.RenderMode.Full" 
        RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

استخدم XtAbPageAttribute لتعيين عنوان علامة تبويب الصفحة والمعلمات الأخرى ذات الصلة

 @attribute [XTabPageAttribute("Home")]

باستخدام معالج:

    <XTab Title="Steps example">
        <XTabs RenderMode="BlazorXTabs.Configuration.RenderMode.Steps">
            <XTab Title="Step1">
                   This is step 1!
            </XTab>
            <XTab Title="Step2">
                This is step 2!
            </XTab>
            <XTab Title="Step3">
                This is the last step. Step 3!
            </XTab>
        </XTabs>
    </XTab>

السحب والإفلات:

    <XTab Title="Drag Example">
        <XTabs IsDraggable="true" RenderMode="BlazorXTabs.Configuration.RenderMode.Partial" >
                <XTab Title="1. I can be dragged!!">
                    <p>I can be dragged!!</p>
                </XTab>
                <XTab Title="2. Drag me!">
                    <p>Drag me!</p>
                </XTab>
                <XTab Title="3. Please drag me!! I hate being last place!">
                    <p>Please drag me!! I hate being last place!</p>
                </XTab>
        </XTabs>
    </XTab>

يثبت:

• يمكنك تثبيت الحزمة عبر Nuget Package Manager فقط ابحث عن Blazorxtabs . يمكنك أيضًا التثبيت عبر PowerShell باستخدام الأمر التالي.

 Install-Package BlazorXTabs

• أو عبر dotnet cli.

dotnet add package BlazorXTabs

• إذا كنت ترغب في إحضار التصميم الافتراضي Xtabs ، فلا تنس إضافة:

 <link href="{YOUR-PROJECT-NAME}.styles.css" rel="stylesheet" />