Svelte Native - NativeScript UI

为 Svelte Native 应用程序提供使用 NativeScript UI 的支持

example-app

使用方法

使用 npm 安装您希望使用的以下任一 Nativescript UI 包。

支持

在您的项目中的 app.ts 文件中添加

//import the components you are using
import RadListViewElement from "svelte-native-nativescript-ui/listview"
import RadSideDrawerElement from "svelte-native-nativescript-ui/sidedrawer"
import RadCalendarElement from "svelte-native-nativescript-ui/calendar"
import Charts from "svelte-native-nativescript-ui/chart"
import RadDataFrom from "svelte-native-nativescript-ui/dataform"
import Gauges from "svelte-native-nativescript-ui/gauge"
import AutoCompleteElement from "svelte-native-nativescript-ui/autocomplete"

//register them with svelte-native so they can be used in svelte components
RadListViewElement.register();
RadSideDrawerElement.register();
RadCalendarElement.register();
Charts.register();
RadDataFrom.register();
Gauges.register();
AutoCompleteElement.register();

然后在您的 .svelte 组件中使用它们

  <radSideDrawer>
    ...
    <radSideDrawer.mainContent>
       <radListView>
        ...
       </radListView>
    </radSideDrawer.mainContent>  
  </radSideDrawer>

演示项目

可以使用以下命令启动包含的演示项目

$ cd demo
$ npm install
$ tns run android

演示包含了每个受支持元素的示例，您可以将其作为起点使用。

使用方法

受支持控件文档可以从 NativeScript 网站获取

侧边栏 (docs)
列表视图 (docs)
图表 (docs)
日历 (docs)
数据表单 (docs)
仪表 (docs)
自动完成 (docs)

通过查看演示项目中的示例，可以观察到 NativeScript 网站上的文档和使用 Svelte Native 的区别。

主要区别是将配置元素分配给父元素的属性，以及模板的处理。

自动父属性

在 Nativescript-ui 组件中，大多数配置元素只有一个有效的父组件和属性可以分配。Svelte Native 尽可能地为这些配置元素设置默认父属性。

例如

  <chart:RadCartesianChart id="cartesianChart">
    <chart:RadCartesianChart.horizontalAxis>
        <chart:CategoricalAxis/>
    </chart:RadCartesianChart.horizontalAxis>
    <chart:RadCartesianChart.verticalAxis>
        <chart:LinearAxis/>
    </chart:RadCartesianChart.verticalAxis>
    <chart:RadCartesianChart.series>
        <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
        </chart:LineSeries>
    </chart:RadCartesianChart.series>
  </chart:RadCartesianChart>

变为

  <radCartesianChart id="cartesianChart">
    <categoricalAxis prop:horizontalAxis />
    <linearAxis prop:verticalAxis/>
    <lineSeries items="{ categoricalSource }" categoryProperty="Country" valueProperty="Amount" />
  </radCartesianChart>

注意，由于 axis 元素可以在 horizontalAxis 或 verticalAxis 属性上有效，因此它们仍然需要使用 svelte-native 的 prop: 指令来指定。

模板元素

当控件需要渲染子视图多次（RadAutoCompleteTextView，RadListView）时，Svelte Native 会配置控件使用模板元素。

对于 RadListView，模板表示的项由类型给出，例如

  <Template type="{ListViewViewType.HeaderView}" > 
    <label class="header">This is a Header</label>
  </Template>

  <Template type="{ListViewViewType.FooterView}" > 
    <label class="footer">This is a Footer</label>
  </Template>

对于自动完成，它是 suggestionView 元素的子代

  <suggestionView suggestionViewHeight="300">
    <Template let:item>
        <stackLayout orientation="horizontal" height="40">
            <label text="{ item.text }" marginLeft="10" verticalAlignment="center"/>
        </stackLayout>
    </Template>
  </suggestionView>