آموزش المان تب در ویژوال کامپوزر

المان تب در ویژوال کامپوزر یکی از پرکاربرد ترین و بهترین المان یا ابزار برای ساخت تب(TAB) در صفحه یا برگه می باشد. با استفاده از المان یا ابزار تب می توانید مطالب و یا عکس ها و هر اطلاعات دیگری را در تب مخصوص قرار دهید. در این جلسه از سری آموزش ویژوال کامپوزر قصد داریم شما را باه صورت کامل با این المان آشنا نماییم. با ما همراه باشید.

المان تب در ویژوال کامپوزر

با استفاده از المان تب می توان تب های بسیار زیبایی ساخت. و به صفحه خود نظم داد. با دسته بندی بسیاری از نوشته ها یا عکس ها میتوانید برای کاربران سایت خود صفحه ای منظم ایجاد کنید. برای ساخت صفحات ورود کاربران که یک قسمت برای ورود می باشد و یک قسمت برای فراموشی رمز عبور، استفاده از المان تب یکی از بهترین گزینه های موجود می باشد.

المان تور در ویژوال کامپوزر

دوستان عزیز المان تور نیز همان خصوصیات المان تب را دارد. فقط با این تفاوت که المان تب به صورت افقی می باشد. اما المان تور به صورت عمودی می باشد.

آموزش ساخت و تنظیمات المان تب در ویژوال کامپوزر

برای ایجاد تب ها می توانید از جعبه ابزارهای افزونه ویژوال کامپوزر المان تب ها را انتخاب کنید. با انتخاب المان تب ها، شما وارد قسمت تنظیمات عمومی این المان یا ابزار می  شوید.

تنظیمات تب عمومی المان تب در ویژوال کامپوزر

• عنوان ابزارک
• استایل
• شکل
• رنگ
• منطقه محتوا را پر نکند؟
• فاصله گذاری
• اندازه خالی
• موقعیت
• ترازبندی
• پخش خودکار
• فعالسازی بخش
• استایل صفحه بندی
• css متحرک
• آی دی و کلاس اضافی

عنوان ابزارک

می توانید برای ابزارک یا المان خود عنوانی مدنظر بگیرید. اما پیشنهاد من این است که این قسمت را خالی بگذارید. زیرا در اکثر مواقع زیبایی صفحه را از بین می برد. اما به هر حال به سلیقه خودتان بستگی دارد.

استایل

با استفاده از استایل می توانید زیبایی  تب را افزایش دهید. قسمت استایل دارای چهار گزینه می باشد:

• کلاسیک
• مدرن
• فلت
• طرح کلی

اگر از قسمت رنگ موردی را انتخاب کنید. سپس با انتخاب هر استایل می توانید تفاوت آنها را متوجه شوید.

شکل

این قسمت نیز یک مورد زیبایی می باشد که می توانید برای تب ها یکی از حالت های گرد شده، مربع و گرد را انتخاب نمایید.

رنگ

برای عنوان تب ها می توانید یک رنگ مخصوصی در نظر بگیرید. این کار باعث می شود تب فعال با تب غیر فعال متمایز نشان داده شود.

منطقه محتوا را پر نکند؟

با انتخاب تیک این گزینه بدنه تب بدون رنگ می ماند و فقط محتوا نمایش داده می شود.

فاصله گذاری

مقدار فاصله زبانه های تب یا عنوان های تب را بر حسب پیکسل تعیین کنید.

اندازه خالی

فاصله زبانه های تب را از قسمت محتوایی تب تعیین کنید.

موقعیت

انتخاب موقعیت ناوبری زبانه ها در دو حالت بالا و پایین. یعنی زبانه ها یا عنوان تب در پایین نشان داده شود یا بالا تب.

ترازبندی

انتخاب ترازبندی عنوان بخش زبانه ها در سه حالت چپ، وسط، راست. یعنی عنوان تب در کدام ترازبندی قرار بگیرد.

پخش خودکار

انتخاب چرخش خودکار برای زبانه ها در ثانیه. در بیشتر موارد آن را بر روی هیچکدام تنظیم کنید چون ممکن است کارایی تب را به صورت صحیح نشان ندهد.

فعالسازی بخش

شماره تب مورد نظر را وارد کنید تا وقتی صفحه Load می شود دقیقا همان تب نشان داده شود. اگر مقداری وارد نکنید به صورت پیش فرض محتویات تب اول نشان داده می شود.

استایل صفحه بندی

با استفاده از استایل صفحه بندی می توان به صورت بسیار زیبا تب ها را صفحه بندی نمود. استفاده از این قسمت در صورت وجود تب های زیاد پیشنهاد می شود.

CSS  متحرک

برای اعمال یک انیمیشن CSS می توانید از این قسمت استفاده نمایید.

آی دی و کلاس اضافی

برای اعمال یک استایل یا یک شیوه نامه CSS می توانید نام ID یا Class مربوطه را در قسمت مربوطه وارد کنید. البته بدون . و #.

نحوه تغییر نام دادن عنوان تب ها

برای تغییر نام دادن عنوان تب مورد نظر کافی است. در کادر زرد رنگی که برای تنظیمات تب وجود دارد بر روی آیکون مداد کلیک کنید. سپس در قسمت عنوان، نام تب مورد نظر را وارد کنید. اگر می خواهید برای تب مورد نظر خود آیکونی قرار دهید بر روی چک باکس اضافه کردن آیکون کلیک کنید. سپس آیکون موردنظر خود را انتخاب نمایید.

المان تب در ویژوال کامپوزر یکی از ابزارهایی می باشد که می توان در بسیاری از طراحی ها از آن استفاده نمود. امیدارم از آموزش امروز نهایت استفاده را برده باشید. در صورت وجود هر مشکل یا پیغام بگذارید یا در سیستم پیشتیبانی ما تیک ارسال فرمایید. یک نمونه از تب ها را در زیر می توانید مشاهده فرمایید.