سلام،
من می خواهم یک سری پست حاوی نکاتی در مورد Beer CSS را به اشتراک بگذارم. Beer CSS یک چارچوب جدید در اطراف است که بر اساس (نه محدود به) Material Design 3 است. Material Design 3 یک سیستم طراحی است که توسط Google ایجاد شده است. در این پست با گسترش لیست آشنا می شویم. بسط های لیست لیست هایی با موارد و موارد فرعی هستند.
اگر مفهوم آن را نمی دانید تنظیمات، عناصر و کمک کنندگان استفاده شده توسط Beer CSS، می توانید این صفحه را بخوانید.
1) ابتدا تعدادی آیتم در داخل یک ایجاد می کنیم article عنصر
2) اکنون ما از آن استفاده خواهیم کرد details و summary عناصر برای داشتن آیتم ها و موارد فرعی. استفاده کنید none کمک کننده در summary عنصر برای خالی کردن سبک های پیش فرض از مرورگر. در این مثال، پس از کلیک بر روی “Item 1” موارد دیگر را نشان می دهد:
3) می توانید از کد آیتم ها و موارد فرعی در هر عنصر دیگری مانند استفاده مجدد استفاده کنید nav، menu، tooltip، dialog، و غیره:
این کمک کنندگان از Beer CSS را می توان در هر مورد استفاده کرد عنصر. این چارچوب را بسیار قابل تنظیم می کند. از همه نظر منطق و اسامی یکسانی دارد. این امر درک و استفاده مجدد از Beer CSS را بسیار آسان می کند. من برای دیدن برخی از بسط های لیست ایجاد شده با Beer CSS در اینجا یک کدنویس درست کردم.
امیدواریم از این مقاله لذت ببرید. ممنون که خواندید
CSS آبجو:
https://www.beercss.com
طراحی متریال 3:
https://m3.material.io/
کدپن:
https://codepen.io/leo-bnu/pen/Baewrgg
درباره تنظیمات، عناصر و راهنماهای استفاده شده توسط Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md
