@nstudio/nativescript-fluid-segmented-bar

使用流体分段栏来使任何标准的 SegmentedBar 控件更生动。

• iOS：使用 SJFluidSegmentedControl
• Android：使用标准分段栏 - 未来将添加 Jetpack Compose 以复制

使用方法

npm install @nstudio/nativescript-fluid-segmented-bar

在任何视图布局中使用

<FluidSegmentedBar items="{{items}}" gradientColorSides="{{gradientColorSides}}" selectedIndexChanged="{{selectedIndexChanged}}" didScrollOffset="{{didScrollOffset}}"/>

为属性和事件提供绑定

const items: Array<FluidSegmentedBarItem> = [
    {
        title: 'Enjoy',
        colors: [new Color('#485ae6'), new Color('#87aeed')],
    },
    {
        title: 'Your',
        colors: [new Color('#87aeed'), new Color('#e53ca9')],
    },
    {
        title: 'Life',
        colors: [new Color('#c2c96a'), new Color('#678d50')],
    },
];
const gradientColorSides: FluidSegmentedBarGradientColorSides = {
    left: [new Color('#87aeed')],
    right: [new Color('#c2c96a')],
};

function selectedIndexChanged(args: FluidSegmentedBarIndexChangedEvent) {
    console.log('selectedIndexChanged:', args.newIndex);
}
function didScrollOffset(args: FluidSegmentedBarDidScrollEvent) {
    console.log('didScrollOffset:', args.offset);
}

当使用风味时，您只需在标记中注册元素以供使用

import { FluidSegmentedBar } from '@nstudio/nativescript-fluid-segmented-bar'

// Angular
import { registerElement } from '@nativescript/angular'
registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

// Solid
import { registerElement } from 'dominative';
registerElement('fluidSegmentedBar', FluidSegmentedBar);

// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('fluidSegmentedBar', () => FluidSegmentedBar);

// React
import { registerElement } from 'react-nativescript';
registerElement('fluidSegmentedBar', () => FluidSegmentedBar);

// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('FluidSegmentedBar', () => FluidSegmentedBar)

API

属性

• items: Array：包含具有 title 和 colors 的条目集合。
• gradientColorSides: FluidSegmentedBarGradientColorSides：渐变侧边颜色。

事件

• selectedIndexChanged：当 selectedIndex 发生变化时。
• didScrollOffset：每当控制动画其选定位置时，将发出 offset 和 maxOffset，以提供根据其移动动画其他视觉元素的能力。

许可证

• 归功于 @sasojadrovski 的 iOS

Apache 许可证版本 2.0