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

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۰۵ اردیبهشت ۱۳۹۵

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

در این بخش مثالهای مربوط به کارتها رو براتون قرار میدم.

فایل index.html رو باز کنید و مرحله به مرحله کدهای زیر رو قرار بدین و خروجی اونا رو در مرورگر ببینید.

<div class="row">
    <div class="col s12 m6">
        <div class="card blue-grey lighten-4">
            <div class="card-content">
                <span class="card-title"><h3>Learn HTML5</h3></span>
                <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            </div>
            <div class="card-action">
                <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
                <a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
            </div>
        </div>
    </div>
</div>

میبینید که در ابتدا یک ردیف یا Row قرار دادیم و در اون هم یک div قرار دادیم و گفتیم که در دستگاه‌های متوسط 6 ستون از 12 ستون رو بگیر و در دستگاه‌های با نمایشگر کوچک 12 ستون رو اشغال کن. درون این المنت، کارت خودمون رو قرار دادیم و رنگ blue-grey با درجه روشنایی 4 رو برای اون در نظر گرفتیم. درون Card مورد نظر card-content و card-action رو قرار دادیم.

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

حالا اگه بخایم بجای متن بالایی یک عکس قرار بدیم بصورت زیر عمل میکنیم:

<div class="row">
    <div class="col s12 m6">
        <div class="card blue-grey lighten-4">
            <div class="card-image">
                <img src="html5-mini-logo.jpg">
            </div>
            <div class="card-content">
                <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            </div>
            <div class="card-action">
                <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
                <a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
            </div>
        </div>
    </div>
</div>

خروجی:card2

حالا اگر بخایم کاری کنیم که با کلیک بر روی عکس المنت card-reveal بصورت زیبا نمایش داده بشه، باید بصورت زیر عمل کنید:

<div class="row">
    <div class="col s12 m6">
        <div class="card blue-grey lighten-4">
            <div class="card-image waves-effect waves-block waves-light">
                <img class="activator" src="html5-mini-logo.jpg">
            </div>
            <div class="card-content activator">
                <p>Click the image to reveal more information.</p>
            </div>
            <div class="card-reveal">
                <span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span>
                <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            </div>
            <div class="card-action">
                <button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
                <a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
            </div>
        </div>
    </div>
</div>

میبینید که برای عکس مورد نظر یک کلاس activator قرار داده شده و زمانی که بر روی اون کلیک میکنید المنت card-reveal نمایش داده میشه. gif زیر رو درست کردم تا روند کار رو به شما نشون بدم:card

حالا برای درست کردن کارتهای card-panel و small و medium و large بصورت زیر عمل میکنیم:

<div class="row">
    <div class="col s12 m3">
        <div class="card-panel teal">
            <span class="white-text">Simple Card</span>
        </div>
    </div>
    <div class="col s12 m3">
        <div class="card small teal">
            <span class="white-text">Small Card</span>
        </div>
    </div>
    <div class="col s12 m3">
        <div class="card medium teal">
            <span class="white-text">Medium Card</span>
        </div>
    </div>
    <div class="col s12 m3">
        <div class="card large teal">
            <span class="white-text">Large Card</span>
        </div>
    </div>
</div>

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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