فک می کنم موقعی که file را میندازیم

برای Directory

بحث Drag و Drop را اینجا میشه تعیین کرد که باشه یا نباشه

فایل type های را میتونی محدود کنی

اسمی که روی دکمه انتخاب است

تک فایله به صورت Default است

خیلی جالبته که از این میشه برای feedback استفاده کرد

برای قسمت Rounding برای ایکون ها. مقدار گردشدگی را میشه تعیین کرد.

اگر اون عکسه به صورت link باشه

اون عکسه میتونه به صورت button باشه

حالت square برای قسمت image

در مورد size اون پروفایل

اگر می خواهی جای اون عکسه از text استفاده کنی

در مورد قسمت image اگرمیخوای جای اون عکسه عکس بذاری: حتما حواست باشه برای عکس دلخواهت اون src قرار بدی. عکس باید aspect ratio به صورت 1:1 باشد. می تونی icon و text قرار بدی.

اگر میخوای تو اون قسمت عکسش از icon استفاده کنی

استفاده کردن variant

جالبه میتونه داخل B-List-group ازش استفاده کنه

اگر src بذاری میره عکسی که source براش تعیین کردی را ورمیداره میراه

اگر هیچ text و src نداشته باشه یک عکس profile ساده نشون میده

می تونه فقط به صورت یک text باشه جالبه همین text اومده روی عکس profile

با این slot میتونی قسمت دلخواهتا برای اضافه تعیین کنی

خیلی راحت میشه چنتا دکمه یا Label را بهم چسبوند

این b-form-radio با b-form-radio-group فرق داره.

برای تعیین نوع اون رنگ به کار میره و خیلی جالبه

با تعیین کردن نوع local میتونی نوع تقویمی که انتخاب کردی را بزنی. جالبه فارسی خیلی خوب handle می کنه.

این prop برای تعیین اینکه بتونی اون متن داخل فیلد را عوض کنی و فقط با زدن اون دکمه اون modal باز بشه

این prop برای تعیین size اون دکمه به کار می رود.

موقع بسته شدن پنجره اطلاعات

موقع ورود اطلاعات

این برای تعیین کردن class های headerو footer و body-class است

یکی از اولین روشا برای باز و بسته کردن BModal اینکه با استافده از v-b-modal و دادن id به اون میتونی اون modal را نشونش بدی. ** دقت داشته باش که این v-b-modal یه directive است و تو میتونی با = بهش بدی.

دومین روش برای باز و بسته کردن BModal اینه که بیای و با استفاده از this.$bvModal.show(id) this.$bvModal.hide(id)

این برای تعیین کردن unchecked که کی میتونه uncheck باشه. همون کاره value را میکنه فقط value برای check این unchecked-value برای uncheck کردن

این المانی است که به عنوان true و false به کار می رود. میتونه checkbox باشه و یا میتونه switch کار کنه.

انواع مختلف trigger که میتونی ست کنی از کلیک hover های مختلف

این slot برای قسمت default به کار می رود.

این slotبرای قسمت title به کار می رود

این title هم میتونه prop بهش بدی و یا اینکه به صورت slot بدی و حالا خودت بعدا از طریق یه template اینا handle کنی

این همون کار tooltip برای دکمه و text ایفا می کنه همون چیزی که مجیدی برای قسمت تنیظیمات Novin Choob درست کرده

این در واقع برای hanle کردن این که اون popover در کجا قرار بگیره. به صورت پیش فرض راست است

با تعیین کردن این target عملا داری براش یه id و یا ref تعیین کنیو اینجوری تو میتونی بعدا نشون بدی یا مخفیش کنی

دو جور میشه اینا نشان داد و به صورت عادی وقتی میری روی button که id اون همون target المان popover است را میاره.

یا با عوض کردن prop به نام show.sync

ببین این طوریه که برای اینه که تو بیای و یه حالت قاب مانندی بذاری و تووش نوشته خودتا بذاری.

این برای درست کردن یه لیست شماره دار یا غیر شماره دار است. حتی میتونه به عنوان راهکاری برای نمایش اطلاعات باشه.

مجیدی برای اون قسمت تنظیمات برای لیست کردن انواع آپشن ها مثل copy و paste و غیره استفاده کرد.

این کص کش یه ذره prop اضافه کرده به link و حالا به عنوان component جدید استفاده کنیم.

اگر از nuxt استفاده کردی این بجای <router-link> از <nuxt-link> باید استفاده کنی

اگر یه prop به نام href بهش بدی میشه تگ a و اگه prop به نام to بهش بدی میشه <router-link>

تعیین کردن اون گرداننده چطوری باشه

این تگ b-overlay باید به صورت یه container قرار بگیره و عناصر دیگر داخل این باشند.

با این prop به نام show میتونی تعیین کنی که ایا این loading بیاد یا نه

کلا این به درد این میخوره که به کاربر حالی کنی یه چیزی گنگی پیش اومده و سیستم در حال busy است

با این v-model میشه تعیین کرد که روی کدام tab وایسه

تعیین class اون navbar

تعیین class تبی که الان تووش active هستیم.

تعیین class tabi که active است

این event برای وقتی است که تو میخوای وفتی از یه tab رفتی تو یه tab دیگه این رویداد صدا زده شود

vertical کردن این b-tab

موقعیت header tab بجای بالا میاد یایین

با alignment میتونی بیاریشون وسط

اگر بخوای کل اون header tab را بگیره میتونی از justify استفاده کنی ولی دیگه برخلاف full همه تب ها به یک اندازه هستند

اگر بخوای کل اون header tab را بگیره میتونی از full استفاده کنی و حالا اون tab که title بیشتری داره خود به خود عرض بیشتری میگیره.

فک کنم خیلی بخوایم از b-card داخل b-tabاستفاده کنیم

میگه اگر خواستی این b-tabs را داخل card بزاری خیلی راحت میتونی این کار را انجام بدی چون خود bootstrap قبلا فکر این کار بوده. کافیه یه b-card بزاری و یه no-body بزاری و حالا بیای و b-tabs و b-tab بزاری. به مثال دقت کن حتما بایدnobody بزاری

میگه اگر به صورت Dynamic یعنی با استفاده از for اینا خواستی این کار را انجام بدی حتما باید یه key برای b-tab درست کرده باشی. در ضمن میتونی از v-if برای هندل کردن بیشتر در b-tab استفاده کنی.

اولش یع b-tabs باید بزنی بعد برای هر tab باید یه b-tab بزنی

میشه برای header و body و footer قشنگ برای هر هر background و text از variant استفاده کرد

میشه تعیین کرد اندازه Modal چی باشه

با این prop دیگه وسط باز میشه

تعیین اندازه button ها در footer

برای بسته شدنش

برای hide کردن اون modal

با این bvModalEvent.preventDefault() میشه از بسته شدن جلوگیری کرد

این emit برای cancel

این emitبرای ok

تعیین slotهای مختلف برای header و footer و قسمت title دقت داشته باش که اگر بری برای هندل کردن slot برای header اون ضربدر میره و اگر بری برای هندل کردن slot برای footer اون دکمه های تایید و کنسل میره میره

میشه تعیین کرد که فقط دکمه ok باشه

تعیین کردن این که دکمه های ok و canel با چه vaianti نشان داده شوند

برای تعیین کردن title های مختلف برای ok و cancel

برای تعیین کردن اینکه موقع escape زدن اون modal بسته نشه

وقتی بیرون اون پنجره modal میزنه بسته بشه یا نه

حالت های دکمه را به صورت pill یا squre می تونی اینجا ببینی

حالت block کردنش. که حس میکنم که width را ۱۰۰ قرار میده.

حتی variant های مختلف روی ‌Border

اینجا دو جور تونست اون b-collapse را بگیره یکی بحث v-b.toggle.collapse یکی بحث v-b.toggle="collapse"

این جا یه مفهومی داره به نام type که خب این میتونه email یا number یا چیزهای مختلفی باشه

با قراردادن v-if در prop میتونی تعیین کنی که دکمه باشه یا نه

با variant مییتونی انواع button ها را بگیری

هم میتونه تگ a و هم routerlink و هم صد البته button درست کنه. اگر href بهش بدی به تگ a تبدی میکنه اگر to بهش بدی به router-link تبدیل میشه

اینجا میاد چنتا روش برای نشان دادن و یا بستن این BModal میگه