Skip to content

docs(cn): plugins/community/scrollbar translation #45

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jun 10, 2021
Merged

docs(cn): plugins/community/scrollbar translation #45

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b493a8
docs(cn): plugins/community/scrollbar translation
Megrax Jun 9, 2021
d7b2f5e
docs(cn): plugins/community/scrollbar translation
Megrax Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions plugins/community/scrollbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# @windicss/plugin-scrollbar

Adds styling utilities for scrollbars in Firefox and webkit-based browsers. This plugin is modified based on [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) to adapt to Windi CSS.
为 Firefox 和基于 webkit 的浏览器添加滚动条的样式工具类。此插件是基于 [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) 修改来适配 Windi CSS 的。

## Installation
## 安装 {#installation}

```bash
npm install --save-dev @windicss/plugin-scrollbar
```

Add it to the plugins array of your Config File.
把它添加到配置文件的 plugins 数组中。

```js
// windi.config.js
Expand All @@ -23,20 +23,20 @@ export default {
}
```

## Usage
## 用法 {#usage}

**NB:** This plugin *styles* scrollbars; it does not force them to appear. Use typical CSS techniques to force content to overflow and trigger a scrollbar.
**特别注意：** 此插件只是给滚动条 **添加样式**；它并不保证滚动条会显示。你应该使用传统的 CSS 技巧来让内容溢出从而触发滚动条。

For every element that you want to style, add either the `.scrollbar` or `.scrollbar-thin` class. You may then add any `scrollbar-track-{color}`, `scrollbar-thumb-{color}` or `hover:scrollbar-thumb-{color}` classes you like. (Note that `hover:scrollbar-thumb-{color}` classes only have effects in webkit-based browsers.)
对于每个你想要添加样式的元素，添加 `.scrollbar` 或 `.scrollbar-thin` 类。如果需要，你也可以添加任何 `scrollbar-track-{color}`，`scrollbar-thumb-{color}` 或者 `hover:scrollbar-thumb-{color}` 类。（请注意 `hover:scrollbar-thumb-{color}` 类只会在基于 webkit 的浏览器上起作用。）

Here's a minimal example (keeping in mind that the `h-32` and `h-64` classes are just there to force the scrollbar to appear):
这里有个简单的例子（注意这里的类名 `h-32` 和 `h-64` 只是为了使滚动条出现）：

```html
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
```

A live version of this demo [can be found here](https://tailwind-scrollbar-example.adoxography.repl.co/).
你可以在这里看到 [在线的演示版本](https://tailwind-scrollbar-example.adoxography.repl.co/)。

This plugin also capable of adding utilties for creating rounded scrollbars (by referencing your configured [border radius](https://tailwindcss.com/docs/border-radius#customizing) settings). However, as they are only supported in Webkit-based browsers, their usage is inadvisable in cross-browser applications. To enable rounded scrollbar utilities, add `'rounded'` to the list of scrollbar variants in your config file. This will add utilities such as `scrollbar-thumb-rounded` or `scrollbar-thumb-rounded-md`.
此插件也可用于添加圆角滚动条（会使用你 [border radius](https://tailwindcss.com/docs/border-radius#customizing) 中的配置）。然而，它们只被基于 webkit 的浏览器支持，所以不建议在跨浏览器应用中使用。把 `rounded` 添加到你配置文件 variants 的 scrollbar 一项中，可以使圆角滚动条工具类生效。这会引入 `scrollbar-thumb-rounded` 和 `scrollbar-thumb-rounded-md` 等工具类。