I have been working with ANTD since version 2.10. DatePicker had no problems with localization.
When I switched to version 2.12.8 DataPicker began to display the months and days of the week in English,
although the prompts in the TextBox are displayed correctly in any selected language. It seems that DatePicker does not interact correctly with the moment.js. How can I fix this? The application is built on the basis of Create-React-App.
...
import { LocaleProvider } from 'antd';
import ruRU from 'antd/lib/locale-provider/ru_RU';
...
<Provider store={store}>
<Router>
<LocaleProvider locale={ruRU}>
<App/>
</LocaleProvider>
</Router>
</Provider>
This one line worked for me:
import 'moment/locale/ru';
See 'note' in Antd docs: antd range picker docs
import { ConfigProvider } from "antd";
import React from "react";
import moment from "moment";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import ru_RU from "antd/lib/locale/ru_RU";
import store from "./store";
moment.locale("ru");
ReactDOM.render(
<ConfigProvider locale={ru_RU}>
<Provider store={store}>
<App/>
</Provider>
</ConfigProvider>,
document.getElementById("root")
);
moment.locale("ru"); adding this line fix your problem and ConfigProvider is localize all antd components
Related
Is there a proper way of using ant with remix?
Using antd (ant.design) version 5. Tried adding the following to the root.tsx (as well as route files) file in remix project but styles still don't work:
import styles from "antd/dist/reset.css";
export function links() {
return [
{
rel: "stylesheet",
href: styles,
}
]
}
On version 5+, all you need to do is import the components and use. No need to import the css anymore, as mentioned here. You may add a ConfigProvider to app/root.tsx if you need to customize the theme.
import { Button, DatePicker } from 'antd';
export default function Index() {
return (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
}
The reset file should be added to app/root.tsx, only if you need to reset the basic styles.
Sadly, right now there is no easy way to use Ant Design without budled css file. As remix doesn't support bundling css yet, also there is no option to overridde esbuild config to add such plugin. But Remix team is working on such feature: https://github.com/remix-run/remix/discussions/1302#discussioncomment-1913510
I want to use react-native-paper dark theme on my apps, however, all my <View> are still had a white background and causing all the Text component unreadable because the text turns white in dark mode. I didn't use custom theming since the docs mention that:
If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
This is my code in App.js:
import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import Home from './src/Home';
const App = () => {
return (
<PaperProvider>
<Home />
</PaperProvider>
);
};
export default App;
This is in my Home.js:
import React from 'react';
import {View} from 'react-native';
import {Appbar, Card, Title} from 'react-native-paper';
const Home = () => {
return (
<View style={{flex: 1}}>
<Appbar.Header>
<Appbar.BackAction onPress={() => console.log('back')} />
<Appbar.Content title="Title" subtitle={'Subtitle'} />
</Appbar.Header>
<View>
<Title>Hello World</Title>
<Card
style={{margin: 15, padding: 15}}
onPress={() => console.log('press card')}>
<Title>This is Card</Title>
</Card>
</View>
</View>
);
};
export default Home;
and this is the result:
The view still white and the Title also white due to dark mode
It working fine on android
The text turns white because it is the behavior of dark mode, but why my <View> is still white? This is only happening on iOS, it works fine on android.
This is a new react native project, and based on documentation in react-native-paper it will turn the dark theme automatically. So, I need help if I missed something in setting up this project on iOS. Any help would be appreciated.
react: 16.13.1
react-native: 0.63.4
react-native-paper: ^4.7.1
react-native-vector-icons: ^8.0.0
If you do not specify a custom theme, Paper will use the DefaultTheme which is essentially a light theme. To employ a dark theme in your app, Paper provides a Material based DarkTheme. You can specify which theme to use within the Paper provider.
Complete example from the docs for DefaultTheme including customization:
import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
},
};
export default function Main() {
return (
<PaperProvider theme={theme}>
<App />
</PaperProvider>
);
}
PaperProvider uses React Context. Theme can be accessed within components with the withTheme HOC or useTheme hook.
While adding snack bar to my component in neutrinos studio,from where should we need to import that?
I got your query regarding snack-bar, you need to import the NSnackbarService from neutrinos-seed-services in your respective .ts file.
Import Statement: import { NSnackbarService } from 'neutrinos-seed-services';
I'm trying to make a shopify app and I want to use ruby on rails with polaris and reactJS. When I try to use the Page component taken from shopify's website, nothing ever gets rendered to the screen. Here's an example of what I'm talking about.
This is my index.jsx file:
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import {AppProvider, Page, Card} from '#shopify/polaris'
import '#shopify/polaris/styles.css'
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Page title="Jar Witock-Lid"> //Here is where I use the Page tag
<p>Other content</p>
</Page>,
document.body.appendChild(document.createElement('div')),
)
})
Everything else is working fine because when I change the Page tag to be a div like this:
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<div>
<div>{"One"}</div>
<div>{"Two"}</div>
<div>{"Three"}</div>
</div>,
document.body.appendChild(document.createElement('div')),
)
})
It would render ("One" "Two" "Three") to the page. When I run my rails server and refresh the screen, no errors or warning are displayed. I downloaded polaris by running this command: yarn add #shopify/polaris.
Any help is greatly appreciated. I tried looking all over the web but I couldn't put the pieces together. Thanks in advance!
I found the solution. The only thing I was missing was wrapping it all in an AppProvider tag like this:
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<AppProvider>
<Page title="Jar Witock-Lid">
<p>content</p>
</Page>
</AppProvider>,
document.body.appendChild(document.createElement('div')),
)
})
I'm kinda new to Vue.js but today I am trying to setup some sort of map to show data. I ended up picking Highmaps since it seemd like the best alternative of the bunch and also because I already used it (Highcharts) for other projects.
Now the problem arises because I am developing a component driven webapp but I want to import maps from Highmaps. Since they just use CDN paths I don't really know how to implement them by using the import statement. Below is some code to make you understand better.
--- main.js ---
import Vue from 'vue'
import App from './App'
import MapComponent from './components/MapComponent.vue'
import Highcharts from 'highcharts';
import HighMaps from '../node_modules/highcharts/highmaps.js'
import VueHighcharts from 'vue-highcharts'
import loadMap from 'highcharts/modules/map';
loadMap(Highcharts);
Vue.use(VueHighcharts, { Highcharts });
Vue.use(HighMaps);
Vue.component('app-map', MapComponent)
new Vue({
el: '#app',
router: router,
components: { App },
template: '<App/>'
})
------------------------
--- MapComponent.vue ---
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import Element from 'element-ui';
import axios from 'axios';
import HighCharts from 'vue-highcharts';
export default {
data () {
return {
chartOptions: {
chart: {
map: 'countries/it/it-all'
},
...
}
},
}
</script>
This is what you can see from the browser, the errors appear when I try to press the + / - or when I scroll inside the map's borders
As you can see inside the script tag I already imported some libraries but I can't undestand how to import Highmaps too.
I can see in the image you have an error:
Uncaught ReferenceError, HighCharts is not defined at ...
This is because, whenever you import a library for Vue, you should provide it as a component.
So, you have to add this:
import HighCharts from 'vue-highcharts';
export default {
//...
components: { HighCharts },
//...
}
The problem here it's that the CDN imports VueHighcharts, you can register it globally as
Vue.use(VueHighcharts, { Highcharts: Highcharts })
and then use it everywhere
<highmaps :options="options"></highmaps>
Take a look at the examples on the bottom of the Lib Readme
Also, it's better to install it via npm to have a better modular structure to work with webpack (or whatever you use)
Right now I have found a way (probably cheesy) to force the map data into the map itself by copy pasting the object inside a variable and then referencing it into the chart.map
I understand that this is probably very bad since Vue needs to go and compile all of that object right inside the component but I hope it is a temporary solution.
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import Element from 'element-ui';
import axios from 'axios';
import HighCharts from 'vue-highcharts';
export default {
data () {
var country= {"title":"Italy","version":"1.1.2","type":"FeatureCollection","copyright":"Copyright...}
return {
chartOptions: {
chart: {
map: country
},
...
}
</script>
You can find the map data at this url (choose the GeoJSON option)
EDIT
I have finally found a good way of doing this by just saving the raw json data of the map into a local .json file and importing it as follows:
<template>
<div>
<highmaps :options="chartOptions"></highmaps>
</div>
</template>
<script>
import HighCharts from 'vue-highcharts';
import json from '../map.json'
export default {
data () {
return {
chartOptions: {
chart: {
map: json,
},
...
}
</script>