آموزش طراحی متریال با Materialize (جلسه 13) - Chips و Footer

- visibility ۰ mode_comment

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

در مورد Chips

Materialize یک جزء مخصوص فراهم کرده و اسم اون رو chip یا تراشه یا ورقه قرار داده و میتونین با استفاده مجموعه های کوچکی مثل تگها و اطلاعات تماس و .... رو درست کرده و قرار بدید. با دادن کلاس chip به div مورد نظرتون اون رو بصورت یک تراشه یا چیپس در میارید و میتونین مواردی که میخاید رو در اون قرار بدین. متن و عکس و آیکون میتونه در این chip قرار بگیره.

عکس و متن در Chip:

خروجی:chip1

میبینید که موارد مورد نظر قرار داده شدن. عکسی هم که در chip قرار میگیره ارتفاعش 42 میشه و بصورت دایره ای در میاد.

متن و آیکون در Chip:

خروجی:chip2

زمانی هم که بر روی آیکون کلیک میشه، chip مورد نظر حذف میشه.

در مورد Footer

Materialize کلاسهایی مرتبط با فوتر یا Footer داره و میتونین با استفاده از اونا فوتر مورد نظرتون رو برای سایتتون قرار بدین.

  • page-footer : با نسبت دادن این کلاس به div مورد نظر باعث میشید که اون المنت بصورت فوتر در بیاد
  • footer-copyright : با استفاده از این کلاس، المنت مورد نظر به یک المنت footer-copyright تبدیل میشه و میتونین متن copyright رو در اون قرار بدین.

مثالها

همونطور که دیدید به المنت footer کلاس page-footer دادیم و محتوای مورد نظر رو درونش قرار دادیم.

خروجی بصورت زیر هست:footer1

حالا میتونیم کلاس footer-copyright رو هم در المنت بالا قرار بدیم:

خروجی بصورت زیر خواهد شد:footer2

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

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

یا علی

Source

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

نیاز به لاگین

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