آموزش طراحی متریال با Materialize (جلسه 11) - کارت ها - بخش اول

- visibility ۰ mode_comment

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

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

در این زمینه کلاسهای زیر وجود داره:

  • card : این کلاس اجباری هست و باید برای div اصلی و پدر قرار داده بشه و با اینکار یک Materialize Card درست میکنیم
  • card-content : این کلاس رو به المنتی که در برگیرنده محتوای کارت هست نسبت میدیم. این المنت فرزند المنت با کلاس card هست و بقیه موارد در این المنت قرار داده میشن
  • card-title : این کلاس رو برای div که عنوان کارت رو مشخص میکنه قرار داده میشه
  • card-action : این کلاس رو معمولا برای آخرین div درون card در نظر میگیرن و در اون لینکها و دکمه های مورد نظر که هر کدام اقدام خاصی رو انجام میدن، نسبت داده میشه
  • card-image : با نسبت دادن این کلاس به div میفهمونیم که در وظیفه اون نمایش تصویر در card هست
  • card-reveal : با استفاده از این کلاس به div مورد نظر میفهمونیم که در ابتدا نباید در کارت نمایش داده بشه و زمانی آشکار بشه که روی یک المنت مشخص کلیک بشه
  • activator : این کلاس رو باید به عکسی بدین که زمانی که بر روی اون کلیک میشه، المنت card-reveal نمایش داده بشه
  • card-panel : با استفاده از این کلاس مشخص میکنید که این کارت، یک کارت ساده هست و Padding و Shadow برای اون در نظر گرفته میشه
  • small : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت کوچک هست. ارتفاع این کارت 300 پیکسل خواهد شد
  • medium : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت متوسط هست. ارتفاع این کارت 400 پیکسل خواهد بود
  • large : با استفاده از این کلاس مشخص میکنید که این المنت یک کارت بزرگ هست. ارتفاع این کارت 500 پیکسل خواهد بود

مثالهای مربوط به کارتها رو در جلسه بعد براتون قرار میدم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.