Question

我在NativeScript中制作了一个简单的表单，但是我不能使用核心样式！

我想使用“带有简单边框且没有标签的输入”-TextField的选项4，如https://docs.nativescript.org/ui/theme上的官方文档中所述。

我将所有代码复制粘贴到我的项目中，但是看起来根本没有使用CSS。

因此，我刚刚启动NativeScript Playground并将代码从文档复制粘贴到操场上以进行检查，但这是行不通的。操场上的代码是。而且该表单看起来并不需要文档。看起来好像没有使用CSS主题。我做错了什么？如何使用核心主题？

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">

    <ActionBar title="Home">
    </ActionBar>
    <ScrollView>
        <StackLayout class="home-panel">
            <!--Add your page content here-->
            <StackLayout class="form">
                <!-- Option 1: An input with no label, and a bottom border -->
                <StackLayout class="input-field">
                    <TextField hint="Option 1" class="input" />
                    <StackLayout class="hr-light"></StackLayout>
                </StackLayout>

                <!-- Option 2: An input with a label on top, and a bottom border -->
                <StackLayout class="input-field">
                    <Label text="Option 2"
                        class="label font-weight-bold m-b-5" />
                    <TextField class="input" />
                    <StackLayout class="hr-light"></StackLayout>
                </StackLayout>

                <!-- Option 3: An label and input—positioned side by side -->
                <GridLayout class="input-field input-sides" rows="auto, auto"
                    columns="*,*">
                    <Label text="Option 3" class="label font-weight-bold"
                        row="0" col="0" />
                    <TextField class="input right" row="0" col="1" />
                    <StackLayout class="hr-light" row="1" colSpan="2">
                    </StackLayout>
                </GridLayout>

                <!-- Option 4: An input with a simple border and no label -->
                <TextField hint="Option 4" class="input input-border" />

                <!-- Option 5: An input with a rounded border and no label -->
                <TextField hint="Input rounded"
                    class="input input-rounded m-t-10" />

            </StackLayout>
        </StackLayout>
    </ScrollView>
</Page>

Answer 1

问题是由于从NativeScript Theme 1.0到2.0的迁移。

当前版本的NativeScript使用主题2，但是文档描述了版本1。

位于GitHub的NativeScript Theme 1.0到2.0迁移指南： https://github.com/NativeScript/theme

如何在NativeScript中使用核心主题？

1 个答案: