1.Buttonボタンの概要

ボタンは、アプリケーションとのインタラクションとナビゲーションの基本的な方法であり、クリック後にどのような操作が発生するかをユーザーに明確に知らせる必要があります.ボタンは、テキストまたはアイコンから構成されるか、テキストアイコンとともに構成され、さまざまなプロパティで拡張できます.
アクセス性のため、ボタンは標準要素を使用しますが、ion-buttonコマンドで強化されています.

2.使い方

2.1 Default StyleデフォルトスタイルDemoソースコード

button ion-button>Button

このcolorプロパティ設定ボタンの色.ionicには多くのデフォルトの色が含まれており、簡単に上書きできます.

Light
Default
Secondary
Danger
Dark

2.2 Outline StyleプロファイルスタイルDemoソースコード

ボタンのアウトラインスタイルを使用するには、outlineプロパティを追加します.

Light Outline
Primary Outline
Secondary Outline
Danger Outline
Dark Outline

2.3 Clear Style純テキストボタンスタイルDemoソースコード

ボタンのクリーンアップスタイルを使用するには、clearプロパティを追加します.

Light Clear
Primary Clear
Secondary Clear
Danger Clear
Dark Clear

2.4 Round ButtonsフィレットボタンDemoソースコード

フィレットのボタンを作成するには、roundプロパティを追加します.

Light Round
Primary Round
Secondary Round
Danger Round
Dark Round

2.5 Block ButtonsブロックボタンDemoソースコード

ボタンにblockを追加すると、ボタンが親の幅の100%を占めます.display:blockをボタンに追加します.

Block Button

2.6フルボタンDemoソースコード

ボタンにfullを追加すると、親の幅の100%を占めることになります.ただし、ボタンの左右の枠線も削除されます.このスタイルは、ボタンが表示幅全体にわたって延びる必要がある場合に便利です.

Full Button

2.7 Button SizesボタンサイズDemoソースコード

Largeプロパティを追加して、ボタンまたはsmallを小さくします.

Small
Default
Large

2.8 Icon ButtonsアイコンボタンDemoソースコード

ボタンにアイコンを追加するには、アイコンコンポーネントと位置プロパティを追加します.

  
  Left Icon




  Right Icon
  




  

2.9 Buttons In ComponentsコンポーネントのボタンDemoソースコード
ボタンは単独で使用できますが、他のコンポーネントで簡単に使用できます.たとえば、リストアイテムやナビゲーションバーにボタンを追加できます.

  
    
      
        
      
    

    
      
        
      
    
  



  
    Left Icon Button
    
      
      Left Icon
    
  

3.Button APIドキュメント

[ion-button]ボタンは、Ionicの簡単なコンポーネントです.テキストとアイコンで構成され、さまざまなプロパティで拡張できます.

3.1使用法

Default

Secondary

Danger

Light

Dark


Full Button

Block Button

Round Button


Outline + Full

Outline + Block

Outline + Round



  
  Left Icon



  Right Icon
  



  



Large

Default

Small

3.2 Input Properties入力属性

Attr
Type
Details
block
boolean
trueの場合は、使用可能な幅を塗りつぶすボタンスタイルをアクティブにします.
clear
boolean
trueの場合は、枠線なしの透明なボタンスタイルをアクティブにします.
color
string
Sass$colorsマップから使用する色.デフォルトのオプションは、primary、secondary、danger、light、darkです.詳細については、Theming Your Appを参照してください.
default
boolean
trueの場合、デフォルトのボタンサイズがアクティブになります.通常はデフォルトで、プロジェクトのボタンに役立ちます.
full
boolean
trueの場合、左右の枠線を必要とせずに使用可能な幅を埋めるボタンスタイルがアクティブになります.
large
boolean
trueの場合、大きなボタンがアクティブになります.
mode
string
このモードでは、どのプラットフォームスタイルを使用するかを決定します.可能な値は、「ios」、「md」、または「wp」です.詳細については、プラットフォームスタイルを参照してください.
outline
boolean
trueの場合、枠線付きの透明なボタンスタイルがアクティブになります.
round
boolean
trueの場合、フィレット付きボタンがアクティブになります.
small
boolean
trueの場合、小さなボタンがアクティブになります.
solid
boolean
trueの場合、堅牢なボタンスタイルがアクティブになります.通常はデフォルトで、ツールバーのボタンに役立ちます.
strong
boolean
trueの場合、フォントの重量が大きいボタンがアクティブになります.

3.2 IAdvanced高級用法

  Danger (Solid)




  Secondary (Round)




  Primary (Clear)




  Dark (Solid + Round)




  Click me!

@Component({
  templateUrl: 'main.html'
})
class E2EPage {
  isDanger: boolean = true;
  isSecondary: boolean = false;
  isRound: boolean = true;
  isOutline: boolean = false;
  isClear: boolean = true;
  myColor: string = 'secondary';
  myColor2: string = 'dark';

  logEvent(event) {
    console.log(event)
  }
}

3.3 Sass Variables変数

All
Property
Default
Description
$button-round-padding-top
0
円形ボタンの上部の内側の余白
$button-round-padding-end
2.6rem
丸ボタンの終点の内側余白
$button-round-padding-bottom
$button-round-padding-top
円ボタンの下の内側の余白
$button-round-padding-start
$button-round-padding-end
円ボタン開始内側余白
$button-round-border-radius
64px
丸ボタンの枠線半径