web-dev-qa-db-ja.com

IONICフレームワークを使用して中央または右にボタンを配置するにはどうすればよいですか？

enter image description here

右のログインおよび登録ボタン、および中央の検索ボタンが必要です。多くを検索しましたが、解決策はありませんでした。

また、テキスト領域を適切な位置に配置する方法もあります。

これが私のhtmlコードです。

<body ng-app="starter">

    <ion-pane  style = "background-color:#4992E2;">
      <ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
        <h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
      </ion-header-bar>
      <ion-content >
          <div class = "row center">
               <div class="col">
                    <button class="button button-small  button-light" >
                      Login!
                    </button>
                     <button class="button button-small  button-light">
                      Register Here!
                    </button>
                </div>
          </div>
          <div class="item-input-inset">
            <h4>Date</h4> 

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Suburb</h4>

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Clinic</h4>
          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <button class=" center button button-small  button-light">
          Search
        </button>

        </ion-content>
    </ion-pane>
  </body>

私はbootstrapで知っていますが、私はionicが初めてなので、これを行う方法を教えてください。

cssionic-framework
38
Preety Sapra

Cssは、私が想定しているのと同じ方法で動作します。

次のようなコンテンツをコンテンツの中央に配置できます。

.center{
     text-align:center;
}

更新

適切な方法で幅を調整するには、次のようにDOMを変更します。

<div class="item-input-inset">
    <label class="item-input-wrapper"> Date
        <input type="text" placeholder="Text Area" />
    </label>
</div>
<div class="item-input-inset">
    <label class="item-input-wrapper"> Suburb
        <input type="text" placeholder="Text Area" />
    </label>
</div>

CSS

label {
    display:inline-block;
    border:1px solid red;
    width:100%;
    font-weight:bold;
}

input{
    float:right; /* shift to right for alignment*/
    width:80% /* set a width, you can use max-width to limit this as well*/
}

デモ

最終更新

既存のHTMLを変更する予定がない場合（元の質問の1つ）、以下のcssが私を親友にします!! :)

html, body, .con {
    height:100%;
    margin:0;
    padding:0;
}
.item-input-inset {
    display:inline-block;
    width:100%;
    font-weight:bold;
}
.item-input-inset > h4 {
    float:left;
    margin-top:0;/* important alignment */
    width:15%;
}
.item-input-wrapper {
    display:block;
    float:right;
    width:85%;
}
input {
    width:100%;
}

デモ

31
NoobEditor

Div内にボタンを配置する必要があり、divでクラスを使用できるはずです。
text-left、text-centerおよびtext-right。

例えば：

<div class="row">
   <div class="col text-center">
      <button class="button button-small button-light">Search</button>
   </div>
</div>

「textarea」の位置について：

<div class="list">
<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" placeholder="Text Area">
</label>

コードを使用したデモ：
http://codepen.io/douglask/pen/zxXvYY

90
Douglas K.

ionicアプリコード自体で中央揃えを使用するには、次のコードを使用できます。

<ion-row center>  
 <ion-col text-center>   
  <button ion-button>Search</button>  
 </ion-col> 
</ion-row>

ionicアプリコード自体で右揃えを使用するには、次のコードを使用できます。

<ion-row right>  
 <ion-col text-right>   
  <button ion-button>Search</button>  
 </ion-col> 
</ion-row>
19
Alvin Chettiar

最終的に、私たちはこれに到達しようとしています。

<div style="display: flex; justify-content: center;">
    <button ion-button>Login</button>
</div>
1
Otpidus

別のIonic方法。このion-buttonsタグを使用し、正しいキーワードを使用すると、このグループのすべてのボタンが右側に配置されます。私は1行で必要なカスタムトグルボタンをいくつか作成しましたが、グループを右揃えにします。

<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>
0
Mark

最も簡単な解決策は、ボタンをdivでラップし、text-center align-items-centerを次のように配置するだけです：

<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
0
Khaled Alhindi

そして、チェックボックスを右に揃えたい場合、item-endを使用できます。

<ion-checkbox checked="true" item-end></ion-checkbox>
0
alchi baucha