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

fix(statistic): fix value style problem #2600

Merged
merged 1 commit into from
Jul 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
21 changes: 5 additions & 16 deletions packages/arco-vue-docs/docs/start.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,31 +68,20 @@ export default defineConfig({

Note: This method does not process the components manually imported by the user in the script, such as the Message component. The user still needs to manually import the style file corresponding to the component, such as `@arco-design/web-vue/es/message/style/css.js` .

## On-demand Import
## On-demand loading and component library themes (Arco plugin)

You can also use manual import to load components on demand. The component library already supports Tree Shaking by default. It can be used with [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) to automatically load component styles.
In addition, you can also use the Vite plugin provided by Arco for on-demand loading and component library style configuration, [@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/ packages/plugin-vite-vue) plugin will automatically load component styles.

```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import { vitePluginForArco } from '@arco-plugins/vite-vue'
export default defineConfig({
plugins: [
vue(),
createStyleImportPlugin({
libs: [
{
libraryName: '@arco-design/web-vue',
esModule: true,
resolveStyle: (name) => {
// css
return `@arco-design/web-vue/es/${name}/style/css.js`
// less
return `@arco-design/web-vue/es/${name}/style/index.js`
},
}
]
vitePluginForArco({
style: 'css'
})
]
})
Expand Down
21 changes: 5 additions & 16 deletions packages/arco-vue-docs/docs/start.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,31 +66,20 @@ export default defineConfig({

注意:这种方法并不会处理用户在 script 中手动导入的组件,比如 Message 组件,用户仍需要手动导入组件对应的样式文件,例如 `@arco-design/web-vue/es/message/style/css.js`。

## 按需加载
## 按需加载与组件库主题(Arco 插件)

也可以使用手动导入的方式按需加载组件,组件库已经默认支持 Tree Shaking。可以配合 [vite-plugin-style-import](https://github.com/vbenjs/vite-plugin-style-import) 插件自动加载组件样式
另外也可以使用 Arco 提供的 Vite 插件进行按需加载和组件库样式配置,[@arco-plugins/vite-vue](https://github.com/arco-design/arco-plugins/tree/main/packages/plugin-vite-vue) 插件会自动加载组件样式

```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import { vitePluginForArco } from '@arco-plugins/vite-vue'
export default defineConfig({
plugins: [
vue(),
createStyleImportPlugin({
libs: [
{
libraryName: '@arco-design/web-vue',
esModule: true,
resolveStyle: (name) => {
// css
return `@arco-design/web-vue/es/${name}/style/css.js`
// less
return `@arco-design/web-vue/es/${name}/style/index.js`
},
}
]
vitePluginForArco({
style: 'css'
})
]
})
Expand Down
4 changes: 2 additions & 2 deletions packages/web-vue/components/statistic/style/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@

&-title {
margin-bottom: @statistic-margin-title-bottom;
font-size: @statistic-font-title-size;
color: @statistic-color-title-text;
font-size: @statistic-font-title-size;
}

&-content {
Expand All @@ -21,7 +21,7 @@
white-space: nowrap;

&-integer {
font-size: @statistic-font-int-size;
font-size: inherit;
white-space: nowrap;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/web-vue/components/statistic/style/token.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@statistic-margin-extra-top: @spacing-4;
@statistic-font-value-size: @font-size-body-3;
@statistic-font-int-size: 26px;
@statistic-font-decimal-size: @statistic-font-int-size;
@statistic-font-decimal-size: inherit;
@statistic-font-value-weight: @font-weight-500;
@statistic-color-value-text: var(~'@{arco-cssvars-prefix}-color-text-1');
@statistic-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
Expand Down
12 changes: 12 additions & 0 deletions packages/web-vue/components/table/TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,14 @@ table 组件提供了内部元素的自定义插槽,这些插槽不同于普
</td>
</template>
```

### 2. 关于数据中的 `row-key` 设置

表格默认会通过数据中设置的 `key` 字段来唯一定位行数据,在提供数据时请确保行数据中都设置了 `key` 字段。这个字段在开启选择器等功能时为必要字段,如果想要更换默认的字段名,可以修改 `row-key` 进行设置。

---


## en-US
The table component provides custom slots for internal elements, which are different from normal slots and have certain restrictions on what the user can pass in.
Because the slot of vue does not provide a way to send out children and render them in the slot, we have done some special processing for the element slot in the table, and will append the original children to the content passed in by the user to ensure that children Normal rendering of the element.
Expand Down Expand Up @@ -166,4 +173,9 @@ example 2:
</td>
</template>
```

### 2. About the `row-key` setting in the data

By default, the table will uniquely locate the row data through the `key` field set in the data. When providing data, please ensure that the `key` field is set in the row data. This field is a necessary field when enabling functions such as selectors. If you want to change the default field name, you can modify `row-key` to set it.

---
Loading