this is my message string
msg:"Lorem ipsum dolor {{ variable }} sit amet"
I need to make this string look like below after translation using pipe in angular:-
Lorem ipsum dolor variable sit amet.
So I changed my original msg to
msg:"Lorem ipsum dolor strong-tag {{ variable }} closed-strong-tag sit amet"
But it is not working.
Value of my {{variable}} is passed at runtime as
<p>{{ 'msg' | translate: {
variable: total_fine }
}}</p>
Where am I going wrong?
Related
I'm having issues when dynamically assigning text colors to some headings. I have a .map function that runs and outputs some divs with different heading colors. This is example of my code:
{nftInfo.map((nft, index) => (
<div
className="flex flex-col space-y-3 rounded-lg border-2 border-opacity-25 bg-white p-5 hover:bg-slate-50 dark:border-slate-500 dark:bg-gray-700"
key={index}
>
<div
className={`flex justify-center space-x-4 font-bold text-${nft.color}-600 dark:text-${nft.color}-400`}
>
<div className={`text-lg `}>
{nft.title} {nft.color} <--- This outputs the correct color
</div>
{nft.icon}
</div>
</div>
Example of JSON:
{
title: 'Dummy text 2',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime minima odit aspernatur aliquam deleniti in corporis omnis cupiditate optio, voluptatum quasi reiciendis dolor, nostrum nihil quaerat est, doloremque mollitia possimus.',
bottomText: 'Lorem ipsum dolor sit amet consectetur adipisicing',
buttonText: 'Generate contract',
icon: <CodeIcon className="mt-1 h-6 w-6" />,
color: 'pink'
}
Here you can see that I'm assigning text colors depending on the color I set in the JSON above.
text-${nft.color}-600 dark:text-${nft.color}-400
I can also see the string being correctly assigned in the developer tools DOM view, but when I check the CSS in the dev tools the style is not applied...
Also, if I manually add the class to the div the heading does get colored...
The CSS file generated by Tailwind will only include classes that it recognizes when it scans your code, which means that dynamically generated classes (e.g. text-${nft.color}-600) will not be included.
To ensure that your colors are added to the CSS, you could add safelist in tailwind.config.js that holds all of the color utility classes that you need (see https://tailwindcss.com/docs/content-configuration#safelisting-classes).
module.exports = {
...
safelist: [
'text-pink-600',
'dark:text-pink-400',
]
}
Another solution is to add the utility classes in an object in your component, so that they get picked up and added to the stylesheet when Tailwind parses your code. You can then look up the colors using your nft.color variable. For instance:
const colors = {
"pink": {
"light": "text-pink-600",
"dark": "dark:text-pink-400",
},
...
}
<div className={`${colors[nft.color].light} ${colors[nft.color].dark}`} />
I'm building a tutorial app with react native. I designed it well but I have no idea how can I store it's data.
I think to Store in object like this...
Tutorial = [
{
Intro : {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incid quis.."
},
content : {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do sunt in culpa qui officia deserunt mollit anim id est laborum...
},
conclusion : {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo...
}
}
]
But I don't think it's a good idea to achieve this.
I'm so curious about how most of offline programming app developed. Probably most of you know app like programming hub, mimo... Etc
So please mention me how I can achieve this in my react native app
For most smaller data you can use AsyncStorage from react-native, but there are more data then you can use Realm and SQLite these are libraries to store data on device.
https://www.npmjs.com/package/react-native-sqlite-storage
https://github.com/realm/realm-js
For example, let's say you have a component that you're going to reuse many times in your app.
So you set it up to receive different/unique texts, multiple h2s and multiple ps as props.
const Sets = ({ oneH, twoH, threeH, oneP, twoP, threeP }) => {
return (
<div className="sets">
<div>
<h3>{oneH}</h3>
<p>{oneP}</p>
</div>
<div>
<h3>{twoH}</h3>
<p>{twoP}</p>
</div>
<div>
<h3>{threeH}</h3>
<p>{threeP}</p>
</div>
</div>
);
};
And then you use it as such:
<Sets
oneH="Blue Skies"
twoH="Good Times"
threeH="Hotels, Etc."
oneP="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
twoP="Different lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
threeP="Unique lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
/>
Is there too much text in the usage of it and is it too clunky? Is there some better way?
Try breaking it up even more, and putting the text sets into a JS array.
To make the source text more readable:
const texts = [
{
h:"abc",
p:"123"
},
{
...
}
]
And then pass this into your Sets element:
<Sets texts={texts} />
And then in the Sets, iterate the texts:
const Sets = ({ texts }) => {
return (
<div className="sets">
{texts.map(({h,p}) => (
<div>
<h3>{h}</h3>
<p>{p}</p>
</div>
)
</div>
);
};
This allows you to edit the source texts really easily in one place; it can even be loaded dynamically from an external source.
The single texts prop makes it easier to pass it in as you can see.
And finally the iteration allows you to escape having to type every single prop!
I know this question has been asked a lot, but I don't really understand the answer mainly because all the answer use "Class" and I was taught to use function. I don't even understand the difference but every time I try using a class component, nothing works.
I am really new to React.js and I have a hard time understanding how it works.
I need to show and hide - <p className='service_explication more'>{props.more}</p> - on the click of a button with a smooth animation.
I've tried with basic javascript but it doesn't work.
I've tried a lot of things and now I am stuck and I don't find a good explanation to what I need.
Could you please help me ? I really want to learn but I'm having a hard time.
Thank you so much for your help.
import React, { useState } from 'react';
import '../assets/Section.scss';
import '../assets/Services.scss';
function Services(){
function showMore(event){
}
const BlocService = (props) => {
return <div className='service_sub_container'>
<h1 className='service_name'>{props.name}</h1>
<p className='service_explication'>{props.explication}</p>
<p className='service_explication more'>{props.more}</p>
<button onClik={showMore}>Plus</button>
</div>
}
return (
<>
<div className='main_container'>
<div className='section_container'>
<div className='title_intro_container'>
<h1 className='section_title'>Nos Services</h1>
<p className='section_intro'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.</p>
</div>
<div className='service_container'>
<BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Lead developper'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Architectes Front-end'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
<BlocService name={'Développeur Front/Web'} explication={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
</div>
</div>
</div>
</>
);
}
export default Services;```
First of all, don't feel bad for ask, everyone has to learn from the bottom.
Reactjs works making "renders" of the webpage in a dynamic way, so you have 2 options depending if you want a smooth animation or just a default show/hide.
If you want to show in a easy way, you can just make a condition which allows to create or not the desired div
function Component() {
const [showed, setShowed] = useState(false)
return (
<div>
<button onClick={()=>setShowed(!showed)}>Show/Hide</button>
{showed && <div>HELLO</div>}
</div>
)
}
If you want to create smooth animations you might want to need classes. With React you can just add or remove classes with no problem and let css do the job, so you can make
function Component() {
const [showed, setShowed] = useState(false)
return (
<div>
<button onClick={()=>setShowed(!showed)}>Show/Hide</button>
<div className={showed?classShowed:classHided>HELLO</div>
</div>
)
}
I hope this helps you
Everything can be done inside the BlocService component. Using a state and conditional rendering:
import React, {useState} from 'react'
const BlocService = (props) => {
const [more, setMore] = useState(false);
const showMore = () => {
setMore(!more);
}
return (
<div className='service_sub_container'>
<h1 className='service_name'>{props.name}</h1>
<p className='service_explication'>{props.explication}</p>
{more && <p className='service_explication more'>{props.more}</p>}
<button onClick={showMore}>Plus</button>
</div>
)
}
export default BlocService;
You also have to remove showMore from Services
In a functional component you would control state by the useState hook provided by react.
import React, {useState} from 'react'
function() services {
const [show, toggleText] = useState(false)
return (
<div>
<h2>Header text</h2>
<button onClick={toggleText(!show)}>Toggle text button</button>
{show && (<p>Text to toggle</p>)}
</div>
)
}
React Documentation
I am working with a json feed about cars. Part of the text has [VIN:'vin_number_is_here']Car make model here[/VIN]. I am using this in an ng-repeat and would like to, unless there's a better way, use a filter to process the text and create a hyperlink to a custom function ending up with something like <a ng-click="modalViewCar('vin_number_is_here')">Car make model here</a>
I have the replacement of the [/VIN] done but am at a loss for how best to handle the opening "tag".**
Additionally when I have hardcoded a test string I have found that the link never works which I assume is something Angular is responsible for...
app.filter('linkToVIN', ['$sce', function($sce) {
return function(input) {
input = input.replace("[/VIN]","</a>");
**input = input.replace("[VIN='12345abcdef']","<a ng-click=\"modalViewCar('12345abcdef')\">");**
return $sce.trustAsHtml(input);
};
}]);
<div ng-repeat="car in cars">
<div class="col-sm-12" ng-bind-html="car.details | filter:search | linkToVIN"></div>
</div>
The VIN link is in the body of text. Sometimes multiple times. So each ng-repeat has a {{car.details}} which may, about 1 in 3 times, have at least one string with the [VIN] structure. What I'd really like to do is hot link those as they appear within the text as so far I have found a few outlier cases where there are references to other [VIN] numbers. E.g.
Lorem ipsum dolor sit amet, [VIN:'12345abcdef']consectetur[/VIN] adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,[VIN:'000hijk']pretium[/VIN] at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
Which I would like to convert to.
Lorem ipsum dolor sit amet, < a ng-click="modalViewCar('12345abcdef')" >consectetur< /a > adipiscing elit. Vivamus laoreet odio nisi, eget gravida nunc porta gravida. Pellentesque nec porta tortor. In neque mi,< a ng-click="modalViewCar('000hijk')" >pretium< /a > at mattis ut, consectetur eget felis. Etiam tortor lacus, varius quis augue sed, condimentum varius massa.
solving the regexp
You can do this with one regexp using multiple matching groups to build your anchor tags:
data.replace(/\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi, '<a ng-click="vc.modalClick($1)">$2</a>')
test - https://regex101.com/r/tU5sG2/2
compiling the DOM
The next issue is that you need to compile the DOM correctly. In order to do that, I recommend a directive
.directive('vinContainer', function($parse, $compile){
restrict: 'A',
link: function($scope, elem, attrs){
regex = /\[VIN:'([\w\d-_]*)'\](.*?)\[\/VIN\]/gmi
anchor = '$2'
data = $parse(attrs.ngModel)($scope)
parsed = data.replace(regex, anchor)
elem.html(parsed).show()
$compile(elem.contents())($scope)
}
}
usage
<div vin-container ng-model="vc.viewData"/>
codepen - http://codepen.io/jusopi/pen/VeebEO?editors=101
This solution assumes that you are tightly coupling your directive to your view controller because your compiled anchors know which method to call. You could further break this down by:
creating an isolate scope with a callback expression you declare on the DOM
have the compiled links call the callback expression passing back the id as the payload
Doing it that way would be much more scalable. Here is the codepen for that version as well - http://codepen.io/jusopi/pen/yeeXJj?editors=101
Say your cars array looks something like this
var cars = [{details: "[VIN='12345abcdef']something[/VIN]"}, {details: ...}, ...];
You can transform it to a usable object by mapping the array
$scope.cars = cars.map(function(car) {
var parts = car.details.match(/^\[VIN='(.+?)'\](.+?)\[\/VIN\]$/);
return {
vin: parts[1],
details: parts[2]
};
});
and then in your template
<div ng-repeat="car in cars">
<a ng-click="modalViewCar(car.vin)" ng-bind-html="car.details"></a>
</div>
This makes the assumption that all your car.details entries match the regular expression.