2

私がやろうとしているのは、特定のコンポーネント内に表示される場合にのみスクロールバーの外観をカスタマイズすることです。アプリケーションの他のすべてのスクロールバーの外観を変更したくありません。

パネルがあり、そのパネル内に VBox があり、その vbox 内にスクロールバーが表示されます。CSS を使用してそのスクロールバーのみをスタイル設定したいと考えています。

コンポーネントに次のようなものを追加しようとしました(スクローラーの上下矢印を削除するためのテスト):

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    s|Scroller
    {
    up-arrow-skin: ClassReference("undefined");
    down-arrow-skin: ClassReference("undefined");
    }

</fx:Style>

その結果、次のような警告が表示されます。

CSS type selectors are not supported in components: 'spark.components.Scroller'

コンポーネント内でタイプ セレクターの代わりにクラス セレクターを使用する必要があることがわかりましたが、カスタム スクロールバーを作成したくありません (どのように使用すればよいでしょうか?)。

編集:CSSクラスセレクターのテストを使用してコードの例を追加しています:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .noArrowsScroller
    {
    up-arrow-skin: ClassReference("undefined");
    down-arrow-skin: ClassReference("undefined");
    }


</fx:Style>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:VBox width="100%" height="100%" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"
         horizontalAlign="center" verticalAlign="middle">


    <s:BorderContainer borderWeight="1" width="100%" height="100%" borderColor="0x79A8BD">
        <mx:VBox width="100%" height="100%" id="generalVBox" horizontalAlign="center"
                 minHeight="0" horizontalScrollPolicy="off">

        </mx:VBox>
    </s:BorderContainer>
</mx:VBox>

vbox「generalVBox」は、カスタマイズしたスクロールバーを表示したいものです。

その vBox では、実行時にいくつかのコンポーネントが追加され、スクロールバーが表示される可能性があります。

「noArrowsScroller」クラスセレクターをどのように適用すればよいですか?

編集 2: Sunil のコメントの後、VGroup コンテナーをラップする Scroller コンポーネントを配置し、「noArrowsScrollbar」というクラス セレクターを使用しようとしましたが、スクロールバーのスタイルは同じままです。クラスセレクターで色も設定しようとしましたが、そのプロパティが機能するため、間違った CSS プロパティを使用している可能性がありますか?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"     height="100%"
           creationComplete="application1_creationCompleteHandler(event)">

<fx:Script>
    <![CDATA[
        import mx.controls.Label;
        import mx.controls.LinkButton;
        import mx.events.FlexEvent;



        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            if(v != null)
            {
                for(var i:int = 0; i < 100; i++)
                {
                    var lbl:Label = new Label();
                    lbl.text = String(i);

                    v2.addElement(lbl);
                }
            }
        }

    ]]>
</fx:Script>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";

    .noArrowsScroller
    {
        down-arrow-skin: ClassReference("undefined");
        up-arrow-skin: ClassReference("undefined");
        color: red;
    }


</fx:Style>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>



<s:Panel width="50%" height="50%">
    <s:Scroller styleName="noArrowsScroller"
                 focusEnabled="false"
                 hasFocusableChildren="true"

                 height="100%"
                 horizontalCenter="0" verticalCenter="0">
        <s:VGroup width="100%" height="100%" id="v2" minHeight="0">

        </s:VGroup>
    </s:Scroller>
</s:Panel>

ありがとう

4

2 に答える 2

-1

Scrollerandを使用しているVGroupので、要素の設定解除/削除に使用している構文を修正する必要があります。

これを試してください：

.noArrowsScroller
{
        down-arrow-skin: ClassReference(null);
        up-arrow-skin: ClassReference(null);
}
于 2013-08-29T15:54:03.073 に答える