## 属性/Props



## Demos


~~~jsx
import React, { useState } from 'react';
import { Radio, ConfigProvider } from '@arco-design/web-react';
import Navbar from '@arco-materials/site-navbar-new';
import { useEffect } from 'react';

const css = document.createElement('style');
const styles = 'html.rtl { direction: rtl }';
css.appendChild(document.createTextNode(styles));
document.getElementsByTagName('head')[0].appendChild(css);
// document.documentElement.classList.add('rtl');

export default function Demo() {
  const [lang, setLang] = useState('zh-CN');
  const [direction, setDirection] = useState('ltr');
  const user = {
    name: 'yangyuhan.79',
    email: 'yangyuhan.79@bytedance.com',
    username: 'yangyuhan.79',
    nickname: '杨雨涵',
    picture:
      'https://s1-imfile.feishucdn.com/static-resource/v1/v2_7e5c5405-3b69-42b8-b3cc-a502426b52bg~?image_size=240x240&cut_type=&quality=&format=png&sticker_format=.webp',
    rolelist: ['DEV'],
    accountType: 'lark',
  };

  useEffect(() => {
    if (direction === 'rtl') {
      document.documentElement.classList.add('rtl');
    } else {
      document.documentElement.classList.remove('rtl');
    }
  }, [direction]);

  return (
    <div>
      <ConfigProvider rtl={direction === 'rtl'}>
        <Navbar
          isHome={false}
          lang={lang}
          hideUser={false}
          hideRtl={false}
          rtl={direction === 'rtl'}
          onChangeLanguage={setLang}
          onChangeRtl={setDirection}
          algoliaTag="react"
          // userSetting={true}
          user={user}
        />
        <Navbar.GlobalNotice />
        <Radio.Group
          type="button"
          style={{ marginTop: 120 }}
          options={['ltr', 'rtl']}
          value={direction}
          onChange={setDirection}
        />
        <a href="https://www.baidu.com" target="_blank" rel="noreferrer">
          百度在这
        </a>
      </ConfigProvider>
    </div>
  );
}

~~~