آکاردئون

مثال پایه

با استفاده از مؤلفه کارت، می توانید جمع کردن پیش فرض را گسترش دهید رفتار برای ایجاد آکاردئون. برای رسیدن به سبک آکاردئون به درستی، حتما از .accordion به عنوان لفاف استفاده کنید.

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی مورد دوم است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی سومین مورد است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.
آکاردئون فلاش

.accordion-flushبرای حذف پیش‌فرض ، برخی از حاشیه‌ها و برخی گوشه‌های گرد را اضافه کنید background-colorتا آکاردئون‌ها لبه به لبه با ظرف اصلی خود ارائه شوند.

محتوای متغیر برای این آکاردئون، که برای نشان دادن .accordion-flushکلاس در نظر گرفته شده است. این بدنه آکاردئونی اولین مورد است.

محتوای متغیر برای این آکاردئون، که برای نشان دادن .accordion-flushکلاس در نظر گرفته شده است. این بدنه آکاردئونی مورد دوم است. بیایید تصور کنیم که این با محتوای واقعی پر شده است.

محتوای متغیر برای این آکاردئون، که برای نشان دادن .accordion-flushکلاس در نظر گرفته شده است. این بدنه آکاردئونی سومین مورد است. هیچ چیز هیجان‌انگیزی در اینجا از نظر محتوا اتفاق نمی‌افتد، فقط پر کردن فضا برای اینکه حداقل در نگاه اول، کمی بیشتر نمایانگر این باشد که در یک برنامه دنیای واقعی چگونه به نظر می‌رسد.
آکاردئون را همیشه باز کنید

برای باز ماندن اقلام آکاردئونی وقتی آیتم دیگری باز می شود، data-bs-parentویژگی هر کدام را حذف کنید ..accordion-collapse

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی مورد دوم است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی سومین مورد است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند در داخل HTML قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

© تاپلوکس.