Tracking issue for RTL supporting.

[07akioni]

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

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 caroulsel
• 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-piker
• RTL support for data-table
• RTL support for date-piker
• RTL support for description
• RTL support for dailog
• 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

[Sepush]

If you are first time to use tacking issue check our previous practice here
#1842

[jahnli]

breadcrumb

[vxow]

@07akioni 很多样式用margin写的，建议改为flex的gap，这样rtl就不用额外转换样式了

[devhus]

How to enable RTL for these components ?

[alphaelf]

add button component to tasks too, when use icon in button, margin-left: 0; must change to margin-right: 0; in class .n-button__icon

[hnasher-immap]

when enabling selection in columns for NDatableTable, the options does not show when the page direction is RTL.
{
type: "selection",
options:["all", "none"]
}