Bài 31: Menu Tìm hiểu Ion-menu/button/toggle, ion-split-pane

Bài 31: Menu Tìm hiểu Ion-menu/button/toggle, ion-split-pane

codersulution Thứ Tư, tháng 8 24, 2022

  

ion-menu

Thành phần Menu là một ngăn điều hướng trượt vào từ một bên của dạng xem hiện tại. Theo mặc định, nó trượt vào từ bên trái, nhưng bên có thể bị ghi đè. Menu sẽ được hiển thị khác nhau tùy theo chế độ, tuy nhiên kiểu hiển thị có thể được thay đổi thành bất kỳ loại menu nào có sẵn. Phần tử menu phải là anh em ruột với phần tử nội dung gốc. Có thể có bất kỳ số lượng menu nào được đính kèm với nội dung. Chúng có thể được kiểm soát từ các mẫu hoặc lập trình bằng MenuController.




 Usage

<ion-menu side="start" menuId="first" contentId="main">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
  <ion-header>
    <ion-toolbar color="tertiary">
      <ion-title>Custom Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu side="end" type="push" contentId="main">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>End Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
      <ion-item>Menu Item</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet id="main"></ion-router-outlet>
CopyCopied
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['./menu-example.css'],
})
export class MenuExample {

constructor(private menu: MenuController) { }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end');
  }

  openCustom() {
    this.menu.enable(true, 'custom');
    this.menu.open('custom');
  }
}
CopyCopied
.my-custom-menu {
  --width: 500px;
}
<ion-app>
  <ion-menu side="start" menu-id="first" content-id="main">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="start" menu-id="custom" class="my-custom-menu" content-id="main">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Custom Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="end" type="push" content-id="main">
    <ion-header>
      <ion-toolbar color="danger">
        <ion-title>End Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <div class="ion-page" id="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu - Basic</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
      <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
      <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
    </ion-content>
  </div>

</ion-app>
CopyCopied
<script type="module">
    import { menuController } from '@ionic/core';
    window.menuController = menuController;
</script>

<script>
  function openFirst() {
    menuController.enable(true, 'first');
    menuController.open('first');
  }

  function openEnd() {
    menuController.open('end');
  }

  function openCustom() {
    menuController.enable(true, 'custom');
    menuController.open('custom');
  }
</script>
CopyCopied
.my-custom-menu {
  --width: 500px;
}
import React from 'react';
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';

export const MenuExample: React.FC = () => (
  <>
    <IonMenu side="start" menuId="first">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

    <IonMenu side="start" menuId="custom" className="my-custom-menu">
      <IonHeader>
        <IonToolbar color="tertiary">
          <IonTitle>Custom Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

    <IonMenu side="end" type="push">
      <IonHeader>
        <IonToolbar color="danger">
          <IonTitle>End Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>
    <IonRouterOutlet></IonRouterOutlet>
  </>
);
import { Component, h } from '@stencil/core';

import { menuController } from '@ionic/core';

@Component({
  tag: 'menu-example',
  styleUrl: 'menu-example.css'
})
export class MenuExample {
  openFirst() {
    menuController.enable(true, 'first');
    menuController.open('first');
  }

  openEnd() {
    menuController.open('end');
  }

  openCustom() {
    menuController.enable(true, 'custom');
    menuController.open('custom');
  }

  render() {
    return [
      <ion-menu side="start" menuId="first" contentId="main">
        <ion-header>
          <ion-toolbar color="primary">
            <ion-title>Start Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>,

      <ion-menu side="start" menuId="custom" contentId="main" class="my-custom-menu">
        <ion-header>
          <ion-toolbar color="tertiary">
            <ion-title>Custom Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>,

      <ion-menu side="end" type="push" contentId="main">
        <ion-header>
          <ion-toolbar color="danger">
            <ion-title>End Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
            <ion-item>Menu Item</ion-item>
          </ion-list>
        </ion-content>
      </ion-menu>,

      // A router outlet can be placed here instead
      <ion-content id="main">
        <ion-button expand="block" onClick={() => this.openFirst()}>Open Start Menu</ion-button>
        <ion-button expand="block" onClick={() => this.openEnd()}>Open End Menu</ion-button>
        <ion-button expand="block" onClick={() => this.openCustom()}>Open Custom Menu</ion-button>
      </ion-content>
    ];
  }
}
CopyCopied
.my-custom-menu {
  --width: 500px;
}
<template>
  <ion-menu side="start" menu-id="first" content-id="main">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="start" menu-id="custom" class="my-custom-menu" content-id="main">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Custom Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="end" type="push" content-id="main">
    <ion-header>
      <ion-toolbar color="danger">
        <ion-title>End Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="main"></ion-router-outlet>
</template>
<style>
.my-custom-menu {
  --width: 500px;
}
</style>

<script>
import { 
  IonContent, 
  IonHeader, 
  IonItem, 
  IonList, 
  IonMenu, 
  IonRouterOutlet,
  IonTitle, 
  IonToolbar,
  menuController
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonContent, 
    IonHeader, 
    IonItem, 
    IonList, 
    IonMenu, 
    IonRouterOutlet,
    IonTitle, 
    IonToolbar
  },
  methods: {
    openFirst() {
      menuController.enable(true, 'first');
      menuController.open('first');
    },
    openEnd() {
      menuController.open('end');
    },
    openCustom() {
      menuController.enable(true, 'custom');
      menuController.open('custom');
    }
  }
});
</script>

Properties

contentId

Description

Các idnội dung chính. Khi sử dụng bộ định tuyến, điều này thường xảy ra ion-router-outlet. Khi không sử dụng bộ định tuyến, đây thường là chế độ xem chính của bạn ion-content. Đây không phải là id của ion-contentbên trong của bạn ion-menu.

Attributecontent-id
Typestring | undefined

disabled

Description

If true, the menu is disabled.

Attributedisabled
Typeboolean
Defaultfalse

maxEdgeStart

Description

Ngưỡng cạnh để kéo menu đang mở. Nếu kéo / vuốt xảy ra trên giá trị này, menu sẽ không được kích hoạt.

Attributemax-edge-start
Typenumber
Default50

menuId

Description

Một id cho menu.

Attributemenu-id
Typestring | undefined

side

Description

Menu nên được đặt ở phía nào của chế độ xem.

Attributeside
Type"end" | "start"
Default'start'

swipeGesture

Description

Nếu true, thao tác vuốt menu được bật.

Attributeswipe-gesture
Typeboolean
Defaulttrue

type

Description

Kiểu hiển thị của menu. Tùy chọn có sẵn: "overlay", "reveal", "push".

Attributetype
Typestring | undefined

Events

NameDescription
ionDidClosePhát ra khi đóng menu.
ionDidOpenPhát ra khi menu đang mở.
ionWillClosePhát ra khi sắp đóng menu.
ionWillOpenPhát ra khi menu sắp được mở.

Methods

close

Description

Đóng menu. Nếu menu đã được đóng hoặc không thể đóng được, menu sẽ quay trở lại false.

Signatureclose(animated?: boolean) => Promise<boolean>

isActive

Description

Trả lại truelà menu đang hoạt động.

Một menu hoạt động khi nó có thể được mở hoặc đóng, có nghĩa là nó được bật và nó không phải là một phần của a ion-split-pane.

SignatureisActive() => Promise<boolean>

isOpen

Description

Trả lại truelà menu được mở.

SignatureisOpen() => Promise<boolean>

open

Description

Mở menu. Nếu menu đã mở hoặc không thể mở được, menu sẽ quay trở lại false.

Signatureopen(animated?: boolean) => Promise<boolean>

setOpen

Description

Mở hoặc đóng nút. Nếu thao tác không thể hoàn tất thành công, nó sẽ trả về false.

SignaturesetOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>

toggle

Description

Chuyển đổi menu. Nếu menu đã được mở, nó sẽ cố gắng đóng lại, nếu không nó sẽ cố gắng mở nó. Nếu thao tác không thể hoàn tất thành công, nó sẽ trả về false.

Signaturetoggle(animated?: boolean) => Promise<boolean>

CSS Shadow Parts

NameDescription
backdropThe backdrop that appears over the main content when the menu is open.
containerThe container for the menu content.

CSS Custom Properties

NameDescription
--backgroundBackground of the menu
--heightHeight of the menu
--max-heightMaximum height of the menu
--max-widthMaximum width of the menu
--min-heightMinimum height of the menu
--min-widthMinimum width of the menu
--widthWidth of the menu

Ion-menu-button

Nút Menu là thành phần tự động tạo biểu tượng và chức năng để mở menu trên một trang.

 Properties


autoHide

Description

Automatically hides the menu button when the corresponding menu is not active

Attributeauto-hide
Typeboolean
Defaulttrue

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

disabled

Description

If true, the user cannot interact with the menu button.

Attributedisabled
Typeboolean
Defaultfalse

menu

Description

Optional property that maps to a Menu's menuId prop. Can also be start or end for the menu side. This is used to find the correct menu to toggle

Attributemenu
Typestring | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

type

Description

The type of the button.

Attributetype
Type"button" | "reset" | "submit"
Default'button'

CSS Shadow Parts

NameDescription
iconThe menu button icon (uses ion-icon).
nativeThe native HTML button element that wraps all child elements.

CSS Custom Properties

NameDescription
--backgroundBackground of the menu button
--background-focusedBackground of the menu button when focused with the tab key
--background-focused-opacityOpacity of the menu button background when focused with the tab key
--background-hoverBackground of the menu button on hover
--background-hover-opacityOpacity of the background on hover
--border-radiusBorder radius of the menu button
--colorColor of the menu button
--color-focusedColor of the menu button when focused with the tab key
--color-hoverColor of the menu button on hover
--padding-bottomBottom padding of the button
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the button
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the button
--padding-topTop padding of the button

ion-menu-toggle

Thành phần MenuToggle có thể được sử dụng để chuyển đổi mở hoặc đóng menu.

Theo mặc định, nó chỉ hiển thị khi menu đã chọn đang hoạt động. Một menu hoạt động khi nó có thể được mở / đóng. Nếu menu bị vô hiệu hóa hoặc nó được hiển thị dưới dạng ngăn chia nhỏ, menu sẽ được đánh dấu là không hoạt động và menu chuyển đổi ion tự ẩn.

Trong trường hợp muốn ion-menu-toggleluôn hiển thị, bạn autoHidecó thể đặt thuộc tính thành false.

 Properties

autoHide

Description

Tự động ẩn nội dung khi menu tương ứng không hoạt động.

Theo mặc định, nó true. Thay đổi nó thành falseđể ion-menu-toggleluôn hiển thị bất kể trạng thái của menu.

Attributeauto-hide
Typeboolean
Defaulttrue

menu

Description

Thuộc tính tùy chọn ánh xạ tới chỗ dựa của Menu menuId. Cũng có thể là starthoặc endcho phía menu. Điều này được sử dụng để tìm menu chính xác để chuyển đổi.

Nếu thuộc tính này không được sử dụng, ion-menu-togglesẽ chuyển đổi menu đầu tiên đang hoạt động.

Attributemenu
Typestring | undefined

ion-split-pane

A split pane hữu ích khi tạo bố cục nhiều chế độ xem. Nó cho phép các phần tử giao diện người dùng, như menu, được hiển thị khi chiều rộng khung nhìn tăng lên.

Nếu chiều rộng màn hình của thiết bị dưới một kích thước nhất định, ngăn chia sẽ thu gọn và menu sẽ bị ẩn. Điều này lý tưởng để tạo một ứng dụng sẽ được phân phát trong trình duyệt và được triển khai thông qua cửa hàng ứng dụng cho điện thoại và máy tính bảng.

 Setting Breakpoints

Theo mặc định, split pane mở rộng khi màn hình lớn hơn 992px. Để tùy chỉnh điều này, hãy chuyển một điểm ngắt trong thuộc whentính. Các điểm trong khi có thể chấp nhận một giá trị boolean, bất kỳ truy vấn phương tiện truyền thông hợp lệ, hoặc một trong các kích thước được xác định trước Ionic của.

 <!-- can be "xs", "sm", "md", "lg", or "xl" -->

<ion-split-pane when="md"></ion-split-pane>

<!-- can be any valid media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries -->
<ion-split-pane when="(min-width: 40px)"></ion-split-pane>
SizeValueDescription
xs(min-width: 0px)Show the split-pane when the min-width is 0px (meaning, always)
sm(min-width: 576px)Show the split-pane when the min-width is 576px
md(min-width: 768px)Show the split-pane when the min-width is 768px
lg(min-width: 992px)Show the split-pane when the min-width is 992px (default break point)
xl(min-width: 1200px)Show the split-pane when the min-width is 1200px

Usage

<ion-split-pane contentId="main">
  <!--  the side menu  -->
  <ion-menu contentId="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
<ion-split-pane content-id="main">
  <!--  the side menu  -->
  <ion-menu content-id="main">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
  </ion-menu>

  <!-- the main content -->
  <ion-content id="main">
    <h1>Hello</h1>
  </ion-content>
</ion-split-pane>
import React from 'react';
import {
  IonSplitPane,
  IonMenu,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonRouterOutlet,
  IonContent,
  IonPage
} from '@ionic/react';

export const SplitPlaneExample: React.SFC<{}> = () => (
  <IonContent>
    <IonSplitPane contentId="main">
      {/*--  the side menu  --*/}
      <IonMenu contentId="main">
        <IonHeader>
          <IonToolbar>
            <IonTitle>Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
      </IonMenu>

      {/*-- the main content --*/}
      <IonPage id="main"/>
    </IonSplitPane>
  </IonContent>
);
import { Component, h } from '@stencil/core';

@Component({
  tag: 'split-pane-example',
  styleUrl: 'split-pane-example.css'
})
export class SplitPaneExample {
  render() {
    return [
      <ion-split-pane content-id="main">
        {/*  the side menu */}
        <ion-menu content-id="main">
          <ion-header>
            <ion-toolbar>
              <ion-title>Menu</ion-title>
            </ion-toolbar>
          </ion-header>
        </ion-menu>

        {/* the main content */}
        <ion-router-outlet id="main"></ion-router-outlet>
      </ion-split-pane>
    ];
  }
}
<template>
  <ion-split-pane content-id="main">
    <!--  the side menu  -->
    <ion-menu content-id="main">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
    </ion-menu>

    <!-- the main content -->
    <ion-router-outlet id="main"></ion-router-outlet>
  </ion-split-pane>
</template>

<script>
import { 
  IonHeader, 
  IonMenu, 
  IonRouterOutlet, 
  IonSplitPane, 
  IonTitle, 
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonHeader, 
    IonMenu, 
    IonRouterOutlet, 
    IonSplitPane, 
    IonTitle, 
    IonToolbar
  }
});
</script>

Properties


contentId

Description

The id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu.

Attributecontent-id
Typestring | undefined

disabled

Description

If true, the split pane will be hidden.

Attributedisabled
Typeboolean
Defaultfalse

when

Description

Khi  split-pane được hiển thị. Có thể là một biểu thức truy vấn phương tiện CSS hoặc một biểu thức tắt. Cũng có thể là một biểu thức boolean.

Attributewhen
Typeboolean | string
DefaultQUERY['lg']

Events

NameDescription
ionSplitPaneVisible Biểu thức được gọi khi chế độ split-pane đã thay đổi

CSS Custom Properties

NameDescription
--borderBorder between panes(Đường viền giữa các ô)
--side-max-widthMaximum width of the side pane. Does not apply when split pane is collapsed.(Chiều rộng tối đa của ngăn bên. Không áp dụng khi ngăn chia bị thu gọn.)
--side-min-widthMinimum width of the side pane. Does not apply when split pane is collapsed.(Chiều rộng tối thiểu của ngăn bên. Không áp dụng khi ngăn chia bị thu gọn.)
--side-widthWidth of the side pane. Does not apply when split pane is collapsed.(Chiều rộng của ngăn bên. Không áp dụng khi ngăn chia bị thu gọn.)


codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash