如何用 Mantine DirectionProvider 支持 RTL 方向并动态切换

如何用 Mantine DirectionProvider 支持 RTL 方向并动态切换【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine如果你的应用要支持阿拉伯语、希伯来语等从右到左RTL书写的语言并且允许用户在使用中随时切换方向就需要mantine/core中的DirectionProvider和useDirection。Mantine 的所有组件都原生支持 RTL 方向但要完成「设置 RTL」和「运行时动态切换」这两件事必须把应用包裹在DirectionProvider中。本文基于 Mantine 官方文档RTL 文档、PostCSS preset 文档给出从包裹应用、设置dir属性到用 hook 切换方向的完整操作路径以及一个可选的 CSSrtlmixin 配置。准备条件一个已安装mantine/core并渲染了MantineProvider的 React 应用。如果你的自定义样式需要按方向区分还需要开发依赖postcss-preset-mantine见后文可选章节。文档明确说明DirectionProvider组件用于给它内部的所有组件设置方向如果你打算使用 RTL 方向或动态改变方向必须用它包裹整个应用。第一步用 DirectionProvider 包裹应用在应用入口处把DirectionProvider放在MantineProvider外层import { DirectionProvider, MantineProvider } from mantine/core; function Demo() { return ( DirectionProvider MantineProvider{/* Your app here */}/MantineProvider /DirectionProvider ); }DirectionProvider支持以下 props来自 RTL 文档export interface DirectionProviderProps { /** Your application */ children: React.ReactNode; /** Direction set as a default value, ltr by default */ initialDirection?: rtl | ltr; /** Determines whether direction should be updated on mount based on the dir attribute set on the root element (usually the html element), true by default */ detectDirection?: boolean; }两个参数的适用条件initialDirection挂载前的默认方向默认ltr。如果你的应用默认就是 RTL可以设为rtl。detectDirection是否在挂载时根据根元素通常是html元素上的dir属性更新方向默认true。这意味着只要html上写了dirrtl应用挂载后方向会自动同步为 RTL无需额外代码。第二步在 html 元素上设置 dir 属性文档要求你必须在应用根元素上设置dir属性通常是html元素!doctype html !-- Set direction attribute on html element -- html dirrtl head/head body/body /html当detectDirection为true默认时DirectionProvider会在挂载时读取这个值来设置方向。注意文档说明不同框架中如何给html元素写dir属性不在该指南范围内需要按你自己框架的文档操作。另外DirectionProvider 实现中当detectDirection开启时DirectionProvider会通过MutationObserver持续监听html元素的dir属性变化只要外部代码修改了dir属性取值是rtl或ltrProvider 内部的方向状态会同步更新。所以直接修改document.documentElement的dir属性也是一种可行的切换入口官方 Storybook 用例DirectionProvider.story.tsx就是这样做的button onClick{() document.documentElement.setAttribute(dir, ltr)}set ltr/button button onClick{() document.documentElement.setAttribute(dir, rtl)}set rtl/button第三步用 useDirection 动态切换方向在组件内做方向控制使用useDirectionhook它返回dir– 当前方向setDirection– 设置方向的函数toggleDirection– 把方向切换为相反值的函数。官方文档中的方向切换控件示例directionControl 示例import { ActionIcon, useDirection } from mantine/core; import { TextAlignLeftIcon, TextAlignRightIcon } from phosphor-icons/react; function Demo() { const { toggleDirection, dir } useDirection(); return ( ActionIcon onClick{() toggleDirection()} variantdefault sizelg {dir rtl ? ( TextAlignLeftIcon / ) : ( TextAlignRightIcon / )} /ActionIcon ); }判断下一步的依据useDirection的setDirection在 DirectionProvider 实现中同时做了两件事——更新 React 状态并检查document.documentElement的dir属性若与目标值不一致就写入dir属性。因此切换方向的验证方式很直接点击控件或调用setDirection(rtl)后在浏览器中查看html元素dir属性应变为rtluseDirection返回的dir值同步变为rtl组件布局文本对齐、图标朝向、菜单/抽屉等浮层位置随之镜像。由于所有 Mantine 组件开箱支持 RTL方向状态一变包裹在DirectionProvider内的组件会自动按新方向渲染不需要逐组件配置。可选为自定义 CSS 添加 RTL 覆盖Mantine 组件本身不需要额外样式但如果你自己写了.css文件里的方向相关样式比如margin-left可以借助postcss-preset-mantine的rtlmixin。文档说明该 preset 不是必需的但「高度推荐」且所有涉及样式的示例都假设你已安装它。安装为开发依赖对应 PostCSS preset 文档中的安装脚本yarn add --dev postcss-preset-mantine或npm install --save-dev postcss-preset-mantine然后把 preset 加到项目根目录的postcss.config.cjsmodule.exports { plugins: { postcss-preset-mantine: {}, }, };之后就可以在.css文件里用mixin rtl写仅在dirrtl时生效的样式。官方 rtlMixin 示例.demo { text-align: center; color: var(--mantine-color-white); padding: var(--mantine-spacing-md); /* LTR styles */ background-color: var(--mantine-color-blue-filled); mixin rtl { /* RTL styles override LTR styles */ background-color: var(--mantine-color-red-filled); } }文档说明rtlmixin 会在父元素通常是html /设置了dirrtl时生效编译后等价于[dirrtl] .demo选择器因此它与DirectionProvider同步写入的dir属性是联动的。对应的ltrmixin 同理作用于dirltrnot-rtl/not-ltrmixin 则在方向为相反值或未设置时生效。注意设置 PostCSS 的具体方式可能因构建工具/框架而异文档建议参照对应框架的指南操作。限制与注意事项DirectionProvider的挂载检测只认dir属性取值为rtl或ltr的情况见 DirectionProvider.tsxhtml上的dir若为其他值方向保持initialDirection。useDirection依赖DirectionProvider提供的上下文不在 Provider 内使用时拿到的是默认值dir为ltr切换函数为无效的空操作。rtl/ltrmixin 只在安装了postcss-preset-mantine并配置进 PostCSS 后可用。各框架如何把dir写到html元素文档明确不在本指南范围内需要按所用框架的文档处理。完成以上步骤后你的应用即为包裹DirectionProvider→html上有dir属性 → 通过useDirection的setDirection/toggleDirection切换方向并可通过检查html dir属性与组件镜像效果确认切换生效。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考