Simple card flow framework for mobile web app.
JavaScript CSS
Latest commit 7b09038 Oct 9, 2014 @eimg Code clean up
Permalink
Failed to load latest commit information.
css
img
js
README.md
app.html

README.md

Card View

Mobile App များအတွက် Card View Layout သတ်မှတ်နိုင်သည့် Front-End Framework တစ်ခုဖြစ်ပါသည်။ သတ်မှတ်လိုသည့် Card များနှင့်အတူ Toolbar နှင့် Slide Menu တို့ကို HTML Markup သက်သက်ဖြင့် အလွယ်တစ်ကူ တည်ဆောက်နိုင်ရန် အကူအညီပေးမည့် Framework ဖြစ်ပါသည်။

အနာဂါတ်တွင် Tablet Screen အတွက် ဖြည့်စွက်ချက်များ၊ Ajax Load ဆောင်ရွက်ချက်များ၊ ပိုမိုကောင်းမွန်သည့် Accessibility လုပ်ဆောင်ချက်များ၊ Visual Feedback များနှင့် အခြားဖြည့်စွက်လုပ်ဆောင်ချက်များ ဆက်လက်ထည့်သွင်းသွားမည် ဖြစ်ပါသည်။

Setup Base Card Flow

.wrap Class သတ်မှတ်ထားသည့် Element အတွင်းတွင် သတ်မှတ်လိုသည့် Card များအား .card Class ဖြင့် တန်းစီထည့်သွင်းနိုင်ပါသည်။

    <div class="wrap">
        <div class="card" id="card-one"></div>
        <div class="card" id="card-two"></div>
        <div class="card" id="card-three"></div>
    </div>

Setup Card Navigation

.nav Class သတ်မှတ်ထားသည့် Link Element များကို Card Navigation အဖြစ် အသုံးပြုနိုင်ပါသည်။ Link ကို နှိပ်လိုက်သည့်အခါ ဖော်ပြစေလိုသည့် Card ၏ ID ကို href တွင် သတ်မှတ်ပေးရပါသည်။

    <a href="#card-one" class="nav">Card One</a>
    <a href="#card-two" class="nav">Card Two</a>
    <a href="#card-three" class="nav">Card Three</a>

Set Default Card

Card တွင် .active Class သတ်မှတ်ထားပါက၊ အဆိုပါ Card ကို အလိုအလျှောက် ဦးဆုံးဖော်ပြပေးမည် ဖြစ်ပါသည်။

    <div class="wrap">
        <div class="card" id="card-one"></div>
        <div class="card active" id="card-two"></div>
        <div class="card" id="card-three"></div>
    </div>

Setup Inner Card Flow

Card တစ်ခုအတွင်းတွင် နောက်ထပ် Card Flow တစ်ဆင့် ထပ်မံထည့်သွင်းနိုင်ပါသည်။ .inner Class သတ်မှတ်ထားသည့် Element အတွင်းတွင် .card များကို ထပ်ဆင့်ထည့်သွင်းရပါသည်။

    <div class="wrap">
        <div class="card" id="card-one">
            <div class="inner">
                <div class="card" id="inner-one"></div>
                <div class="card" id="inner-two"></div>
            </div>
        </div>
    </div>

Setup Inner Card Navigation

Inner Card Flow အတွက် Navigation ကို .slide Class သတ်မှတ်ထားသည့် Link များဖြင့် သတ်မှတ်အသုံးပြုနိုင် ပါသည်။

    <a href="#inner-one" class="slide">Inner One</a>
    <a href="#inner-two" class="slide">Inner Two</a>

Setup Card Flip

Flip Effect ထည့်သွင်းရန် .card Element တွင် .flip Class ကို ထပ်မံထည့်သွင်းပေရပါသည်။ ထို့နောက် .front နှင့် .back ကိုယ်စီသတ်မှတ်ထားသည့် Element တစ်စုံထပ်မံထည့်သွင်းပေးခြင်းအားဖြင့် အဆိုပါ .front နှင့် .back ကို အပြန်အလှန် Flip လုပ်နိုင်စေမည်ဖြစ်ပါသည်။

    <div class="wrap">
        <div class="card flip" id="card-one">
            <div class="front"></div>
            <div class="back"></div>
        </div>
    </div>

Setup Card Flip Toggle

Flip Effect ထည့်သွင်းထားသည့် Element အတွက် Toggle Button ကို .toggle-flip Class သတ်မှတ်ထားသည့် Link ဖြင့် သတ်မှတ်ထည့်သွင်းနိုင်ပါသည်။ href တွင် Flip လုပ်စေလိုသည့် Element ID ကို ထည့်သွင်းပေးရပါသည်။

    <a href="#card-one" class="toggle-flip">Flip Card One</a>

Setup Sticky Toolbar

Toolbar တစ်ခုထည့်သွင်းရန် .toolbar Class သတ်မှတ်ထားသည့် Element ကို အသုံးပြုနိုင်ပါသည်။ Toolbar ၏ Location အား .top သို့မဟုတ် .bottom Class အသုံးပြုသတ်မှတ်နိုင်ပါသည်။ Toolbar ကို Screen တွင်အမြဲဖော်ပြစေလိုလျှင် .sticky Class ထည့်သွင်းပေးရပါသည်။

<div class="toolbar sticky top"></div>

Setup Slide-Menu

Slide Menu ထည့်သွင်းရန် .menu Class သတ်မှတ်ထားသည့် Element ကို အသုံးပြုနိုင်ပါသည်။ Menu တစ်ခုထက် ပို၍ ထည့်သွင်းနိုင်သည်။ Menu ၏ Location ကို .left သို့မဟုတ် .right Class များဖြင့် သတ်မှတ်ပေးနိုင်ပါသည်။

<div class="menu left" id="menu-one">
    <a href="#" class="close-menu">Close</a>
</div>

Setup View Menu Button

Menu ဖော်ပြစေမည့် Button အဖြစ် .menu-trigger Class သတ်မှတ်ထားသည့် Link Element ကို အသုံးပြုနိုင်သည်။ href တွင် ဖော်ပြစေလိုသည့် Menu ၏ ID ကို သတ်မှတ်ပေးရပါသည်။

<a href="#menu-one" class="menu-trigger">Menu</a>

Demo

http://eimaung.com/card-view/app.html