RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Common/NavigationRightToLeftSupport below:

Right-to-Left Support - React Navigation

import React, { useCallback, useState } from 'react'; import SelectBox from 'devextreme-react/select-box'; import Menu from 'devextreme-react/menu'; import TreeView from 'devextreme-react/tree-view'; import Accordion from 'devextreme-react/accordion'; import { continents, europeCountries, languageLabel } from './data.ts'; const languages = [ 'Arabic: Right-to-Left direction', 'English: Left-to-Right direction', ]; const renderArabicTitle = (item) => (<div>{item.nameAr}</div>); const renderArabic = (country) => ( <div> <div>عاصمة: {country.capitalAr} </div> <div>عدد السكان: {country.population} نسمة</div> <div>المساحة: {country.area} كم<sup>2</sup></div> </div> ); const renderEnglishTitle = (item) => (<div>{item.nameEn}</div>); const renderEnglish = (country) => ( <div> <div>Capital: {country.capitalEn} </div> <div>Population: {country.population} people</div> <div>Area: {country.area} km<sup>2</sup></div> </div> ); const App = () => { const [rtlEnabled, setRtl] = useState(false); const selectLanguage = useCallback(({ value }) => { setRtl(value === languages[0]); }, [setRtl]); return ( <div className={rtlEnabled ? 'dx-rtl' : ''}> <div className="options"> <div className="caption">Options</div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Language</div> <div className="dx-field-value"> <SelectBox items={languages} inputAttr={languageLabel} defaultValue={languages[1]} onValueChanged={selectLanguage} /> </div> </div> </div> </div> <div> <div className="dx-fieldset"> <div className="dx-fieldset-header"> <Menu dataSource={continents} rtlEnabled={rtlEnabled} displayExpr={rtlEnabled ? 'textAr' : 'text'} /> </div> </div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label"> <TreeView width={200} dataSource={continents} displayExpr={rtlEnabled ? 'textAr' : 'text'} rtlEnabled={rtlEnabled} /> </div> <div className="dx-field-value"> <Accordion dataSource={europeCountries} rtlEnabled={rtlEnabled} itemTitleRender={rtlEnabled ? renderArabicTitle : renderEnglishTitle} itemRender={rtlEnabled ? renderArabic : renderEnglish} /> </div> </div> </div> </div> </div> ); }; export default App;

import React, { useCallback, useState } from 'react'; import SelectBox from 'devextreme-react/select-box'; import Menu from 'devextreme-react/menu'; import TreeView from 'devextreme-react/tree-view'; import Accordion from 'devextreme-react/accordion'; import { continents, europeCountries, languageLabel } from './data.js'; const languages = ['Arabic: Right-to-Left direction', 'English: Left-to-Right direction']; const renderArabicTitle = (item) => <div>{item.nameAr}</div>; const renderArabic = (country) => ( <div> <div>عاصمة: {country.capitalAr} </div> <div>عدد السكان: {country.population} نسمة</div> <div> المساحة: {country.area} كم<sup>2</sup> </div> </div> ); const renderEnglishTitle = (item) => <div>{item.nameEn}</div>; const renderEnglish = (country) => ( <div> <div>Capital: {country.capitalEn} </div> <div>Population: {country.population} people</div> <div> Area: {country.area} km<sup>2</sup> </div> </div> ); const App = () => { const [rtlEnabled, setRtl] = useState(false); const selectLanguage = useCallback( ({ value }) => { setRtl(value === languages[0]); }, [setRtl], ); return ( <div className={rtlEnabled ? 'dx-rtl' : ''}> <div className="options"> <div className="caption">Options</div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Language</div> <div className="dx-field-value"> <SelectBox items={languages} inputAttr={languageLabel} defaultValue={languages[1]} onValueChanged={selectLanguage} /> </div> </div> </div> </div> <div> <div className="dx-fieldset"> <div className="dx-fieldset-header"> <Menu dataSource={continents} rtlEnabled={rtlEnabled} displayExpr={rtlEnabled ? 'textAr' : 'text'} /> </div> </div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label"> <TreeView width={200} dataSource={continents} displayExpr={rtlEnabled ? 'textAr' : 'text'} rtlEnabled={rtlEnabled} /> </div> <div className="dx-field-value"> <Accordion dataSource={europeCountries} rtlEnabled={rtlEnabled} itemTitleRender={rtlEnabled ? renderArabicTitle : renderEnglishTitle} itemRender={rtlEnabled ? renderArabic : renderEnglish} /> </div> </div> </div> </div> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const continents = [{ id: '1', text: 'Africa', textAr: 'أفريقيا', items: [ { id: '1_2', text: 'Ethiopia', textAr: 'أثيوبيا', items: [{ id: '1_2_1', text: 'Addis Ababa', textAr: 'أديس أبابا', }, { id: '1_2_2', text: 'Dire Dawa', textAr: 'دير داوا', }], }, { id: '1_1', text: 'Nigeria', textAr: 'نيجيريا', items: [{ id: '1_1_1', text: 'Lagos', textAr: 'لاغوس', }, { id: '1_1_2', text: 'Kano', textAr: 'كانو', }], }, ], }, { id: '2', text: 'Asia', textAr: 'آسيا', items: [{ id: '2_1', text: 'China', textAr: 'الصين', items: [{ id: '2_1_1', text: 'Beijing', textAr: 'بكين', }, { id: '2_1_2', text: 'Shanghai', textAr: 'شنغهاي', }], }, { id: '2_2', text: 'India', textAr: 'الهند', items: [{ id: '2_2_1', text: 'Indianapolis', textAr: 'انديانابوليس', }, { id: '2_2_2', text: 'New Delhi', textAr: 'نيودلهي', }], }], }, { id: '3', text: 'Australia', textAr: 'أستراليا', items: [{ id: '3_1', text: 'Australia', textAr: 'أستراليا', items: [{ id: '3_1_1', text: 'Canberra', textAr: 'كانبيرا', }, { id: '3_1_2', text: 'Melbourne', textAr: 'ملبورن', }, { id: '3_1_3', text: 'Sydney', textAr: 'سيدني', }], }], }, { id: '4', text: 'Europe', textAr: 'أوروبا', items: [{ id: '4_1', text: 'Germany', textAr: 'ألمانيا', items: [{ id: '4_1_1', text: 'Berlin', textAr: 'البرلينية', }, { id: '4_1_2', text: 'Hamburg', textAr: 'هامبورغ', }], }, { id: '4_2', text: 'Russia', textAr: 'روسيا', items: [{ id: '4_2_1', text: 'Moscow', textAr: 'موسكو', }, { id: '4_2_2', text: 'Saint Petersburg', textAr: 'سانت بطرسبرغ', }], }], }, { id: '5', text: 'North America', textAr: 'أمريكا الشمالية', items: [{ id: '5_2', text: 'Mexico', textAr: 'المكسيك', items: [{ id: '5_2_1', text: 'Mexico City', textAr: 'مكسيكو سيتي', }, { id: '5_2_2', text: 'Guadalajara', textAr: 'غوادالاخارا', }], }, { id: '5_1', text: 'United States', textAr: 'الولايات المتحدة الأمريكية', items: [{ id: '5_1_1', text: 'New York', textAr: 'نيويورك', }, { id: '5_1_2', text: 'Washington', textAr: 'واشنطن', }], }], }, { id: '6', text: 'South America', textAr: 'أمريكا الجنوبية', items: [{ id: '6_1', text: 'Brazil', textAr: 'البرازيل', items: [{ id: '6_1_1', text: 'Brasilia', textAr: 'برازيليا', }, { id: '6_1_2', text: 'Sao Paulo', textAr: 'ساو باولو', }], }, { id: '6_2', text: 'Colombia', textAr: 'كولومبيا', items: [{ id: '6_2_1', text: 'Bogota', textAr: 'بوغوتا', }, { id: '6_2_2', text: 'Medellin', textAr: 'ميديلين', }], }], }]; export const europeCountries = [{ nameAr: 'النمسا', nameEn: 'Austria', population: 8451900, area: 83855.0, capitalEn: 'Vienna', capitalAr: 'فيينا', }, { nameAr: 'بلجيكا', nameEn: 'Belgium', population: 11161600, area: 30528.0, capitalEn: 'Brussels', capitalAr: 'بروكسل', }, { nameAr: 'بلغاريا', nameEn: 'Bulgaria', population: 7284600, area: 110994.0, capitalEn: 'Sofia', capitalAr: 'صوفيا', }, { nameAr: 'كرواتيا', nameEn: 'Croatia', population: 4262100, area: 56594.0, capitalEn: 'Zagreb', capitalAr: 'زغرب', }]; export const languageLabel = { 'aria-label': 'Language' };

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const continents = [ { id: '1', text: 'Africa', textAr: 'أفريقيا', items: [ { id: '1_2', text: 'Ethiopia', textAr: 'أثيوبيا', items: [ { id: '1_2_1', text: 'Addis Ababa', textAr: 'أديس أبابا', }, { id: '1_2_2', text: 'Dire Dawa', textAr: 'دير داوا', }, ], }, { id: '1_1', text: 'Nigeria', textAr: 'نيجيريا', items: [ { id: '1_1_1', text: 'Lagos', textAr: 'لاغوس', }, { id: '1_1_2', text: 'Kano', textAr: 'كانو', }, ], }, ], }, { id: '2', text: 'Asia', textAr: 'آسيا', items: [ { id: '2_1', text: 'China', textAr: 'الصين', items: [ { id: '2_1_1', text: 'Beijing', textAr: 'بكين', }, { id: '2_1_2', text: 'Shanghai', textAr: 'شنغهاي', }, ], }, { id: '2_2', text: 'India', textAr: 'الهند', items: [ { id: '2_2_1', text: 'Indianapolis', textAr: 'انديانابوليس', }, { id: '2_2_2', text: 'New Delhi', textAr: 'نيودلهي', }, ], }, ], }, { id: '3', text: 'Australia', textAr: 'أستراليا', items: [ { id: '3_1', text: 'Australia', textAr: 'أستراليا', items: [ { id: '3_1_1', text: 'Canberra', textAr: 'كانبيرا', }, { id: '3_1_2', text: 'Melbourne', textAr: 'ملبورن', }, { id: '3_1_3', text: 'Sydney', textAr: 'سيدني', }, ], }, ], }, { id: '4', text: 'Europe', textAr: 'أوروبا', items: [ { id: '4_1', text: 'Germany', textAr: 'ألمانيا', items: [ { id: '4_1_1', text: 'Berlin', textAr: 'البرلينية', }, { id: '4_1_2', text: 'Hamburg', textAr: 'هامبورغ', }, ], }, { id: '4_2', text: 'Russia', textAr: 'روسيا', items: [ { id: '4_2_1', text: 'Moscow', textAr: 'موسكو', }, { id: '4_2_2', text: 'Saint Petersburg', textAr: 'سانت بطرسبرغ', }, ], }, ], }, { id: '5', text: 'North America', textAr: 'أمريكا الشمالية', items: [ { id: '5_2', text: 'Mexico', textAr: 'المكسيك', items: [ { id: '5_2_1', text: 'Mexico City', textAr: 'مكسيكو سيتي', }, { id: '5_2_2', text: 'Guadalajara', textAr: 'غوادالاخارا', }, ], }, { id: '5_1', text: 'United States', textAr: 'الولايات المتحدة الأمريكية', items: [ { id: '5_1_1', text: 'New York', textAr: 'نيويورك', }, { id: '5_1_2', text: 'Washington', textAr: 'واشنطن', }, ], }, ], }, { id: '6', text: 'South America', textAr: 'أمريكا الجنوبية', items: [ { id: '6_1', text: 'Brazil', textAr: 'البرازيل', items: [ { id: '6_1_1', text: 'Brasilia', textAr: 'برازيليا', }, { id: '6_1_2', text: 'Sao Paulo', textAr: 'ساو باولو', }, ], }, { id: '6_2', text: 'Colombia', textAr: 'كولومبيا', items: [ { id: '6_2_1', text: 'Bogota', textAr: 'بوغوتا', }, { id: '6_2_2', text: 'Medellin', textAr: 'ميديلين', }, ], }, ], }, ]; export const europeCountries = [ { nameAr: 'النمسا', nameEn: 'Austria', population: 8451900, area: 83855.0, capitalEn: 'Vienna', capitalAr: 'فيينا', }, { nameAr: 'بلجيكا', nameEn: 'Belgium', population: 11161600, area: 30528.0, capitalEn: 'Brussels', capitalAr: 'بروكسل', }, { nameAr: 'بلغاريا', nameEn: 'Bulgaria', population: 7284600, area: 110994.0, capitalEn: 'Sofia', capitalAr: 'صوفيا', }, { nameAr: 'كرواتيا', nameEn: 'Croatia', population: 4262100, area: 56594.0, capitalEn: 'Zagreb', capitalAr: 'زغرب', }, ]; export const languageLabel = { 'aria-label': 'Language' };

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

sup { font-size: 0.8em; vertical-align: super; line-height: 0; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-bottom: 20px; } .options .dx-fieldset { margin: 0; } .caption { font-size: 18px; font-weight: 500; padding-right: 15px; } .dx-theme-material .dx-accordion .dx-accordion-item-opened .dx-accordion-item-title { padding-top: 20px; }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4