I'm trying to translate the text values pass to an Angular component.
<button class="button" [ngClass]="classes" (click)="onClick()" [ngStyle]="{'position': position, 'margin': margin}">
<img src="../../../assets/icons/{{icon}}.svg" alt="" class="button__icon" *ngIf="icon" [ngClass]="classIcon">
<span i18n="Button Text|Text that refers to the action in the button##buttonText">
{{ text }}
</span>
I'm using Anlgular localize to do that. But I'm struggling with the translation of the text i pass via #Input to the component.
<trans-unit id="buttonText" datatype="html">
<source> <x id="INTERPOLATION" equiv-text="{{ text }}"/> </source>
<target> <x id="INTERPOLATION" equiv-text="{{ text }}"/> </target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/button/button.component.html</context>
<context context-type="linenumber">4,6</context>
</context-group>
<note priority="1" from="description">Text that refers to the action in the button</note>
<note priority="1" from="meaning">Button Text</note>
</trans-unit>
Is there any way to translate ANY value i pass to the component?
Thanks in advance!!!
Related
I want to create a custom Date Picker component with Vue version 2 and VeeValidate. I am using vuetify and v-menu component from there: https://vuetifyjs.com/en/components/menus/ . The problem is that ValidationProvider which is responsible for validating fields accepts only one v-model inside of it and I have two: one for triggering v-menu and second for gathering value to v-text-field from v-date-picker. When I remove this v-model from v-menu validation works but I cannot close menu after I choose some values in date-picker.
<ValidationProvider v-slot="{ validate, errors }">
<label>...</label>
<v-menu v-model="menu">
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
:value="formatDate"
readonly
v-on="on"
#input="$emit('input', $event) || validate($event)"
/>
</template>
<v-date-picker
:value="value"
no-title
#input="$emit('input', $event) || validate($event)"
#change="menu = false"
/>
</v-menu>
<span
v-if="errors.length > 0"
>{{ errors[0] }}</span>
</ValidationProvider>
This is my data:
data: () => ({
html: [
"../assets/html.png",
"../assets/css.png",
"../assets/scss.png",
"../assets/materialize.png"
]
})
I loop through like this, which shows the text stored in my data object:
<p v-for="img in html" :key="img">{{img}}</p>
However I can not use interpolation inside elements, so the following code does not work.
<v-flex xs6 md3 v-for="img in html" :key="img">
<img src={{img}} alt />
</v-flex>
How can I do this?
Edit: No errors, but not working yet: The HTML link looks like this (working):
</v-flex>
<v-flex xs6 md3><img src=../assets/html.png alt /></v-flex>
</v-layout>
src="/img/html.6ec9ec76.png"
Rendered by vue: src="../assets/materialize.png
Vue does not handle it correctly it seems!
Try to use <img :src="img" alt /> instead
string interpolation can only be used to display for value in attribute you have to bind it:
<v-flex xs6 md3 v-for="img in html" :key="img">
<img :src="img" alt />
</v-flex>
I'm trying to implement amp-list to allow a different currency depending on where the user is from. I've implemented the amp-list element and created a JSON file (which is a CORS url), containing the data using the correct syntax.
The amp-list however is not printing the data, and instead printing a blank space. The HTML template is:
<amp-list width="auto"
height="50"
layout="fixed-height"
src="/amp-price/57938">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
And the JSON response is:
{"items": [{"price": "\u00a321.59", "test": "test"}]}
But the rendered HTML is:
<amp-list width="auto" height="50" layout="fixed-height" src="/amp-price/57938" class="i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-layout" aria-live="polite" style="height: 50px;">
<template type="amp-mustache">
<p class="price"> - </p>
</template>
<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div></amp-list>
The JSON response has all the correct AMP headers, and I'm not getting any AMP errors in the console.
I've also followed the src link in the page source and it goes to the correct URL.
Is there something simple I'm missing?
I had the same problem and I tried almost everything. The amp-list in safari 10 doesn't load the json endpoint.
But the solution for me is to add credentials="include" into my amp-list tag:
the final amp-list:
<amp-list credentials="include" id="smallcartsList" width="auto" height="#HeightRequest" [height]="CurrentCartList.items.length == 0 ? 5 : 50 * CurrentCartList.items.length" media="(max-width: 1199px)" layout="fixed-height" binding="no" src="/API/CartList/GetCartsList" [src]="cartlistsource" template="cartlistdetail"> </amp-list>
Sebastian Benz is correct I have use the same code and working fine
Here is working url
HEAD JS
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
BODY HTML
<amp-list width="auto"
height="50"
layout="fixed-height"
src="https://jsonblob.com/api/jsonBlob/1f6f838d-25aa-11e8-8863-d99090d9ec78">
<template type="amp-mustache">
<p class="price align-center {{test}}">{{price}}</p>
</template>
</amp-list>
JSON DATA LINK
I want to load the Nativescript (RadCartesianChart) properties from external json file to my main xml file. How to call this RadCartesianChart property from an external json file?
The external json file should look like :
{
"title":"chart",
"chart-type":"Line",
"x-axis":"month",
"y-axis":"amount"
}
This is my current xml file:
<Page
loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:sd="nativescript-pro-ui/sidedrawer"
xmlns:chart="nativescript-pro-ui/chart"
>
<ActionBar title="MyApp" class="action-bar"/>
<StackLayout class="home-panel">
<Label textWrap="true" text="OVERVIEW" class="overview"/>
<Label textWrap="true" text="Sales Report" class="graph-desc"/>
<GridLayout class= "gLayout" rows="*" height="800px" width="1300px">
<chart:RadCartesianChart row="0">
<chart:RadCartesianChart.series class="Line">
<chart:LineSeries items="{{ categoricalSource }}" categoryProperty="{{ categoryProperty }}" valueProperty="{{ valueProperty }}">
<chart:LineSeries.horizontalAxis>
<chart:CategoricalAxis/>
</chart:LineSeries.horizontalAxis>
<chart:LineSeries.verticalAxis>
<chart:LinearAxis/>
</chart:LineSeries.verticalAxis>
</chart:LineSeries>
</chart:RadCartesianChart.series>
</chart:RadCartesianChart>
</GridLayout>
<GridLayout rows="*" xmlns:chart="nativescript-pro-ui/chart" height="800px" width="1300px">
<chart:RadPieChart row="0" allowAnimation="true" row="0">
<chart:RadPieChart.series>
<chart:PieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" items="{{ categoricalSource }}" valueProperty="Amount"
legendLabel="Department" />
</chart:RadPieChart.series>
<chart:RadPieChart.legend>
<chart:RadLegendView position="Right" title="Dep" offsetOrigin="TopRight" width="110" enableSelection="true" />
</chart:RadPieChart.legend>
</chart:RadPieChart>
</GridLayout>
</StackLayout>
As per https://docs.nativescript.org/core-concepts/data-binding
In your js file add
// Either import your JSON here or...
var OptionsModel = require("./test.json");
// call GetString to get it from server or external source.
// and add it to OptionsModel.
// All the variables you wish to import in the xml add it to pageBinding as an object.
// then you can use {{'options or model or whatever name you give'.'value you want to access inside it'}}
page.bindingContext = {
model: homeViewModel,
options: OptionsModel
};
In your xml add
{{ model.categoricalSource }} or {{options.title}} to access values
I am creating a native script application and I want my tab View to appear on the top for iOS. I know sticking the tabView on the top violates the human interface guideline, but I need to do it this way.
With the new Nativescript 6 there is a new component called "Tabs" that allows you to do this:
Here is how you would do it with Nativescript angular:
<Tabs selectedIndex="1" class="fas font-size">
<!-- Using icon fonts for each TabStripItem -->
<TabStrip>
<TabStripItem title="Home"></TabStripItem>
<TabStripItem title="Account"></TabStripItem>
<TabStripItem title="Search"></TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
</Tabs>
Here is a playground project I created.
Hereis a playground example with Nativescript typescript using both top and low tabs
Here you can find the documentation
important note: this widget is currently on beta
You can achieve that. Here's how i have done the similar thing -
<StackLayout row="0" col="0">
<StackLayout *ngIf="visibility1" id="mainView" visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
<FirstView></FirstView>
</StackLayout>
<StackLayout *ngIf="visibility2" id="mainView" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
<SecondView></SecondView>
</StackLayout>
<StackLayout *ngIf="visibility3" id="mainView" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
<ThirdView></ThirdView>
</StackLayout>
</StackLayout>
and change the visibility of each component based on the click events.
You can implement all manners of TabView behaviours/layouts using the SegmentedBar. See this answer for details