نکات CSS آبجو شماره 2: تراشه های سفارشی

سلام،

این دومین پست از یک سری پست است که حاوی نکاتی در مورد Beer CSS است. Beer CSS یک چارچوب جدید در اطراف است که بر اساس (نه محدود به) Material Design 3 است. Material Design 3 یک سیستم طراحی است که توسط Google ایجاد شده است. در این پست با چیپ های سفارشی آشنا می شویم. منطق تراشه ها بسیار ساده است.

اگر مفهوم آن را نمی دانید تنظیمات، عناصر و کمک کنندگان استفاده شده توسط Beer CSS، می توانید این صفحه را بخوانید.

1) ابتدا باید a ایجاد کنید chip عنصر.

<a class="chip">Chip</a>

2) سپس یک فرم را انتخاب کنید یاور پسندیدن round یا border.

<a class="chip border">Chip</a>
<a class="chip round">Chip</a>
<a class="chip border round">Chip</a>

3) می توانید یک رسانه اضافه کنید عنصر پسندیدن i، image، svg یا video داخل a chip.

<a class="chip">
  <i>search</i>
  <span>Chip</span>
</a>

4) با موقعیت یاور پسندیدن front یا back، شما می توانید تعیین کنید که آیا رسانه عنصر قابل کلیک است یا خیر به صورت اختیاری می توانید از wave یا no-wave یاور هم:

<a class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
</a>

5) می توانید از دیگری استفاده کنید عناصر داخل a chip پسندیدن badge، tooltip، menu، progress، و غیره…

<a class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
  <span class="tooltip">Tooltip</span>
</a>

<button class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
  <menu>
    <a>Item 1<a>
    <a>Item 2<a>
    <a>Item 3<a>
  </menu>
</button>

را کمک کنندگان از Beer CSS را می توان در هر مورد استفاده کرد عنصر. این چارچوب را بسیار قابل تنظیم می کند. از همه نظر منطق و اسامی یکسانی دارد. این امر درک و استفاده مجدد از Beer CSS را بسیار آسان می کند. من یک کدنویس درست کردم تا ببینم Beer CSS تا کجا می‌تواند پیش برود و به +100 مورد استفاده مختلف از تراشه‌ها در اینجا دست پیدا کردم.

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

CSS آبجو:
https://www.beercss.com

کدپن:
https://codepen.io/leo-bnu/pen/BaGOLvJ

درباره تنظیمات، عناصر و راهنماهای استفاده شده توسط Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md