Ionic: การทำ Icons และ Splash Screens

Posted on 6 November, 2018 by jack

เตรียมไฟล์ icon (icon.png) และ Splash Screens (splash.png) โดยนำไปไว้ในโฟลเดอร์ resources

ไฟล์ที่ใช้เตรียมเป็น Splash Screens ควรมีขนาด 1920×1920 พิกเซล
โดยมีสีพื้นทั้งภาพ และเอาภาพที่ต้องการจริงๆอยู่ตรงกลางภาพ

เมื่อเตรียมทั้ง 2 ไฟล์ เสร็จ ต่อมาก็ใช้คำสั่ง ionic cordova resources เพื่อทำการ crop และ resize images

ดูวิธีใช้คำสั่ง

> ionic cordova resources --help

  ionic cordova resources - Automatically create icon and splash screen resources

    Ionic can automatically generate perfectly sized icons and splash screens from source images (.png, .psd, or .ai)
    for your Cordova platforms.

    The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source
    image for splash screens should ideally be at least 2732×2732px and located at resources/splash.png. If you used
    ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.

    You can also generate platform-specific icons and splash screens by placing them in the respective
    resources/<platform>/ directory. For example, to generate an icon for Android, place your image at
    resources/android/icon.png.

    By default, this command will not regenerate resources whose source image has not changed. To disable this
    functionality and always overwrite generated images, use --force.

    For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the
    image. You can use https://code.ionicframework.com/resources/splash.psd as a template for your splash screen.

    ionic cordova resources will automatically update your config.xml to reflect the changes in the generated images,
    which Cordova then configures.

    Cordova reference documentation:
    - Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
    - Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

    This command uses Ionic servers, so we require you to be logged into your free Ionic account. Use ionic login to
    login.

  Usage:

    $ ionic cordova resources [<platform>] [options]

  Inputs:

    platform ................. The platform for which you would like to generate resources (android, ios)

  Options:

    --force, -f .............. Force regeneration of resources
    --icon, -i ............... Generate icon resources
    --splash, -s ............. Generate splash screen resources

  Examples:

    $ ionic cordova resources
    $ ionic cordova resources ios
    $ ionic cordova resources android

> ionic cordova resources --help

ionic cordova resources - Automatically create icon and splash screen resources

Ionic can automatically generate perfectly sized icons and splash screens from source images (.png, .psd, or .ai)

for your Cordova platforms.

The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source

image for splash screens should ideally be at least 2732×2732px and located at resources/splash.png. If you used

ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.

You can also generate platform-specific icons and splash screens by placing them in the respective

resources/<platform>/ directory. For example, to generate an icon for Android, place your image at

resources/android/icon.png.

By default, this command will not regenerate resources whose source image has not changed. To disable this

functionality and always overwrite generated images, use --force.

For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the

image. You can use https://code.ionicframework.com/resources/splash.psd as a template for your splash screen.

ionic cordova resources will automatically update your config.xml to reflect the changes in the generated images,

which Cordova then configures.

Cordova reference documentation:

- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html

- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

This command uses Ionic servers, so we require you to be logged into your free Ionic account. Use ionic login to

Usage:

$ ionic cordova resources [<platform>] [options]

Inputs:

platform ................. The platform for which you would like to generate resources (android, ios)

Options:

--force, -f .............. Force regeneration of resources

--icon, -i ............... Generate icon resources

--splash, -s ............. Generate splash screen resources

Examples:

$ ionic cordova resources

$ ionic cordova resources ios

$ ionic cordova resources android

สั่งสำหรับ android

> ionic cordova resources android

1	> ionic cordova resources android

Link

Ionic: Icons

Posted on 2 November, 2018 by jack

src/pages/home/home.html

<ion-header>
    <ion-navbar>
      <ion-title>Icons</ion-title>
    </ion-navbar>
  </ion-header>
  
  <ion-content text-center class="icons-basic-page">
  
    <ion-row>
      <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
      <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
      <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
      <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
      <ion-col><ion-icon name="people"></ion-icon></ion-col>
      <ion-col><ion-icon name="person"></ion-icon></ion-col>
      <ion-col><ion-icon name="contact"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="apps"></ion-icon></ion-col>
      <ion-col><ion-icon name="lock"></ion-icon></ion-col>
      <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
      <ion-col><ion-icon name="unlock"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
      <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
      <ion-col><ion-icon name="pin"></ion-icon></ion-col>
      <ion-col><ion-icon name="locate"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="mic"></ion-icon></ion-col>
      <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
      <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
      <ion-col><ion-icon name="microphone"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
      <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
      <ion-col><ion-icon name="bus"></ion-icon></ion-col>
      <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="camera"></ion-icon></ion-col>
      <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
      <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
      <ion-col><ion-icon name="pin"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
      <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
      <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
      <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
  
      <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
      <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
      <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
      <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
    </ion-row>
  
  </ion-content>

<ion-header>

<ion-navbar>

<ion-title>Icons</ion-title>

</ion-navbar>

</ion-header>

<ion-content text-center class="icons-basic-page">

<ion-row>

<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>

<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>

<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>

<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>

<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>

<ion-col><ion-icon name="people"></ion-icon></ion-col>

<ion-col><ion-icon name="person"></ion-icon></ion-col>

<ion-col><ion-icon name="contact"></ion-icon></ion-col>

<ion-col><ion-icon name="apps"></ion-icon></ion-col>

<ion-col><ion-icon name="lock"></ion-icon></ion-col>

<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>

<ion-col><ion-icon name="unlock"></ion-icon></ion-col>

<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>

<ion-col><ion-icon name="navigate"></ion-icon></ion-col>

<ion-col><ion-icon name="pin"></ion-icon></ion-col>

<ion-col><ion-icon name="locate"></ion-icon></ion-col>

<ion-col><ion-icon name="mic"></ion-icon></ion-col>

<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>

<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>

<ion-col><ion-icon name="microphone"></ion-icon></ion-col>

<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>

<ion-col><ion-icon name="calculator"></ion-icon></ion-col>

<ion-col><ion-icon name="bus"></ion-icon></ion-col>

<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>

<ion-col><ion-icon name="camera"></ion-icon></ion-col>

<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>

<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>

<ion-col><ion-icon name="pin"></ion-icon></ion-col>

<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>

<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>

<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>

<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>

<ion-col><ion-icon name="cloud"></ion-icon></ion-col>

<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>

<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>

<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>

</ion-row>

</ion-content>

src/pages/home/home.scss

page-home {
    .icons-basic-page {
        ion-icon {
          font-size: 50px;
        }
      
        ion-row {
          height: 100%;
          flex-wrap: wrap;
        }
      
        ion-col {
          flex: 0 0 25%;
          max-width: 25%;
          text-align: center;
          padding: 10px 5px;
        }
    }
}

page-home {

.icons-basic-page {

ion-icon {

font-size: 50px;

}

ion-row {

height: 100%;

flex-wrap: wrap;

}

ion-col {

flex: 0 0 25%;

max-width: 25%;

text-align: center;

padding: 10px 5px;

}

บรรทัดที่ 4 : font-size ไว้ปรับขนาดของ icon

https://ionicframework.com/docs/components/#icons

Ionic: Checkbox

Posted on 2 November, 2018 by jack

<ion-header>
  <ion-navbar>
    <ion-title>Map Card</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg">
  <ion-item>
    <ion-label>Daenerys Targaryen</ion-label>
    <ion-checkbox color="dark" checked="true"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Arya Stark</ion-label>
    <ion-checkbox disabled="true"></ion-checkbox>
  </ion-item>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>Map Card</ion-title>

</ion-navbar>

</ion-header>

<ion-content class="cards-bg">

<ion-item>

<ion-label>Daenerys Targaryen</ion-label>

<ion-checkbox color="dark" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Arya Stark</ion-label>

<ion-checkbox disabled="true"></ion-checkbox>

</ion-item>

</ion-content>

<ion-header>
  <ion-navbar>
    <ion-title>
      Checkboxes
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-list-header>
      Characters
    </ion-list-header>

    <ion-item>
      <ion-label>Jon Snow</ion-label>
      <ion-checkbox checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Daenerys Targaryen</ion-label>
      <ion-checkbox color="dark" checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Arya Stark</ion-label>
      <ion-checkbox value="cherry" disabled="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Tyrion Lannister</ion-label>
      <ion-checkbox color="secondary"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Sansa Stark</ion-label>
      <ion-checkbox color="danger" checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Khal Drogo</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Cersei Lannister</ion-label>
      <ion-checkbox color="energized" checked="true" color="dark"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Stannis Baratheon</ion-label>
      <ion-checkbox color="royal" checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Petyr Baelish</ion-label>
      <ion-checkbox disabled="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Hodor</ion-label>
      <ion-checkbox color="dark" checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Catelyn Stark</ion-label>
      <ion-checkbox color="secondary" checked="true"></ion-checkbox>
    </ion-item>

    <ion-item>
      <ion-label>Bronn</ion-label>
      <ion-checkbox color="royal"></ion-checkbox>
    </ion-item>

  </ion-list>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Checkboxes

</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-list>

<ion-list-header>

Characters

</ion-list-header>

<ion-item>

<ion-label>Jon Snow</ion-label>

<ion-checkbox checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Daenerys Targaryen</ion-label>

<ion-checkbox color="dark" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Arya Stark</ion-label>

<ion-checkbox value="cherry" disabled="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Tyrion Lannister</ion-label>

<ion-checkbox color="secondary"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Sansa Stark</ion-label>

<ion-checkbox color="danger" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Khal Drogo</ion-label>

<ion-checkbox></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Cersei Lannister</ion-label>

<ion-checkbox color="energized" checked="true" color="dark"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Stannis Baratheon</ion-label>

<ion-checkbox color="royal" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Petyr Baelish</ion-label>

<ion-checkbox disabled="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Hodor</ion-label>

<ion-checkbox color="dark" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Catelyn Stark</ion-label>

<ion-checkbox color="secondary" checked="true"></ion-checkbox>

</ion-item>

<ion-item>

<ion-label>Bronn</ion-label>

<ion-checkbox color="royal"></ion-checkbox>

</ion-item>

</ion-list>

</ion-content>

Ionic: Cards

Posted on 2 November, 2018 by jack

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
    <ion-card-header color="primary">
      Card Header
    </ion-card-header>

    <ion-card-content>
      Cards are primarily a CSS component. To use a basic card, follow this structure:
    </ion-card-content>
  </ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header color="primary">

Card Header

</ion-card-header>

<ion-card-content>

Cards are primarily a CSS component. To use a basic card, follow this structure:

</ion-card-content>

</ion-card>

</ion-content>

Lists In Cards

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
    <ion-card-header color="primary">
      Explore Nearby
    </ion-card-header>

    <ion-list>
      <button ion-item>
        <ion-icon name="cart" item-start></ion-icon>
        Shopping
      </button>

      <button ion-item>
        <ion-icon name="medical" item-start></ion-icon>
        Hospital
      </button>

      <button ion-item>
        <ion-icon name="cafe" item-start></ion-icon>
        Cafe
      </button>

      <button ion-item>
        <ion-icon name="paw" item-start></ion-icon>
        Dog Park
      </button>

      <button ion-item>
        <ion-icon name="beer" item-start></ion-icon>
        Pub
      </button>

      <button ion-item>
        <ion-icon name="planet" item-start></ion-icon>
        Space
      </button>

    </ion-list>
  </ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header color="primary">

Explore Nearby

</ion-card-header>

<ion-list>

<ion-icon name="cart" item-start></ion-icon>

Shopping

</button>

<ion-icon name="medical" item-start></ion-icon>

Hospital

</button>

<ion-icon name="cafe" item-start></ion-icon>

Cafe

</button>

<ion-icon name="paw" item-start></ion-icon>

Dog Park

</button>

<ion-icon name="beer" item-start></ion-icon>

Pub

</button>

<ion-icon name="planet" item-start></ion-icon>

Space

</button>

</ion-list>

</ion-card>

</ion-content>

Images In Cards
ภาพที่ใช้ โดยเอาไปไว้ใน src\assets\imgs

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
    <ion-card-header color="primary">
      Images In Cards
    </ion-card-header>

    <img src="../assets/imgs/apple.jpg" />
    <ion-card-content>
      <ion-card-title>
        Nine Inch
      </ion-card-title>
      <p>
        The most popular industrial group ever.
      </p>
    </ion-card-content>
  </ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header color="primary">

Images In Cards

</ion-card-header>

<ion-card-content>

<ion-card-title>

Nine Inch

</ion-card-title>

<p>

The most popular industrial group ever.

</p>

</ion-card-content>

</ion-card>

</ion-content>

<ion-header>
    <ion-navbar>
      <ion-title>
        Ionic Blank
      </ion-title>
    </ion-navbar>
  </ion-header>
  
  <ion-content padding>
  
    <ion-card>
      <img src="../assets/imgs/card_img.jpg" />
      <ion-card-content>
        <ion-card-title>
          Nature
        </ion-card-title>
        <p>
            <ion-icon name="star"> Favorite </ion-icon>
        </p>
        <p>
          <ion-icon name="musical-notes"> Listen </ion-icon>
        </p>
        <p>
          <ion-icon name="share-alt"> Share </ion-icon>
        </p>
      </ion-card-content>
    </ion-card>
  
  </ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-content>

<ion-card-title>

Nature

</ion-card-title>

<p>

<ion-icon name="star"> Favorite </ion-icon>

</p>

<p>

<ion-icon name="musical-notes"> Listen </ion-icon>

</p>

<p>

<ion-icon name="share-alt"> Share </ion-icon>

</p>

</ion-card-content>

</ion-card>

</ion-content>

Background Images

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Background Images</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

  <ion-card>
    <img src="../assets/imgs/card1.jpg" />
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>

  <ion-card>
    <img src="../assets/imgs/card2.jpg" />
    <div class="card-title">Amsterdam</div>
    <div class="card-subtitle">64 Listings</div>
  </ion-card>

  <ion-card>
    <img src="../assets/imgs/card3.jpg" />
    <div class="card-title">San Francisco</div>
    <div class="card-subtitle">72 Listings</div>
  </ion-card>

  <ion-card>
    <img src="../assets/imgs/card4.jpg" />
    <div class="card-title">Madison</div>
    <div class="card-subtitle">28 Listings</div>
  </ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>Background Images</ion-title>

</ion-navbar>

</ion-header>

<ion-content class="card-background-page">

<ion-card>

<div class="card-title">São Paulo</div>

<div class="card-subtitle">41 Listings</div>

</ion-card>

<ion-card>

<div class="card-title">Amsterdam</div>

<div class="card-subtitle">64 Listings</div>

</ion-card>

<ion-card>

<div class="card-title">San Francisco</div>

<div class="card-subtitle">72 Listings</div>

</ion-card>

<ion-card>

<div class="card-title">Madison</div>

<div class="card-subtitle">28 Listings</div>

</ion-card>

</ion-content>

src/pages/home/home.scss

page-home {
    .card-background-page {

        ion-card {
          position: relative;
          text-align: center;
        }
      
        .card-title {
          position: absolute;
          top: 36%;
          font-size: 2.0em;
          width: 100%;
          font-weight: bold;
          color: #fff;
        }
      
        .card-subtitle {
          font-size: 1.0em;
          position: absolute;
          top: 52%;
          width: 100%;
          color: #fff;
        }
      
    }
}

page-home {

.card-background-page {

ion-card {

position: relative;

text-align: center;

}

.card-title {

position: absolute;

top: 36%;

font-size: 2.0em;

width: 100%;

font-weight: bold;

color: #fff;

}

.card-subtitle {

font-size: 1.0em;

position: absolute;

top: 52%;

width: 100%;

color: #fff;

}

Social Cards

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Social Card</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg social-cards">

  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="../assets/imgs/avatar1.png">
      </ion-avatar>
      <h2>Marty McFly</h2>
      <p>November 5, 1955</p>
    </ion-item>

    <img src="../assets/imgs/card1.jpg">

    <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a
        DeLorean?! Whoa. This is heavy.</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          12 Likes
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          4 Comments
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          11h ago
        </ion-note>
      </ion-col>
    </ion-row>

  </ion-card>


  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="../assets/imgs/avatar2.png">
      </ion-avatar>
      <h2>Sarah Connor</h2>
      <p>May 12, 1984</p>
    </ion-item>

    <img src="../assets/imgs/card2.jpg">

    <ion-card-content>
      <p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of
        human life, maybe we can too.</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          30 Likes
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          64 Comments
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          30yr ago
        </ion-note>
      </ion-col>
    </ion-row>

  </ion-card>


  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="assets/img/ian-avatar.png">
      </ion-avatar>
      <h2>Dr. Ian Malcolm</h2>
      <p>June 28, 1990</p>
    </ion-item>

    <img src="assets/img/advance-card-jp.jpg">

    <ion-card-content>
      <p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they
        should.</p>
    </ion-card-content>

    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='thumbs-up'></ion-icon>
          46 Likes
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-start>
          <ion-icon name='text'></ion-icon>
          66 Comments
        </button>
      </ion-col>
      <ion-col align-self-center text-center>
        <ion-note>
          2d ago
        </ion-note>
      </ion-col>
    </ion-row>

  </ion-card>


</ion-content>

<style>
  .social-cards ion-col {
    padding: 0;
  }
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<ion-header>

<ion-navbar>

<ion-title>Social Card</ion-title>

</ion-navbar>

</ion-header>

<ion-content class="cards-bg social-cards">

<ion-card>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<h2>Marty McFly</h2>

<p>November 5, 1955</p>

</ion-item>

<ion-card-content>

<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a

DeLorean?! Whoa. This is heavy.</p>

</ion-card-content>

<ion-row>

<ion-col>

<ion-icon name='thumbs-up'></ion-icon>

12 Likes

</button>

</ion-col>

<ion-col>

<ion-icon name='text'></ion-icon>

4 Comments

</button>

</ion-col>

<ion-col align-self-center text-center>

<ion-note>

11h ago

</ion-note>

</ion-col>

</ion-row>

</ion-card>

<ion-card>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<h2>Sarah Connor</h2>

</ion-item>

<ion-card-content>

<p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of

human life, maybe we can too.</p>

</ion-card-content>

<ion-row>

<ion-col>

<ion-icon name='thumbs-up'></ion-icon>

30 Likes

</button>

</ion-col>

<ion-col>

<ion-icon name='text'></ion-icon>

64 Comments

</button>

</ion-col>

<ion-col align-self-center text-center>

<ion-note>

30yr ago

</ion-note>

</ion-col>

</ion-row>

</ion-card>

<ion-card>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<h2>Dr. Ian Malcolm</h2>

</ion-item>

<ion-card-content>

<p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they

should.</p>

</ion-card-content>

<ion-row>

<ion-col>

<ion-icon name='thumbs-up'></ion-icon>

46 Likes

</button>

</ion-col>

<ion-col>

<ion-icon name='text'></ion-icon>

66 Comments

</button>

</ion-col>

<ion-col align-self-center text-center>

<ion-note>

2d ago

</ion-note>

</ion-col>

</ion-row>

</ion-card>

</ion-content>

<style>

.social-cards ion-col {

padding: 0;

}

</style>

src/pages/home/home.scss

page-home {
    .card-background-page {
        ion-card {
          position: relative;
          text-align: center;
        }
      
        .card-title {
          position: absolute;
          top: 36%;
          font-size: 2.0em;
          width: 100%;
          font-weight: bold;
          color: #fff;
        }
      
        .card-subtitle {
          font-size: 1.0em;
          position: absolute;
          top: 52%;
          width: 100%;
          color: #fff;
        }
    }
}

page-home {

.card-background-page {

ion-card {

position: relative;

text-align: center;

}

.card-title {

position: absolute;

top: 36%;

font-size: 2.0em;

width: 100%;

font-weight: bold;

color: #fff;

}

.card-subtitle {

font-size: 1.0em;

position: absolute;

top: 52%;

width: 100%;

color: #fff;

}

Map Cards

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Map Card</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="cards-bg">

  <ion-card class="adv-map">
    <div style="position: relative">
      <img src="../assets/imgs/map1.jpg">
      <ion-fab right top>
        <button ion-fab class="fab-map">
          <ion-icon name='pin'></ion-icon>
        </button>
      </ion-fab>
    </div>
    <ion-item>
      <ion-icon color="subtle" large item-start name='football'></ion-icon>
      <h2>Museum of Football</h2>
      <p>11 N. Way St, Madison, WI 53703</p>
    </ion-item>
    <ion-item>
      <ion-icon color="subtle" large item-start name='wine'></ion-icon>
      <h2>Institute of Fine Cocktails</h2>
      <p>14 S. Hop Avenue, Madison, WI 53703</p>
    </ion-item>
    <ion-item actions>
      <span ion-text item-start color="secondary" class="item-bold">18 min</span>
      <span ion-text item-start color="subtle">(2.6 mi)</span>
      <button ion-button color="primary" clear item-end icon-start>
        <ion-icon name='navigate'></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

  <ion-card class="adv-map">
    <div style="position: relative">
      <img src="../assets/imgs/map2.jpg">

      <ion-fab right top>
        <button ion-fab color="danger" class="fab-map">
          <ion-icon name="pin"></ion-icon>
        </button>
      </ion-fab>
    </div>
    <ion-item>
      <ion-icon color="subtle" large item-start name='cloud'></ion-icon>
      <h2>Yoshi's Island</h2>
      <p>Iggy Koopa</p>
    </ion-item>
    <ion-item>
      <ion-icon color="subtle" large item-start name='leaf'></ion-icon>
      <h2>Forest of Illusion</h2>
      <p>Roy Koopa</p>
    </ion-item>
    <ion-item actions>
      <span ion-text item-start class="item-bold">3 hr</span>
      <span ion-text item-start color="subtle">(4.8 mi)</span>
      <button ion-button color="danger" clear item-end icon-start>
        <ion-icon name='navigate'></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>

  <ion-card class="adv-map">
    <div style="position: relative">
      <img src="assets/img/advance-card-map-paris.png">
      <ion-fab right top>
        <button ion-fab color="secondary">
          <ion-icon name="pin"></ion-icon>
        </button>
      </ion-fab>
    </div>
    <ion-item>
      <ion-icon color="subtle" large item-start name='information-circle'></ion-icon>
      <h2>Museum of Information</h2>
      <p>44 Rue de Info, 75010 Paris, France</p>
    </ion-item>
    <ion-item>
      <ion-icon color="subtle" large item-start name='leaf'></ion-icon>
      <h2>General Pharmacy</h2>
      <p>1 Avenue Faux, 75010 Paris, France</p>
    </ion-item>
    <ion-item actions>
      <span ion-text item-start color="secondary" class="item-bold">26 min</span>
      <span ion-text item-start color="subtle">(8.1 mi)</span>
      <button ion-button color="secondary" clear item-end icon-start>
        <ion-icon name='navigate'></ion-icon>
        Start
      </button>
    </ion-item>

  </ion-card>


</ion-content>

100

101

<ion-header>

<ion-navbar>

<ion-title>Map Card</ion-title>

</ion-navbar>

</ion-header>

<ion-content class="cards-bg">

<ion-card class="adv-map">

<ion-fab right top>

<ion-icon name='pin'></ion-icon>

</button>

</ion-fab>

</div>

<ion-item>

<ion-icon color="subtle" large item-start name='football'></ion-icon>

<h2>Museum of Football</h2>

<p>11 N. Way St, Madison, WI 53703</p>

</ion-item>

<ion-item>

<ion-icon color="subtle" large item-start name='wine'></ion-icon>

<h2>Institute of Fine Cocktails</h2>

<p>14 S. Hop Avenue, Madison, WI 53703</p>

</ion-item>

<ion-item actions>

<ion-icon name='navigate'></ion-icon>

Start

</button>

</ion-item>

</ion-card>

<ion-card class="adv-map">

<ion-fab right top>

<ion-icon name="pin"></ion-icon>

</button>

</ion-fab>

</div>

<ion-item>

<ion-icon color="subtle" large item-start name='cloud'></ion-icon>

<h2>Yoshi's Island</h2>

<p>Iggy Koopa</p>

</ion-item>

<ion-item>

<ion-icon color="subtle" large item-start name='leaf'></ion-icon>

<h2>Forest of Illusion</h2>

<p>Roy Koopa</p>

</ion-item>

<ion-item actions>

<ion-icon name='navigate'></ion-icon>

Start

</button>

</ion-item>

</ion-card>

<ion-card class="adv-map">

<ion-fab right top>

<ion-icon name="pin"></ion-icon>

</button>

</ion-fab>

</div>

<ion-item>

<ion-icon color="subtle" large item-start name='information-circle'></ion-icon>

<h2>Museum of Information</h2>

<p>44 Rue de Info, 75010 Paris, France</p>

</ion-item>

<ion-item>

<ion-icon color="subtle" large item-start name='leaf'></ion-icon>

<h2>General Pharmacy</h2>

<p>1 Avenue Faux, 75010 Paris, France</p>

</ion-item>

<ion-item actions>

<ion-icon name='navigate'></ion-icon>

Start

</button>

</ion-item>

</ion-card>

</ion-content>

src/pages/home/home.scss

page-home {
    ion-card.adv-map p {
        font-size: 0.7em !important;
      }
      
      button[fab].fab-map {
        top: calc(100% - 35px);
        z-index: 50;
      }
      
      .item-bold {
        font-weight: bold;
      }
      
      ion-content.cards-bg {
        background-color: #f4f4f7;
      }
}

page-home {

ion-card.adv-map p {

font-size: 0.7em !important;

}

button[fab].fab-map {

top: calc(100% - 35px);

z-index: 50;

}

.item-bold {

font-weight: bold;

}

ion-content.cards-bg {

background-color: #f4f4f7;

}

Ionic: Badges

Posted on 2 November, 2018 by jack

Badges are small components that typically communicate a numerical value to the user. They are typically used within an item.

ในรูปใช้ Badge เน้นตัวเลข โดยสามารถกำหนดสีต่างๆได้

Continue reading →

Functions

Posted on 2 November, 2018 by jack

Dart is a true object-oriented language, so even functions are objects and have a type, Function.

main() {
  print(isOld(50));
  print(isNotOld(50));
  print(isFifty(50));
  print(isSixty(60));
}

bool isOld(int old) {
  return old > 50;
}

isNotOld(old) {
  return old <= 50;
}

bool isFifty(int old) => old == 50;

bool isSixty(int old) => old == 60 ? true : false;

main() {

print(isOld(50));

print(isNotOld(50));

print(isFifty(50));

print(isSixty(60));

}

bool isOld(int old) {

return old > 50;

}

isNotOld(old) {

return old <= 50;

}

bool isFifty(int old) => old == 50;

bool isSixty(int old) => old == 60 ? true : false;

บรรทัดที่ 8 : การประกาศฟังก์ชัน
บรรทัดที่ 12 : การประกาศฟังก์ชัน แบบไม่ระบุชนิดของตัวแปร และชนิดของ returnt type
บรรทัดที่ 16 : การประกาศฟังก์ชันแบบ shorthand syntax
บรรทัดที่ 18 : การประกาศฟังก์ชันแบบ shorthand syntax ร่วมกับการใช้ conditional expression

Optional positional parameters
ใส่พารามิเตอร์ใน [] ทำให้กลายเป็น optional parameters

main() {
  assert(say('Bob', 'Howdy') == 'Bob says Howdy');

  assert(say('Bob', 'Howdy', 'smoke signal') ==
      'Bob says Howdy with a smoke signal');
}

String say(String from, String msg, [String device]) {
  var result = '$from says $msg';
  if (device != null) {
    result = '$result with a $device';
  }
  return result;
}

main() {

assert(say('Bob', 'Howdy') == 'Bob says Howdy');

assert(say('Bob', 'Howdy', 'smoke signal') ==

'Bob says Howdy with a smoke signal');

}

String say(String from, String msg, [String device]) {

var result = '$from says $msg';

if (device != null) {

result = '$result with a $device';

}

return result;

}

Default parameter values

main() {
  assert(say('Bob', 'Howdy') == 'Bob says Howdy with a carrier pigeon');
  assert(say('Bob', 'Howdy', 'iPhone') == 'Bob says Howdy with a iPhone');
}

String say(String from, String msg,
    [String device = 'carrier pigeon', String mood]) {
  var result = '$from says $msg';
  if (device != null) {
    result = '$result with a $device';
  }
  if (mood != null) {
    result = '$result (in a $mood mood)';
  }
  return result;
}

main() {

assert(say('Bob', 'Howdy') == 'Bob says Howdy with a carrier pigeon');

assert(say('Bob', 'Howdy', 'iPhone') == 'Bob says Howdy with a iPhone');

}

String say(String from, String msg,

[String device = 'carrier pigeon', String mood]) {

var result = '$from says $msg';

if (device != null) {

result = '$result with a $device';

}

if (mood != null) {

result = '$result (in a $mood mood)';

}

return result;

}

กำหนด List และ Map เป็น default value

main() {
  doStuff();
}

void doStuff(
    {List<int> list = const [1, 2, 3],
    Map<String, String> gifts = const {
      'first': 'paper',
      'second': 'cotton',
      'third': 'leather'
    }}) {
  print('list:  $list');
  print('gifts: $gifts');
}

main() {

doStuff();

}

void doStuff(

{List<int> list = const [1, 2, 3],

Map<String, String> gifts = const {

'first': 'paper',

'second': 'cotton',

'third': 'leather'

}}) {

print('list: $list');

print('gifts: $gifts');

}

จะได้

list:  [1, 2, 3]
gifts: {first: paper, second: cotton, third: leather}

1 2	list: [1, 2, 3] gifts: {first: paper, second: cotton, third: leather}

The main() function

void main(List<String> arguments) {
  print(arguments);

  assert(arguments.length == 2);
  assert(int.parse(arguments[0]) == 1);
  assert(arguments[1] == 'test');
}

void main(List<String> arguments) {

print(arguments);

assert(arguments.length == 2);

assert(int.parse(arguments[0]) == 1);

assert(arguments[1] == 'test');

}

รันทาง command line จะไม่แสดง error ของ assert

D:\Project\dart\my_dart\bin>dart my_dart.dart
[]

1 2	D:\Project\dart\my_dart\bin>dart my_dart.dart []

ต้องใส่ --enable-asserts ด้วย ก็จะแสดง error ของ assert

D:\Project\dart\my_dart\bin>dart --enable-asserts my_dart.dart
[]
Unhandled exception:
'file:///D:/Project/dart/my_dart/bin/my_dart.dart': Failed assertion: line 5 pos 10: 'arguments.length == 2': is not tru
e.
#0      _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39)
#1      _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5)
#2      main (file:///D:/Project/dart/my_dart/bin/my_dart.dart:5:10)
#3      _startIsolate.<anonymous closure> (dart:isolate/runtime/libisolate_patch.dart:287:32)
#4      _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)

D:\Project\dart\my_dart\bin>dart --enable-asserts my_dart.dart

[]

Unhandled exception:

'file:///D:/Project/dart/my_dart/bin/my_dart.dart': Failed assertion: line 5 pos 10: 'arguments.length == 2': is not tru

#0 _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39)

#1 _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5)

#2 main (file:///D:/Project/dart/my_dart/bin/my_dart.dart:5:10)

#3 _startIsolate.<anonymous closure> (dart:isolate/runtime/libisolate_patch.dart:287:32)

#4 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)

ทีนี้ใส่พารามิเตอร์ไป 2 ตัวคือ 1 test ก็จะผ่านละ ไม่ error

D:\Project\dart\my_dart\bin>dart --enable-asserts my_dart.dart 1 test
[1, test]

1 2	D:\Project\dart\my_dart\bin>dart --enable-asserts my_dart.dart 1 test [1, test]

Pass a function as a parameter to another function

void main() {
  var list = [1, 2, 3];

  // Pass printElement as a parameter.
  list.forEach(printElement);
}

void printElement(int element) {
  print(element);
}

void main() {

var list = [1, 2, 3];

// Pass printElement as a parameter.

list.forEach(printElement);

}

void printElement(int element) {

print(element);

}

จะได้

1
2
3

ลองเขียนฟังก์ช้นด้วย shorthand syntax

void main() {
  var list = [1, 2, 3];
  list.forEach(printElement);
}

void printElement(int element) => print(element * 10);

void main() {

var list = [1, 2, 3];

list.forEach(printElement);

}

void printElement(int element) => print(element * 10);

ฟังก์ชันซ้อนอยู่ใน ฟังก์ชันได้

void main() {
  void printElement(int element) => print(element * 20);

  var list = [1, 2, 3];
  list.forEach(printElement);
}

void main() {

void printElement(int element) => print(element * 20);

var list = [1, 2, 3];

list.forEach(printElement);

}

Assign a function to a variable

void main() {
  var loudify = (msg) => '!!! ${msg.toUpperCase()} !!!';
  assert(loudify('hello') == '!!! HELLO !!!');
}

void main() {

var loudify = (msg) => '!!! ${msg.toUpperCase()} !!!';

assert(loudify('hello') == '!!! HELLO !!!');

}

Anonymous functions

void main() {
  var list = ['apples', 'bananas', 'oranges'];
  list.forEach((item) {
    print('${list.indexOf(item)}: $item');
  });
}

void main() {

var list = ['apples', 'bananas', 'oranges'];

list.forEach((item) {

print('${list.indexOf(item)}: $item');

});

}

หรือ

void main() {
  var list = ['apples', 'bananas', 'oranges'];
  list.forEach((item) => print('${list.indexOf(item)}: $item'));
}

void main() {

var list = ['apples', 'bananas', 'oranges'];

list.forEach((item) => print('${list.indexOf(item)}: $item'));

}

จะได้

0: apples
1: bananas
2: oranges

0: apples

1: bananas

2: oranges

ขอบเขตของตัวแปร (Lexical scope)

bool topLevel = true;

void main() {
  var insideMain = true;

  void myFunction() {
    var insideFunction = true;

    void nestedFunction() {
      var insideNestedFunction = true;

      assert(topLevel);
      assert(insideMain);
      assert(insideFunction);
      assert(insideNestedFunction);
    }
  }
}

bool topLevel = true;

void main() {

var insideMain = true;

void myFunction() {

var insideFunction = true;

void nestedFunction() {

var insideNestedFunction = true;

assert(topLevel);

assert(insideMain);

assert(insideFunction);

assert(insideNestedFunction);

}

Lexical closures

/// Returns a function that adds [addBy] to the
/// function's argument.
Function makeAdder(num addBy) {
  return (num i) => addBy + i;
}

void main() {
  // Create a function that adds 2.
  var add2 = makeAdder(2);

  // Create a function that adds 4.
  var add4 = makeAdder(4);

  assert(add2(3) == 5);
  assert(add4(3) == 7);
}

/// Returns a function that adds [addBy] to the

/// function's argument.

Function makeAdder(num addBy) {

return (num i) => addBy + i;

}

void main() {

// Create a function that adds 2.

var add2 = makeAdder(2);

// Create a function that adds 4.

var add4 = makeAdder(4);

assert(add2(3) == 5);

assert(add4(3) == 7);

}

Testing functions for equality

void foo() {} // A top-level function

class A {
  static void bar() {} // A static method
  void baz() {} // An instance method
}

void main() {
  var x;

  // Comparing top-level functions.
  x = foo;
  assert(foo == x);

  // Comparing static methods.
  x = A.bar;
  assert(A.bar == x);

  // Comparing instance methods.
  var v = A(); // Instance #1 of A
  var w = A(); // Instance #2 of A
  var y = w;
  x = w.baz;

  // These closures refer to the same instance (#2),
  // so they're equal.
  assert(y.baz == x);

  // These closures refer to different instances,
  // so they're unequal.
  assert(v.baz != w.baz);
}

void foo() {} // A top-level function

class A {

static void bar() {} // A static method

void baz() {} // An instance method

}

void main() {

var x;

// Comparing top-level functions.

x = foo;

assert(foo == x);

// Comparing static methods.

x = A.bar;

assert(A.bar == x);

// Comparing instance methods.

var v = A(); // Instance #1 of A

var w = A(); // Instance #2 of A

var y = w;

x = w.baz;

// These closures refer to the same instance (#2),

// so they're equal.

assert(y.baz == x);

// These closures refer to different instances,

// so they're unequal.

assert(v.baz != w.baz);

}

Return values
ปกติฟังก์ชันจะคืนค่า ถ้าไม่กำหนด return ก็จะได้คืนค่าเป็น null
ยกเว้นเรากำหนด void ไว้หน้าฟังก์ชัน ฟังก์ชันก็จะไม่คืนค่า

main() {
  foo() {}
  assert(foo() == null);

  void bar() {}
  //assert(bar() == null); // Uncommenting this causes an error.
}

main() {

foo() {}

assert(foo() == null);

void bar() {}

//assert(bar() == null); // Uncommenting this causes an error.

}

Link

A Tour of the Dart Language – Functions

Dart: Built-in types

Posted on 30 October, 2018 by jack

numbers
strings
booleans
lists (also known as arrays)
maps
runes (for expressing Unicode characters in a string)
symbols

Continue reading →

Dart: HelloWorld

Posted on 30 October, 2018 by jack

HelloWorld
การเรียกใช้ฟังก์ชัน
การ print ตัวแปร และ expression
การประกาศตัวแปร
Default value และการใช้ assert()
Final และ const

Continue reading →

Beauty

Posted on 26 October, 2018 by jack

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="splashScreenBg">#FCE4EC</color>
    <color name="beautyTitleBar">#D81B60</color>
    <color name="beautyAppBar">#E91E63</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

</resources>

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/beautyAppBar</item>
        <item name="colorPrimaryDark">@color/beautyTitleBar</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
...

<item name="colorPrimary">@color/beautyAppBar</item>

<item name="colorPrimaryDark">@color/beautyTitleBar</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

...

สร้างโปรเจ็กส์ใหม่แบบ Tabbed Activity (Action Bar with View Pager)

Posted on 25 October, 2018 by jack

สร้างโปรเจ็กส์ใหม่แบบ Tabbed Activity

แล้วเลือก (Action Bar with View Pager)

Continue reading →

Phaisarn Sutheebanjard

blog.phaisarn.com

Ionic: การทำ Icons และ Splash Screens

Ionic: Icons

Ionic: Checkbox

Ionic: Cards

Ionic: Badges

Functions

Dart: Built-in types

Dart: HelloWorld

Beauty

สร้างโปรเจ็กส์ใหม่แบบ Tabbed Activity (Action Bar with View Pager)