Как сосредоточить детей в макете на Apache Royale? - PullRequest
Новая
       28

Как сосредоточить детей в макете на Apache Royale?

1 голос
/ 01 октября 2019

Я ищу простой и эффективный способ центрировать всех детей в контейнере, используя базовый пакет. (Поскольку смешивание базовых и жемчужных макетов приводит к нежелательным побочным эффектам)

Должен ли я использовать CSS, четки? Если оба пригодны для использования, в чем разница, и могу ли я иметь пример кода каждого?

Например, не могли бы вы рассказать, как изменить этот код на центр текстовую метку : 

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">


    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

Благодаря yishayw, так как я не знаком с тем, как добавить css, я нашел, как это сделать, и поместил полный рабочий код здесь. Я ожидал бы, что js | View вызовет стиль, но, глядя на css в браузере, я увидел, что имя стиля для первого "view" - это " royale " 

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">

<fx:Style>
        @namespace j "library://ns.apache.org/royale/jewel";
        @namespace js "library://ns.apache.org/royale/basic";

    .royale {
        align-items :center;
    }

    js|Label {
        color: #ff0000;
    }
 </fx:Style>   

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View >
            <js:beads>
                <js:VerticalFlexLayout />
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

Regards

1 Ответ

2 голосов
/ 02 октября 2019

Попробуйте использовать VerticalFlexLayout и добавить align-items: center к стилю контейнера.

...