کامپوننت ها

 

طراحی الگوهای از اپلیکیشن نهایی با استفاده از بلاک های آماده

تنظیمات اولیه و ضروری

در نظر داشته باشید که در ابتدا، بایستی حتما متا تگ های زیر در ابتدای پروژه اضافه شوند تا بتوانید از یک دستی پروژه استفاده کنید.

<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>

Title

Title bar

Title bar ها دارای عرض کامل هستند و به بالای صفحه نمایش متصل می شوند.

Title

<header class="bar bar-nav">
  <h1 class="title">Title</h1>
</header>

Title bar با buttons

Button ها در title bar چپ چین و راست چین بوده و بایستی برای یکسری رخدادهایی استفاده شوند. از کلاس .pull-right یا .pull-left برای کلاسه بندی Button ها استفاده کنید. فقط مطمئن شوید که همه چیز قبلاز title bar ست می شوند.

Title

<header class="bar bar-nav">
  <button class="btn pull-left">
    Left
  </button>
  <button class="btn pull-right">
    Right
  </button>
  <h1 class="title">Title</h1>
</header>

Title bar با icons

آیکون ها برای پیاده سازی رخدادهایی در نوار ابزار قرار می گیرند.

Title

<header class="bar bar-nav">
  <a class="icon icon-left-nav pull-left"></a>
  <a class="icon icon-compose pull-right"></a>
  <h1 class="title">Title</h1>
</header>

Title bar با link buttons و icons

Button links را می توان در نوار ابزار برای حذف طرح کلی استفاده کرد. با استفاده از این آیکون ها میتوانید احساس نوگرا را از iOS7 خلاص کنید. توجه داشته باشید که استفاده از .btn-nav برای قرار دادن دکمه ها نزدیک به لبه و گوشه نمایشگر مناسب م ی باشد..

Title

<header class="bar bar-nav">
  <button class="btn btn-link btn-nav pull-left">
    <span class="icon icon-left-nav"></span>
    Left
  </button>
  <button class="btn btn-link btn-nav pull-right">
    Right
    <span class="icon icon-right-nav"></span>
  </button>
  <h1 class="title">Title</h1>
</header>

Title bar با segmented control

title bars ها همچنین می توانند کنترل های جداگانه را به خانه بیاورند. احساس رایگان برای اضافه کردن دکمه همراه نیز. کنترل به طور خودکار خود را به صورت درست تنظیم می کند.

<header class="bar bar-nav">
  <button class="btn pull-left">
    Left
  </button>
  <button class="btn pull-right">
    Right
  </button>
  <div class="segmented-control">
    <a class="control-item active">One</a>
    <a class="control-item">Two</a>
    <a class="control-item">Three</a>
  </div>
</header>

Tab bar

از i-appicons در .tab-bar برای نشان دادن بخش های مختلف اپلیکیشنتان استفاده کنید.

<nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">Home</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-person"></span>
    <span class="tab-label">Profile</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-star-filled"></span>
    <span class="tab-label">Favorites</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-search"></span>
    <span class="tab-label">Search</span>
  </a>
  <a class="tab-item" href="#">
    <span class="icon icon-gear"></span>
    <span class="tab-label">Settings</span>
  </a>
</nav>

توجه داشته باشید که: می توان از push.js برای تغییر محتوا استفاده کنید.

Tab bar (labels only)

اگر شما نمی خواهید از آیکون های پیشنهادی ما استفاده کنید، این مورد می تواند. The text will appear larger to use the additional space.

<nav class="bar bar-tab">
  <a class="tab-item active" href="#">
    Label
  </a>
  <a class="tab-item" href="#">
    Label
  </a>
  <a class="tab-item" href="#">
    Label
  </a>
</nav>

توجه داشته باشید که: می توان از push.js برای تغییر محتوا استفاده کنید.

Standard bars

standard bar ها عناصر پایه ثابت هستند که می توانند در چهار مکان قرار گیرند. اینها را می توان برای استفاده از button ها، آیکون ها یا کنترل های جداگانه استفاده کرد (به مثال های زیر مراجعه کنید).

<!-- کنترل Segmented در نوار استاندارد ثابت به بالا -->
<nav class="bar bar-standard">
  <div class="segmented-control">
    <a class="control-item active">Thing one</a>
    <a class="control-item">Thing two</a>
    <a class="control-item">Thing three</a>
  </div>
</nav>

<!-- Block button در standard bar که به صورت ثابت در نوار بالا قرار دارد -->
<div class="bar bar-standard bar-header-secondary">
  <button class="btn btn-block">Block level button</button>
</div>

<!-- Block button در standard bar که به صورت در بالای نوار قرار دارد -->
<div class="bar bar-standard bar-footer-secondary">
  <button class="btn btn-block">Block level button</button>
</div>

<!-- Icons در standard bar در زیر صفحه نمایش قرار دارد -->
<div class="bar bar-standard bar-footer">
  <a class="icon icon-compose pull-left"></a>
  <a class="icon icon-gear pull-right"></a>
</div>

Typography

از headings و paragraphs برای عنوان و توصیف بخش هایی از برنامه خود استفاده کنید. Apply or wrap elements with .content-padded to give the content space around the screen.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

<div class="content-padded">
  <h1>h1. Heading</h1>
  <h2>h2. Heading</h2>
  <h3>h3. Heading</h3>
  <h4>h4. Heading</h4>
  <h5>h5. Heading</h5>
  <h6>h6. Heading</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco.</p>
</div>

Table views

دیدگاه های جدول می تواند برای نمایش داده ها، نشان دادن مجموعه ای از پیوندها یا مجموعه ای از کنترل ها مورد استفاده قرار گیرد .

  • Item 1
  • Item 2
  • Divider
  • Item 3
<ul class="table-view">
  <li class="table-view-cell">Item 1</li>
  <li class="table-view-cell table-view-cell">Item 2</li>
  <li class="table-view-divider">Divider</li>
  <li class="table-view-cell">Item 3</li>
</ul>

Table view with chevrons

Chevrons ها باید برای نشان دادن اینکه یک محتوا لینک شده است مورد استفاده قرار بگیرند. فقط کلاس های .navigate-right یا .navigate-left را برای استفاده یک Chevron بر روی محتوا اعمال کنید.

<ul class="table-view">
  <li class="table-view-cell">
    <a class="navigate-right">
      Item 1
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      Item 2
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      Item 3
    </a>
  </li>
</ul>

توجه داشته باشید که: Table views ها با یک تم و استایل اندرویدی از Chevron ها به همراه راهنماهای طراحی اندرویدی استفاده نمی کنند. اطلاعات بیشتر در اندروید خالص گوگل پیدا می شود.

Table view با badges

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

  • Item 1 4
  • Item 2 1
  • Item 3 5
<ul class="table-view">
  <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
  <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
  <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul>

Table view با badges و chevrons

با خیال راحت از Chevron ها و badge ها استفاده کنید. آنها به طور اتوماتیک خود را در صفحه و محل مناسب جای می دهند.

<ul class="table-view">
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge">5</span>
      Item 1
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge">5</span>
      Item 2
    </a>
  </li>
  <li class="table-view-cell">
    <a class="navigate-right">
      <span class="badge">5</span>
      Item 3
    </a>
  </li>
</ul>

Table view با media (تصاویر)

نمایش media داخل table views انجام می شود که بسیار راحت و آسان می باشد. این کامپوننت برای تصاویر و متن ها بسیار مناسب است.

<ul class="table-view">
  <li class="table-view-cell media">
    <a class="navigate-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="navigate-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="navigate-right">
      <img class="media-object pull-left" src="http://placehold.it/42x42">
      <div class="media-body">
        Item 1
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
      </div>
    </a>
  </li>
</ul>

Table view با media (آیکون ها)

i-appicons ها می توانند جدای از تصاویر مورد استفاده قرار گیرند.

<ul class="table-view">
  <li class="table-view-cell media">
    <a class="navigate-right">
      <span class="media-object pull-left icon icon-trash"></span>
      <div class="media-body">
        Item 1
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="navigate-right">
      <span class="media-object pull-left icon icon-gear"></span>
      <div class="media-body">
        Item 2
      </div>
    </a>
  </li>
  <li class="table-view-cell media">
    <a class="navigate-right">
      <span class="media-object pull-left icon icon-pages"></span>
      <div class="media-body">
        Item 3
      </div>
    </a>
  </li>
</ul>

Table view با buttons

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="table-view">
  <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
  <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
  <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
  <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul>

Table view با toggles

  • Item 1
  • Item 2
  • Item 3
<ul class="table-view">
  <li class="table-view-cell">
    Item 1
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 2
    <div class="toggle active">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Item 3
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
</ul>

Carded table views

از کلاس .card برای جای گیری محتوا در یک قسمت مناسب می توان استفاده کرد.

  • Item 1
  • Item 2
  • Divider
  • Item 3
  • Item 4
<div class="card">
  <ul class="table-view">
    <li class="table-view-cell">Item 1</li>
    <li class="table-view-cell">Item 2</li>
    <li class="table-view-cell table-view-divider">Divider</li>
    <li class="table-view-cell">Item 3</li>
    <li class="table-view-cell">Item 4</li>
  </ul>
</div>

Buttons

Buttons ها در حالت های متفاوت و برای کاربرد عملیاتی و رخدادی استفاده می شوند.

<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>

<button class="btn btn-outlined">Button</button>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>

Buttons با icons

i-appicons ها همچنین در داخل Button ها نیز مورد استفاده قرار می گیرند.

<button class="btn">
  <span class="icon icon-search"></span>
  Button
</button>
<button class="btn btn-primary">
  <span class="icon icon-search"></span>
  Button
</button>
<button class="btn btn-positive">
  <span class="icon icon-search"></span>
  Button
</button>
<button class="btn btn-negative">
  <span class="icon icon-search"></span>
  Button
</button>
<button class="btn btn-link">
  <span class="icon icon-left"></span>
  Button
</button>

Buttons با badges

<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>

<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>

Block buttons

<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>

<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>

Segmented control

بخش های محتوائی که باید توسط کنترل کننده مبادله شده و آن را تغییر دهند، باید همه آنها خواهران و برادران باشند و کلاس .control-content داشته باشند. سپس، به هر بخش محتوا، یک شناسه داده و لینک در کنترل جداگانه را به آن شناسایی کنید.

<div class="segmented-control">
  <a class="control-item active" href="#item1mobile">
    Thing one
  </a>
  <a class="control-item" href="#item2mobile">
    Thing two
  </a>
  <a class="control-item" href="#item3mobile">
    Thing three
  </a>
</div>
<div class="card">
  <span id="item1mobile" class="control-content active">Item 1</span>
  <span id="item2mobile" class="control-content">Item 2</span>
  <span id="item3mobile" class="control-content">Item 3</span>
</div>

Badges

Badge ها در چهار عمل ظاهر می شوند و باید نشان دهند که "چه مقدار" از چیزی وجود دارد. افزودن یک کلاس .badge-inverted رنگ پس زمینه را حذف می کند.

1 2 3 4 1 2 3 4
<span class="badge">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-negative">4</span>

<span class="badge badge-inverted">1</span>
<span class="badge badge-primary badge-inverted">2</span>
<span class="badge badge-positive badge-inverted">3</span>
<span class="badge badge-negative badge-inverted">4</span>

Form ها

<form>
  <input type="text" placeholder="Full name">
  <input type="search" placeholder="Search">
  <textarea rows="5"></textarea>
  <button class="btn btn-positive btn-block">Choose existing</button>
</form>

Form با input group

<form class="input-group">
  <input type="text" placeholder="Full name">
  <input type="email" placeholder="Email">
  <input type="text" placeholder="Username">
</form>

Form با input group و labels

<form class="input-group">
  <div class="input-row">
    <label>Full name</label>
    <input type="text" placeholder="Mister i-app">
  </div>
  <div class="input-row">
    <label>Email</label>
    <input type="email" placeholder="i-appframework@gmail.com">
  </div>
  <div class="input-row">
    <label>Username</label>
    <input type="text" placeholder="i-app">
  </div>
</form>

Toggles

Toggles می توانند با اسلایدینگ و ضربه زذن کوتاه مورد استفاده قرار بگیرند

<div class="toggle active">
  <div class="toggle-handle"></div>
</div>
<div class="toggle">
  <div class="toggle-handle"></div>
</div>

Toggles.js یک رویداد را به یک سند متصل می کند که یک شی Detail را باز می گرداند و می تواند مورد استفاده قرار گیرد تا یک فراخوانی فراخوانی شود.

// Only needed if you want to fire a callback
document
.querySelector('#myToggle')
.addEventListener('toggle', myFunction)

Popovers

<div id="popover" class="popover">
  <header class="bar bar-nav">
    <h1 class="title">Popover title</h1>
  </header>
  <ul class="table-view">
    <li class="table-view-cell">Item1</li>
    <li class="table-view-cell">Item2</li>
    <li class="table-view-cell">Item3</li>
    <li class="table-view-cell">Item4</li>
    <li class="table-view-cell">Item5</li>
    <li class="table-view-cell">Item6</li>
    <li class="table-view-cell">Item7</li>
    <li class="table-view-cell">Item8</li>
  </ul>
</div>

Popovers طراحی شده اند که فقط از Title bars استفاده کنند. مقدار عنوان href را به شناسه popover تنظیم کنید، مانند:

<header class="bar bar-nav">
  <a href="#myPopover">
    <h1 class="title">
      Tap title
      <span class="icon icon-caret"></span>
    </h1>
  </a>
</header>

Modals

Open modal
<a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal">
  <header class="bar bar-nav">
    <a class="icon icon-close pull-right" href="#myModalexample"></a>
    <h1 class="title">Modal</h1>
  </header>

  <div class="content">
    <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
  </div>
</div>

Modals طراحی شده اند که فقط از لینک ها استفاده کنند. مقدار لینکهای جابجایی را به شناسه یک مودال تنظیم کنید.

Sliders

می توان با هر تعداد اسلایده با هر نوع محتوا مورد استفاده قرار گیرد.

Mountain and sky Slide me
Giant mecha
Big Ben
<div class="slider" id="mySlider">
  <div class="slide-group">
    <div class="slide">
      <img src="/assets/img/slide-1.jpg">
      <span class="slide-text">
        <span class="icon icon-left-nav"></span>
        Slide me
      </span>
    </div>
    <div class="slide">
      <img src="/assets/img/slide-2.jpg">
    </div>
    <div class="slide">
      <img src="/assets/img/slide-3.jpg">
    </div>
  </div>
</div>

Sliders.js یک رویداد را به یک سند متصل می کند که یک شی جزئیات را به ارمغان می آورد و می توان آن را برای آتش زدن یک فراخوانی فراخوانی کرد.

// Only needed if you want to fire a callback
document
.querySelector('#mySlider')
.addEventListener('slide', myFunction)

Push

Push.js موتور است که صفحات برنامه i-A را همراه با AJAX و API history متصل می کند. Push.js در حال گوش دادن به همه کلیک ها در یک صفحه است، پس مطمئن شوید که آن را گنجانده اید و چیزی را در پروژه i-app خود پیوند دهید.

<!-- A one.php link -->
<a href="two.php">Two</a>

این برای فشار دادن همه چیز را در محدوده .content با content of two.php جایگزین می کند. همچنین، آن را به روز رسانی و یا حذف .bar-nav و نوار. نوار با توجه به حضور خود را در two.php.

در حال حاضر صفحات از طریق فشار بارگذاری می شوند، انتقال بین انیمیشن ها بین صفحات آسان است. سه تغییر مختلف برای انتخاب از fade ، slide-in یا slide-out وجود دارد.

<!-- An one.php link that animates to two.php -->
<a href="two.php" data-transition="fade">Two</a>

یک نسخه کاری از Push:

<header class="bar bar-nav">
  <h1 class="title">Push</h1>
</header>
<div class="content">
  <div class="card">
    <ul class="table-view">
      <li class="table-view-cell">
        <a class="navigate-right" href="../two.php" data-transition="slide-in">
          Load new page with push
        </a>
      </li>
    </ul>
  </div>
</div>

پیوندی را که میخواهید توسط Push متوقف شود ندارید؟ این را امتحان کن:

<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>

Push.js یک رویداد را به یک سند متصل می کند که یک شی Detail را باز می گرداند و می تواند مورد استفاده قرار گیرد تا یک فراخوان فراخوانی شود.

// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);

i-appicons

از ایکون های i-appicons در اپلیکیشن خود استفاده کنید.

این ایکون ها در حال اضافه شدن می باشند.

<div class="content-padded">
  <span class="icon icon-back"></span>
  <span class="icon icon-bars"></span>
  <span class="icon icon-caret"></span>
  <span class="icon icon-check"></span>
  <span class="icon icon-close"></span>
  <span class="icon icon-code"></span>
  <span class="icon icon-compose"></span>
  <span class="icon icon-download"></span>
  <span class="icon icon-edit"></span>
  <span class="icon icon-forward"></span>
  <span class="icon icon-gear"></span>
  <span class="icon icon-home"></span>
  <span class="icon icon-info"></span>
  <span class="icon icon-list"></span>
  <span class="icon icon-more-vertical"></span>
  <span class="icon icon-more"></span>
  <span class="icon icon-pages"></span>
  <span class="icon icon-pause"></span>
  <span class="icon icon-person"></span>
  <span class="icon icon-play"></span>
  <span class="icon icon-plus"></span>
  <span class="icon icon-refresh"></span>
  <span class="icon icon-search"></span>
  <span class="icon icon-share"></span>
  <span class="icon icon-sound"></span>
  <span class="icon icon-sound2"></span>
  <span class="icon icon-sound3"></span>
  <span class="icon icon-sound4"></span>
  <span class="icon icon-star-filled"></span>
  <span class="icon icon-star"></span>
  <span class="icon icon-stop"></span>
  <span class="icon icon-trash"></span>
  <span class="icon icon-up-nav"></span>
  <span class="icon icon-up"></span>
  <span class="icon icon-right-nav"></span>
  <span class="icon icon-right"></span>
  <span class="icon icon-down-nav"></span>
  <span class="icon icon-down"></span>
  <span class="icon icon-left-nav"></span>
  <span class="icon icon-left"></span>
</div>