2

Twitter独自のボタングループに非常によく似た垂直ボタングループを作成しようとしています（例http://mobile-patterns.com/#/i/10） 。

Touchのコードをに変更してみましたlayout: 'vbox'が、各ボタンの丸みを完全に微調整し、水平形式でのように角の丸みを残しています。

以下のコード：

var segmentedButton = new Ext.SegmentedButton({
    allowMultiple: true,
    layout: 'vbox',
    items: [
        {
            text: 'Option 1'
        },
        {
            text   : 'Option 2',
            pressed: true
        },
        {
            text: 'Option 3'
        }
    ]
});
Ext.Viewport.add({ xtype: 'container', padding: 10, items: [segmentedButton] });

それを機能させるために、独自のCSSスタイルを追加する必要がありますか？または、組み込みの構成はありますか？

Listまた、...の代わりに使用するのが最善かどうか疑問に思っていSegmentedButtonます...

ありがとう！

4

2 に答える 2

3

ティエムは正しかった、私containerはボタンのグループを保持するために使用することになった。

私は次のことを行うことで同じ効果を達成することができました：

Javascript

{
    xtype: 'container',
    cls: 'btn-grouped ui-shadow ui-rd-soft ui-margin',
    items: [
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'Active relays'
        },
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'Relay history'
        },
        {
            xtype: 'button',
            docked: 'top',
            cls: 'btn btn-seg',
            text: 'About'
        }
    ]
}

CSS

/**
 *  Buttons
 */
.btn-grouped {}
.btn-grouped .btn {background:#FFFFFF;color:#303030; border-color:#DEDEDE; border-bottom-width: 1px;border-top-width: 0px; text-shadow:none;}
.btn-grouped .btn .x-button-label {background:url(../img/btn-arrow-right.png) 97% 15% no-repeat;}
.btn-grouped .btn-seg {-webkit-border-radius:0px;border-radius:0px;}
.btn-grouped .btn-seg:first-child {-webkit-border-radius: 7px 7px 0px 0px;border-radius: 7px 7px 0px 0px;}
.btn-grouped .btn-seg:last-child {-webkit-border-radius: 0px 0px 7px 7px;border-radius: 0px 0px 7px 7px;}

.btn {
padding: .6em 0;
font-size:110%;
display:block;
font-weight:bold;
}
.btn .x-button-label {text-align:left; padding-left:1em;}

/**
 *  Utilities
 */
.ui-shadow {
-webkit-box-shadow: 0px 0px 3px 1px #858585;
box-shadow: 0px 0px 3px 1px #858585;
}
.ui-rd-soft {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.ui-margin {
    margin:17px 0;
}

結果

これが最終結果の画像です！

垂直ボタングループ

于 2012-07-06T17:51:26.480 に答える
1

他のコンポーネントとの競合を簡単に作成、カスタマイズ、および最小化するには、次のようなボタンコンテナとして何かを定義する必要があります。

{
  xtype: 'container',
  items: [
    {xtype: 'button', text: '1', docked: 'top'},
    {xtype: 'button', text: '2', docked: 'top'},
    {xtype: 'button', text: '3', docked: 'top'},
  ]
}

構成により、ボタンがコンテナのdocked最大の高さと重ならないようにします。

最後に、CSSプロパティをコンテナと内部ボタンに追加して、ボタンのあるリストのように「偽造」します。私の知る限り、最も簡単な方法です。

注：構成を削除docked: 'top'しても問題なく機能します。それらはすべてCSSによって異なります。

于 2012-07-06T17:38:44.547 に答える