style: decentralized less var (#8369)
* style: decentralized less var * chore: remove emtpy var file
This commit is contained in:
+15
-15
@@ -190,23 +190,23 @@ export default {
|
||||
|
||||
### TabbarItem Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
| ---- | ----------- | -------------------------- |
|
||||
| icon | Custom icon | _active: boolean_ |
|
||||
| Name | Description | SlotProps |
|
||||
| ---- | ----------- | ----------------- |
|
||||
| icon | Custom icon | _active: boolean_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @tabbar-height | `50px` | - |
|
||||
| @tabbar-z-index | `1` | - |
|
||||
| @tabbar-background-color | `@white` | - |
|
||||
| @tabbar-item-font-size | `@font-size-sm` | - |
|
||||
| @tabbar-item-text-color | `@gray-7` | - |
|
||||
| @tabbar-item-active-color | `@blue` | - |
|
||||
| @tabbar-item-active-background-color | `@tabbar-background-color` | - |
|
||||
| @tabbar-item-line-height | `1` | - |
|
||||
| @tabbar-item-icon-size | `22px` | - |
|
||||
| @tabbar-item-margin-bottom | `4px` | - |
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------------------ | --------------- | ----------- |
|
||||
| @tabbar-height | `50px` | - |
|
||||
| @tabbar-z-index | `1` | - |
|
||||
| @tabbar-background-color | `@white` | - |
|
||||
| @tabbar-item-font-size | `@font-size-sm` | - |
|
||||
| @tabbar-item-text-color | `@gray-7` | - |
|
||||
| @tabbar-item-active-color | `@blue` | - |
|
||||
| @tabbar-item-active-background-color | `@white` | - |
|
||||
| @tabbar-item-line-height | `1` | - |
|
||||
| @tabbar-item-icon-size | `22px` | - |
|
||||
| @tabbar-item-margin-bottom | `4px` | - |
|
||||
|
||||
+16
-16
@@ -187,8 +187,8 @@ export default {
|
||||
|
||||
### Tabbar Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | -------------- | ---------------------------------- |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | -------------- | -------------------------- |
|
||||
| change | 切换标签时触发 | _active: number \| string_ |
|
||||
|
||||
### TabbarItem Props
|
||||
@@ -206,23 +206,23 @@ export default {
|
||||
|
||||
### TabbarItem Slots
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ---- | ---------- | ---------------------- |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| ---- | ---------- | ----------------- |
|
||||
| icon | 自定义图标 | _active: boolean_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------ | -------------------------- | ---- |
|
||||
| @tabbar-height | `50px` | - |
|
||||
| @tabbar-z-index | `1` | - |
|
||||
| @tabbar-background-color | `@white` | - |
|
||||
| @tabbar-item-font-size | `@font-size-sm` | - |
|
||||
| @tabbar-item-text-color | `@gray-7` | - |
|
||||
| @tabbar-item-active-color | `@blue` | - |
|
||||
| @tabbar-item-active-background-color | `@tabbar-background-color` | - |
|
||||
| @tabbar-item-line-height | `1` | - |
|
||||
| @tabbar-item-icon-size | `22px` | - |
|
||||
| @tabbar-item-margin-bottom | `4px` | - |
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------ | --------------- | ---- |
|
||||
| @tabbar-height | `50px` | - |
|
||||
| @tabbar-z-index | `1` | - |
|
||||
| @tabbar-background-color | `@white` | - |
|
||||
| @tabbar-item-font-size | `@font-size-sm` | - |
|
||||
| @tabbar-item-text-color | `@gray-7` | - |
|
||||
| @tabbar-item-active-color | `@blue` | - |
|
||||
| @tabbar-item-active-background-color | `@white` | - |
|
||||
| @tabbar-item-line-height | `1` | - |
|
||||
| @tabbar-item-icon-size | `22px` | - |
|
||||
| @tabbar-item-margin-bottom | `4px` | - |
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '../style/var.less';
|
||||
@import './var.less';
|
||||
@import '../style/mixins/safe-area.less';
|
||||
|
||||
.van-tabbar {
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '../style/var.less';
|
||||
|
||||
@tabbar-height: 50px;
|
||||
@tabbar-z-index: 1;
|
||||
@tabbar-background-color: @white;
|
||||
Reference in New Issue
Block a user