در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.
در جلسه قبل در مورد قرار دادن دکمه با استفاده از تگ mj-hero صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن navbar یا منو با استفاده از تگ mj-navbar، توضیحاتی رو خدمتتون بیان کنیم.
قرار دادن منو با استفاده از تگ mj-navbar
با استفاده از این تگ میتونین یک منو تمام صفحه رو درون ایمیل خودتون قرار بدین و کاربران بتونن با استفاده از اون به مناطق محتلف منتقل بشن. کد زیر رو در نظر بگیرید:
<mjml>
<mj-body>
<mj-container>
<mj-navbar background-color="#ef6451">
<mj-column width="20%">
<mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
</mj-column>
<mj-column width="80%">
<mj-inline-links base-url="https://mjml.io">
<mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
<mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
<mj-link href="/templates" color="#ffffff">Templates</mj-link>
<mj-link href="/components" color="#ffffff">Components</mj-link>
</mj-inline-links>
</mj-column>
</mj-navbar>
</mj-container>
</mj-body>
</mjml>
همونطور که دیدید یک تگ mj-navbar قرار دادیم و رنگ پس زمینه اون رو مشخص کردیم. درون اون دو تا ستون قرار دادیم. عرض ستون اول رو 20 و ستون دوم رو 80 درصد قرار میدیم. درون ستون سمت چپ و اولی یک آیکون رو قرار دادیم. درون ستون بعدی یک تگ mj-inline-links رو قرار دادیم و لینکهای اون رو درونش قرار میدیم. با استفاده از ویژگی base-url میتونین پایه آدرس رو مشخص کنید و آدرسی که در لینکها قرار میدین، در ادامه این پایه آدرس قرار میگیره. همونطور که دیدید 4 تا لینک قرار داده شده و با استفاده از href، آدرس لینک رو مشخص میکنیم. با استفاده از color هم رنگ متن رو تغییر دادیم. خروجی در مرورگر بصورت زیر خواهد شد:
ویژگی هایی که برای این تگ مورد استفاده قرار میگیره بصورت زیر هست:
- full-width : با استفاده از این ویژگی، منو تمام عرض صفحه رو اشغال میکنه
- border : میتونین با استفاده از این ویژگی میتونین برای منو border قرار بدین
- border-top
- border-bottom
- border-left
- border-right
- border-radius : گوشه منو رو گرد میکنه
- background-color : رنگ پس زمینه رو مشخص میکنه
- background-url : آدرس عکس پس زمینه
- background-repeat : میتونین پس زمینه رو تکرار کنید
- background-size : سایز پس زمینه رو مشخص میکنه
- vertical-align : ترازبندی عمودی
- text-align : ترازبندی متن رو مشخص میکنه
- padding
- padding-top
- padding-bottom
- padding-left
- paddiong-right
خروجی در برنامه‌های موبایل بصورت زیر هست:
در موبایل و سیستمهای ایمیلی بر پایه iOS، خروجی بصورت زیر هست:
همونطور که میبینید، یک آیکون همبرگر قرار داده میشه که با کلیک بر روی اون میتونین بقیه لینکها رو مشاهده کنید. ویژگی هایی که برای تگ mj-inline-links قرار میگیره، بصورت زیر هست:
- base-url : میتونین پایه آدرس رو مشخص کنید
- hamburger : اگر مقدار رو برابر با hamburger قرار بدین، حالت آیکون همبرگر نمایش داده میشه
- align : میتونین تراز بندی رو مشخص کنید
- ico-open : آیکون باز شدن رو مشخص میکنه
- ico-close : آیکون بسته شدن رو مشخص میکنه
- ico-padding : میتونین فاصله آیکون رو از اطراف مشخص کنید
- ico-padding-top
- ico-padding-left
- ico-padding-right
- ico-padding-bottom
- ico-align : میتونین ترازبندی آیکون رو مشخص کنید
- ico-color : رنگ آیکون رو مشخص میکنه
- ico-font-size : میتونین سایز فونت رو مشخص کنید
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !