Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking issue for RTL supporting. #97

Open
20 of 72 tasks
07akioni opened this issue Jun 13, 2021 · 6 comments
Open
20 of 72 tasks

Tracking issue for RTL supporting. #97

07akioni opened this issue Jun 13, 2021 · 6 comments
Labels
help wanted Extra attention is needed pr welcome rtl

Comments

@07akioni
Copy link
Collaborator

07akioni commented Jun 13, 2021

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
@07akioni 07akioni added rtl help wanted Extra attention is needed labels Jun 13, 2021
@07akioni 07akioni pinned this issue Jun 13, 2021
@07akioni 07akioni changed the title About RTL support. About RTL supporting. Jun 13, 2021
@tusen-ai tusen-ai deleted a comment from 07akioni Mar 8, 2022
@Sepush Sepush changed the title About RTL supporting. Tracking issue for RTL supporting. Mar 8, 2022
@Sepush
Copy link
Collaborator

Sepush commented Mar 8, 2022

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

@jahnli
Copy link
Collaborator

jahnli commented Jan 21, 2023

breadcrumb

@vxow
Copy link

vxow commented May 11, 2023

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

@devhus
Copy link

devhus commented Sep 12, 2023

How to enable RTL for these components ?

@alphaelf
Copy link

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
Copy link

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

@jahnli jahnli unpinned this issue Oct 7, 2024
@jahnli jahnli pinned this issue Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed pr welcome rtl
Projects
None yet
Development

No branches or pull requests

7 participants