Description
Overview
RTL(Right to Left) support is a very import feature for the component library. However it'll take great efforts to fulfill the feature since all of the components need to implement extra styles, thus we need your help to achieve the goal.
We've add experimental RTL feature for n-button, n-tag, n-page-header and n-card. If you are interested in contributing to the RTL feature, please reference those components.
You can find the example in the following files.
- ./src/button
- ./src/radio
- ./src/avater
- ./src/badage
- ./src/avatar-group
- ./src/tag
- ./src/card
Open RTL PRs
自动维护：open 且标题/内容包含 RTL 的 PR；用于跟踪 issue #97。
- #4371 feat(upload): support rtl （
upload） https://github.com/tusen-ai/naive-ui/pull/4371 - #4387 feat(timeline): support rtl （
timeline） https://github.com/tusen-ai/naive-ui/pull/4387 - #4391 feat(breadcrumb):
n-breadcrumbsupports RTL （breadcrumb） https://github.com/tusen-ai/naive-ui/pull/4391 - #4392 feat(anchor):
n-anchorsupports RTL （anchor） https://github.com/tusen-ai/naive-ui/pull/4392 - #4394 feat(calendar):
n-calendarsupports RTL （calendar） https://github.com/tusen-ai/naive-ui/pull/4394 - #7104 feat(data-table): Support Scroll rtl （
data-table,table） https://github.com/tusen-ai/naive-ui/pull/7104
Tech Details
Here are some discussion about tech detail about implementation.
In general, Naive UI has an internal useRtl composable to mount & update rtl style on demand. It accepts RTL styles passed from n-config-provider and takes adventage of the style.
The component that supports RTL has a style file in component-name/styles/rtl.ts, which exports { name: 'ComponentName', style: CssRenderStyle }.
Components
Here are some components in need RTL support.If you intresting in it,feel free to commont.We will convert it to issue for you,then you can work on it.
- RTL support for
affix - RTL support for
alert - RTL support for
anchor - RTL support for
auto-complete - RTL support for
back-top - RTL support for
breadcrumb - RTL support for
calendar - RTL support for
card - RTL support for
carousel - RTL support for
cascader - RTL support for
checkbox - RTL support for
code - RTL support for
collapse - RTL support for
collapse-transition - RTL support for
color-picker - RTL support for
data-table - RTL support for
date-picker - RTL support for
description - RTL support for
dialog - RTL support for
divider - RTL support for
drawer - RTL support for
dropdown - RTL support for
dynamic-input - RTL support for
dynamic-tags - RTL support for
element - RTL support for
ellipsis - RTL support for
empty - RTL support for
form - RTL support for
gradient-text - RTL support for
input - RTL support for
input-number - RTL support for
layout - RTL support for
list - RTL support for
loading-bar - RTL support for
log - RTL support for
menu - RTL support for
mention - RTL support for
message - RTL support for
modal - RTL support for
notification - RTL support for
page-header - RTL support for
pagination - RTL support for
popconfirm - RTL support for
popover - RTL support for
popselect - RTL support for
progress - RTL support for
radio - RTL support for
rate - RTL support for
result - RTL support for
scrollbar - RTL support for
select - RTL support for
skeleton - RTL support for
slider - RTL support for
space - RTL support for
spin - RTL support for
statistic - RTL support for
steps - RTL support for
switch - RTL support for
table - RTL support for
tabs - RTL support for
tag - RTL support for
thing - RTL support for
time - RTL support for
time-picker - RTL support for
timeline - RTL support for
tooltip - RTL support for
transfer - RTL support for
tree - RTL support for
tree-select - RTL support for
typography - RTL support for
upload - RTL support for
watermark