در این جلسه با ادامه آموزش 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 : میتونین سایز فونت رو مشخص کنید
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !