React.js蓝图排版列表国际化

蓝图是一个基于React的用于Web的UI工具包。这个库非常优化并且在构建复杂且数据密集的桌面应用程序界面方面非常流行。

在这篇文章中，我们将讨论React.js蓝图排版列表国际化。排版用于以不同方式向网页添加文本设计。React.js蓝图提供了不同类型的排版，可以在开发Web应用程序时使用。蓝图允许使用国际化字符串添加到网页中，还允许更改文本起始位置，即从右到左。

React.js蓝图排版列表国际化类：

bp4-rtl: 这个类用作国际化类，将国际语言列表转换为从右到左的格式。

语法：

<p class="bp4-rtl">
    ...
</p>

创建React应用程序和安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npm create-react-app appname

步骤2： 在创建了你的项目文件夹（即appname）之后，使用以下命令进行切换到该文件夹：

cd appname

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core

项目结构:

React.js蓝图排版列表国际化

示例1： 下面的示例演示了阿拉伯语的使用。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ padding: 20, textAlign: "center", 
                color: "green" }}> 
                <h1> 
                    ReactJS BluePrint Typography Lists 
                    Internationalization 
                </h1> 
            </div> 
            <div style={{ padding: 20 }}> 
                <p> 
                    لكل لأداء بمحاولة من. مدينة  
                    الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى 
                    عجّل مشروط الخاسرة قد.  
                    من الذود تكبّد بين, و لها واحدة الأراضي. عل 
                    الصفحة والروسية يتم,  
                    أي للحكومة استعملت شيء. أم وصل زهاء اليا 
                </p> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图排版列表国际化

注意： 在上面的输出中，文本从中心开始，即正常文本。

示例2： 下面的示例演示了阿拉伯语的使用方式，以从右向左的文本格式。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ padding: 20, textAlign: "center", 
                color: "green" }}> 
                <h1> 
                    ReactJS BluePrint Typography Lists 
                    Internationalization 
                </h1> 
            </div> 
            <div style={{ padding: 20 }}> 
                <p class="bp4-rtl"> 
                    لكل لأداء بمحاولة من. مدينة  
                    الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى 
                    عجّل مشروط الخاسرة قد. من  
                    الذود تكبّد بين, و لها واحدة الأراضي. عل 
                    الصفحة والروسية يتم,  
                    أي للحكومة استعملت شيء. أم وصل زهاء اليا 
                </p> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React.js蓝图排版列表国际化