插件
自动调整文本
@nativescript/auto-fit-text
一个扩展 Nativescript Label 功能的插件，可以根据标签的宽度调整字体大小。
内容
安装
cli
npm install @nativescript/auto-fit-text使用 @nativescript/auto-fit-text
以下是如何在不同 JS 风格中使用 @nativescript/auto-fit-text 插件的示例。
核心
- 使用 Page 的
xmlns属性注册插件命名空间，提供您的前缀（例如AFT）。
xml
<Page xmlns:AFT="@nativescript/auto-fit-text">
...- 使用前缀访问
AutoFitText视图。
xml
<StackLayout class="p-20">
<AFT:AutoFitText
text="Testinggggggggggggggggg"
textWrap="false"
></AFT:AutoFitText>
</StackLayout>以下是上述步骤生成的完整代码。
xml
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="pageLoaded"
class="page"
xmlns:AFT="@nativescript/auto-fit-text"
>
<StackLayout class="p-20">
<AFT:AutoFitText
text="Testinggggggggggggggggg"
textWrap="false"
></AFT:AutoFitText>
</StackLayout>
</Page>Angular
- 通过将插件的模块添加到您要使用该视图的 NgModule 来注册该视图。
typescript
import { NativeScriptAutoFitTextModule } from '@nativescript/auto-fit-text/angular';
@NgModule({
imports: [NativeScriptAutoFitTextModule],
})- 在 HTML 中使用该视图。
xml
<AutoFitText row="2" fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." textWrap="false"></AutoFitText>Vue
- 使用
registerElement()函数在app.ts文件中注册AutoFitText视图。
ts
import { registerElement } from 'nativescript-vue'
registerElement(
'AutoFitText',
() => require('@nativescript/auto-fit-text').AutoFitText
)- 在标记中使用该视图。
vue
<AutoFitText
fontSize="48"
text="Lorem Ipsum this line of text with fontSize ignored because the text is so long."
/>Svelte
- 使用
registerNativeViewElement()函数在app.ts文件中注册AutoFitText视图。
ts
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement(
'autoFitText',
() => require('@nativescript/auto-fit-text').AutoFitText
)- 在任何组件的标记中使用该视图。
svelte
<autoFitText fontSize="48" text="Lorem Ipsum this line of text with fontSize ignored because the text is so long." />致谢
@grantland - android-autofittextview
许可证
Apache 许可证 版本 2.0，2004 年 1 月
