I have been trying to change the language from English to others,
$t('bascketball')
↑this works inside the template, however I am looking the way that I can change the language of elements inside of export Default.
If you know how to solve it, please advice me.
export default {
name: "Home",
components: {},
data() {
return {
Games: [
keyword: '',
games: [
{
heading: $t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
},
You can do it with one of these:
this.$t('Basketball')
this.$i18n.tc('Basketball')
But because you're calling the API, you cannot do it in data, you can rewrite it to a computed method, like that:
computed: {
games() {
return [
{
heading: this.$t('Basketball'),
text:
"Hello Basketball players, want to know about team members. Click Below.",
img:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQt0Sh97iYcu0kTguhcsW_szWfzolqu1ynGeQ&usqp=CAU",
}
]
}
}
Related
I'm trying to use the steps to display several steps in a wizard.
My wizard steps works, but I can't manage to have the current steps highlighted properly in the steps list.
I was able to replicate in a small stackblitz: https://stackblitz.com/edit/angular-ivy-eujcl2?file=src%2Fapp%2Fsteps%2Fstep-two%2Fstep-two.component.html
When I run my code, I got basically this:
But in their demo, the current step gets highlighted:
Any idea what is going on? The styles are imported, I to bind an "activeIndex", but when I move, the step doesn't.
Your routes are not matching with what you have defined app route file vs what you have listed in wizard.component.ts, i.e.
// Your routes
{ path: 'step-1', component: StepOneComponent },
{ path: 'step-2', component: StepTwoComponent }
// But your step routeLinks
{
label: 'Step 1',
routerLink: '/setup/mongDb',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: '/setup/auth-token',
},
Once they match, the highlight starts working.
this.items = [
{
label: 'Step 1',
routerLink: 'step-1',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: 'step-2'
},
];
Demo
from what I see in your code, you don't use the proper routes.
The buttons trigger step-1 and step-2 but your step component is declared with /setup/mongDb and /setup/auth-token so I think the PrimeNg component doesn't see that you are on the declared path. I didn't look at the source code but I think this could be it.
I've started building a form in react-jsonschema-form and i'm having a lot of difficulty changing it visually.
The form is an array and it has a button to add and remove a set of input boxes.
I've build it as a component in a test project which has no css applied to it so far.
The form will render as a tiny box where there is no room for the buttons (they are cut of as shown below in images).
a single element
a second element
How its supposed to look on react-jsonschema-form playground
A key difference between my array and the sample array is that i'm having two text input elements per array element. I dont know if this could cause it.
I do need to have two input values as its a group of data that is related, and both is required.
This is my code:
//json schema
const schema = {
type: "object",
properties: {
listOfNumbers: {
title: "opret ledig nummerserie",
type: "array",
required: ["nr_fra", "nr_til"],
items: {
properties: {
nr_fra: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
nr_til: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
},
},
},
},
};
//uiSchema
const uiSchema = {
listOfNumbers: {
"ui:options": {
orderable: false,
},
items: {
//nr_fra: { "ui:options": { label: false } },
//nr_til: { "ui:options": { label: false } },
},
},
}
I'm applying no css to the below form.
// Form
<Form
schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onSubmit={(formOutput) => this.handleSubmit(formOutput)}
transformErrors={transformErrors}
/>
I've spent a day and a half on trying to strongarm this, but i could really use some help on how to proceed.
It seems it was css inputs that was needed to solve this.
The below will expand the elements to their proper size/form.
Posting this here for posterity, as this is not accurately documented.
<div className="col-md-offset-3 col-md-6">
<Form schema={schema}
uiSchema={uiSchema}>
</Form>
</div>
I created custom Gutenberg block for social links but I would need to add input fields where user can paste the url to that social profile. Here is where I would like to put the field (same as paragraph block has alignment settings there for example):
This is my code for the block:
const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;
registerBlockType('social-block/social', {
title: __('Social'),
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
edit: function (props) {
return React.createElement(
"div",
{style: {
display: 'flex',
justifyContent: 'center'
}},
// facebook
React.createElement(
'a',
{
'href': '',
'rel': 'noopener noreferrer',
'target': '_blank'
},
React.createElement(
'svg',
{
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'viewBox': "0 0 24 24",
'fill': "currentColor",
'width': "48px",
'height':"48px"
},
React.createElement(
'path',
{
'fill-rule': "evenodd",
'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
}
)
),
),
}
});
I tried implementing https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/ but its not the behavior that I need, anyone has a suggestion where to look or what to do?
First of all I will recommend you to use the ES6 syntax as it will make your code a lot easier. For ES6 whenever you see any code in WordPress docs then you can choose ESNEXT tab from top of snippet that will then shows you ES6 code.
Now your answer. Gutenberg provides us two kind of controls BlockControl and InspectorControl both of these provides you the way to manipulate your block but the difference is that BlockControl is a toolbar that appears on top of block (its the same link that you shared) while InspectorControls serves as a sidebar setting option the thing that you wanted to do. Here is the actual documentation of Inspector Controls and here is one working example from Image block of Gutenberg core.
I have a base component within which I have a dynamic component with a v-for that displays based on a computed property.
All I've really tried doing thus far, which was an incorrect methodology, was to wrap the method that loads data in a settimeout. This question is as much a methodology question as it is a coding question.
My base component looks like this:
<template>
<div>
<v-progress-linear
v-model="progressValue"
v-if="loading"
></v-progress-linear>
<component
v-for="table in tables"
:key="table.id"
:is="table.structure"
:table="table"
></component>
</div>
</template>
<script>
import Annual from './DataTables/Annual';
import { mapState, mapGetters } from 'vuex';
export default {
name: "Page",
props: [],
components: {
Annual,
},
data: () => ({
progressValue: 0,
loading: false,
tables: [],
}),
computed: {
...mapGetters({
currentTables: 'getCurrentPageTables',
tableTitles: 'getCurrentPageTableTitles',
}),
...mapState({
pageName: state => state.pageName,
snakeName: state => state.snakeName,
}),
methods: {
updateTables(payload) {
this.loading = true;
payload.forEach(title => {
this.tables.push(this.currentTables.filter(e => title === e.name)[0]);
this.progressValue = this.tables.length / payload.length;
})
},
},
watch: {
snakeName: {
handler() {
this.progressValue = 0;
this.updateTables(this.tableTitles);
this.$nextTick(() => {this.loading = false;})
},
immediate: true,
},
}
}
</script>
Annual.vue is simply a component that displays a Vuetify v-data-table element and its structure is fairly inconsequential to this.
For all intents and purposes we can consider currentTables and tableTitles to both be arrays, the first of objects whose data populate the v-data-tables in Annual.vue, and the second of strings which are just the names of the tables.
When the user navigates to another page the getters return different data, based on the page the user navigates to, but some of the pages have over 20 tables, which makes page loading slow upon navigation to these pages. I am trying to do one of two things:
1. Asynchronously load the components one at a time while still making the page functional for the user to navigate through.
2. Display a loader that disappears after all of the content is rendered. I'm having trouble figuring out how to do the latter because I can't put this functionality into the mounted() hook since all of this happens upon the watched parameter changing (hence the component is not re-mounted each time the route changes).
Any advice on how to tackle this would be appreciated.
I'd like to create a simple app that shows me a list of the latest stories from my favourite news sites using Sencha Touch 2 and the RSS feeds, of course.
How do I get data from an rss-feed and then display it as a list, showing title, author, date and content?
I can get a list of the latest news stories going, but I can only manage to display each item title/headline, not the author, date, snippet etc. Here's my code:
1 model, 1 store, 1 view, 1 app.js:
//The store
Ext.define("NewsApp.store.EbStore", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List" ],
config: {
model: "NewsApp.model.NewsListModel",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://feeds.feedburner.com/newsapp_pol',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
//The Model
Ext.define("NewsApp.model.NewsListModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
]
}
});
//The view
Ext.define("NewsApp.view.NewsList", {
extend: "Ext.Container",
requires: "Ext.Toolbar",
alias: "widget.newslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Danske Nyheder",
docked: "top",
items: [
{
xtype: 'spacer'
},
{
xtype: "button",
text: "Indstillinger",
ui: "action",
id: "settingsButton",
iconMask: true,
iconCls: 'settings'
},
{
xtype: "button",
text: "Refresh",
ui: "action",
id: "refreshButton",
iconMask: true,
iconCls: 'refresh'
}
]
},
{
xtype: "list",
store: "EbStore",
itemId:"EbList",
onItemDisclosure: true,
itemTpl: '{title}'
}
],
}
});
// And the app.js just for kicks
Ext.application({
name: "NewsApp",
models: ["NewsListModel"],
stores: ["EbStore"],
views: ["NewsList"],
launch: function () {
console.log("App starts");
var newsListView = {
xtype: "newslistview"
};
Ext.Viewport.add([newsListView]);
}
});
With this code, I can display the titles of the rss items nicely. But if I change the {title} to, say, {author}, the list items are created in my view, but without any content whatsoever. The RSS that I'm trying to read uses normal standards, I think: http://feeds.feedburner.com/newsapp_pol
So how do I display more than just the title and acces the rest of the rss?
I guess it boils to my not understanding what data is being captured in the proxy-code or how or in what format exactly.
Can anybody help? :-)
I have checked out these two examples of Sencha Touch RSS readers, and both are excellent, except that the code is way too advanced for me to understand:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader
Troels,
If you want to look at the data response of your google feed, I suggest you take a peek at the json data with a json beautifier to make it easier to read. First paste your google feed url into the browser's address bar. Copy the resulting json response - and paste it into the beautifier. That will give you a structured view of the data fields in the response data.
When i tried it, the first entry looked like this:
"title": "Over 50 såret under kampe i Kosovo",
"link": "http://politiken.dk/udland/ECE1672568/over-50-saaret-under-kampe-i-kosovo/",
"author": "",
"publishedDate": "Thu, 28 Jun 2012 12:09:18 -0700",
"contentSnippet": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"content": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"categories": []
I noticed that the "author" field is empty on all entries, which may explain why you get an empty list.
That should help you understand the data structure in the feed and create matching references in your code.
Cheers,
Rasmus