# 快速上手

本节将介绍如何在项目中使用 dolphin-intl-ui。

# 新建项目中使用 dolphin-intl-ui

使用 dolphin-weex-cli 初始化项目，新项目中已经集成了dolphin-intl-ui，命令如下

 npm install -g dolphin-weex-cli
 mkdir my-project && cd my-project
 dolphin init webpack
1
2
3

# 旧项目中使用 dolphin-intl-ui

安装 dolphin-intl-ui，命令如下

npm install -S dolphin-intl-ui
1

dolphin-intl-ui 2.5.10 累计 64 个组件支持 RTL（从右到左）布局，支持情况见各组件参数表。业务页面显式控制 isRTL，默认为 false。组件参数及 JS 配置对象使用 isRTL；Vue 模板传入 :is-r-t-l="isRTL"，不依赖全局语言检测或 direction: rtl。

<template>
  <div>
    <dof-button :is-r-t-l="isRTL" :need-dark-mode="true" text="确定" />
    <dof-slider :is-r-t-l="isRTL" :value="50">
      <dof-slider-scale :value="50">50</dof-slider-scale>
    </dof-slider>
  </div>
</template>

<script>
import { DofButton, DofSlider, DofSliderScale } from 'dolphin-intl-ui'

export default {
  components: { DofButton, DofSlider, DofSliderScale },
  data() {
    return { isRTL: true }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

RTL 可与 needDarkMode 同时使用，暗黑主题接入见 接入说明。父组件会向内置子组件透传方向；业务插槽和自定义子组件需单独传入 isRTL。SliderScale 自动继承 Slider 的方向。滑块数值、选项值和事件索引保持原有逻辑含义，业务数据无需因 RTL 反转。

← 设计原则 →