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.

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

Jump to bottom

feat: Rate Custom 迁移到微信 #992

Merged
merged 5 commits into from
Dec 19, 2023
Merged

feat: Rate Custom 迁移到微信 #992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cedc586
feat: 新增 range custom
Dec 19, 2023
d68be0f
fix: 重命名标签
Dec 19, 2023
cf3cbe7
fix: 修复 axml
Dec 19, 2023
a533001
chore: 更新 css
Dec 19, 2023
d08a7df
feat: 更新 demo
Dec 19, 2023
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
27 changes: 18 additions & 9 deletions compiled/alipay/demo/pages/Rate/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,23 @@
</ant-container>

<ant-container title="受控模式">
<ant-rate
value="{{ value }}"
onChange="handleChange" />
<view style="margin-top: 8px">
<ant-stepper
value="{{ value }}"
min="{{ 0 }}"
max="{{ 5 }}"
onChange="handleChange" />
<view style="display: flex; justify-content: space-around">
<view>
<ant-rate
value="{{ value }}"
onChange="handleChange" />

<view style="margin-top: 8px">
<ant-stepper
value="{{ value }}"
min="{{ 0 }}"
max="{{ 5 }}"
onChange="handleChange" />
</view>
</view>
<view>
<ant-rate value="{{ value }}" />
<view class="description">无 onChange 函数</view>
</view>
</view>
</ant-container>
80 changes: 40 additions & 40 deletions compiled/alipay/demo/pages/RateCustom/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,84 @@
<container title="自定义间距">
<rate
defaultValue="{{3}}"
gutter="{{8}}" />
<ant-container title="自定义间距">
<ant-rate
defaultValue="{{ 3 }}"
gutter="{{ 8 }}" />
<view class="description">8px</view>

<rate
defaultValue="{{4}}"
gutter="{{16}}" />
<ant-rate
defaultValue="{{ 4 }}"
gutter="{{ 16 }}" />
<view class="description">16px</view>
</container>
</ant-container>

<container title="自定义大小">
<rate
defaultValue="{{3}}"
<ant-container title="自定义大小">
<ant-rate
defaultValue="{{ 3 }}"
className="rate" />
<view class="description">30px</view>

<rate
defaultValue="{{3}}"
<ant-rate
defaultValue="{{ 3 }}"
style="font-size: 40px" />
<view class="description">40px</view>
</container>
</ant-container>

<container title="自定义颜色">
<rate
defaultValue="{{3}}"
<ant-container title="自定义颜色">
<ant-rate
defaultValue="{{ 3 }}"
characterClassName="star"
characterActiveClassName="star-active" />
<view class="description">基础</view>

<rate
defaultValue="{{3}}"
<ant-rate
defaultValue="{{ 3 }}"
characterClassName="star-gradient"
characterActiveClassName="star-active-gradient" />
<view class="description">渐变</view>
</container>
</ant-container>

<container title="自定义图标">
<rate defaultValue="{{3}}">
<icon
<ant-container title="自定义图标">
<ant-rate defaultValue="{{ 3 }}">
<ant-icon
slot="character"
type="HeartFill" />
</rate>
</ant-rate>
<view class="description">自定义为HeartFill</view>

<rate
defaultValue="{{3.5}}"
<ant-rate
defaultValue="{{ 3.5 }}"
allowHalf>
<icon
<ant-icon
slot="character"
type="StarOutline" />
</rate>
</ant-rate>
<view class="description">自定义为StarOutline</view>

<rate
defaultValue="{{3.5}}"
<ant-rate
defaultValue="{{ 3.5 }}"
allowHalf
characterClassName="character">
<view slot="character">正</view>
</rate>
</ant-rate>
<view class="description">自定义为正</view>

<rate
defaultValue="{{2.5}}"
<ant-rate
defaultValue="{{ 2.5 }}"
allowHalf
characterClassName="character">
<view slot="character">A</view>
</rate>
</ant-rate>
<view class="description">自定义为A</view>

<rate
defaultValue="{{2.5}}"
<ant-rate
defaultValue="{{ 2.5 }}"
allowHalf
gutter="{{20}}"
gutter="{{ 20 }}"
characterClassName="character">
<view
slot="character"
slot-scope="rate">
{{rate.index}}
{{ rate.index }}
</view>
</rate>
</ant-rate>
<view class="description">自定义为索引</view>
</container>
</ant-container>
6 changes: 3 additions & 3 deletions compiled/alipay/demo/pages/RateCustom/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
Page({
onChange (value) {
console.log(value);
},
onChange: function (value) {
console.log(value);
},
});
6 changes: 3 additions & 3 deletions compiled/alipay/demo/pages/RateCustom/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"defaultTitle": "Rate",
"usingComponents": {
"rate": "../../../src/Rate/index",
"icon": "../../../src/Icon/index",
"container": "../../../src/Container/index"
"ant-rate": "../../../src/Rate/index",
"ant-icon": "../../../src/Icon/index",
"ant-container": "../../../src/Container/index"
},
"allowsBounceVertical": "NO"
}
15 changes: 12 additions & 3 deletions compiled/alipay/demo/pages/RateCustom/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
@import "../../../src/style/themes/color.less";
@import '../../../src/style/themes/color.less';

.star {
color: rgb(118, 118, 118);
}

.star-active {
color: red;

}

.description {
Expand All @@ -14,17 +15,25 @@
}

.star-gradient {
background-image: linear-gradient(to right, rgb(151, 151, 151), rgb(255, 255, 255),);
background-image: linear-gradient(
to right,
rgb(151, 151, 151),
rgb(255, 255, 255)
);
-webkit-background-clip: text;


color: transparent;
}

.star-active-gradient {
background-image: linear-gradient(to right, orange, yellow);
-webkit-background-clip: text;


color: transparent;
}

.character {
font-size: 40px;
}
}
4 changes: 2 additions & 2 deletions compiled/alipay/src/Rate/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
name="character"
index="{{ index }}"
isActive="{{ true }}">
<icon type="StarFill" />
<ant-icon type="StarFill" />
</slot>
</view>
<view
class="ant-rate-star-icon {{ mixin.value >= index + 1 ? 'ant-rate-star-icon-active' + ' ' + (characterClassName || '') + ' ' + (characterActiveClassName || '') : characterClassName }}">
<slot
name="character"
index="{{ index }}">
<icon type="StarFill" />
<ant-icon type="StarFill" />
</slot>
</view>
</view>
Expand Down
6 changes: 3 additions & 3 deletions compiled/alipay/src/Rate/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"component": true,
"usingComponents": {
"icon": "../Icon/index"
"component": true,
"usingComponents": {
"ant-icon": "../Icon/index"
}
}
1 change: 1 addition & 0 deletions compiled/alipay/src/Rate/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,5 @@
overflow: hidden;
}
}

}
1 change: 1 addition & 0 deletions compiled/wechat/app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"pages": [
"demo/pages/RateCustom/index",
"demo/pages/RadioGroup/index",
"demo/pages/Radio/index",
"demo/pages/Rate/index",
Expand Down
27 changes: 18 additions & 9 deletions compiled/wechat/demo/pages/Rate/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,23 @@
</ant-container>

<ant-container title="受控模式">
<ant-rate
value="{{ value }}"
bind:change="handleChange" />
<view style="margin-top: 8px">
<ant-stepper
value="{{ value }}"
min="{{ 0 }}"
max="{{ 5 }}"
bind:change="handleChange" />
<view style="display: flex; justify-content: space-around">
<view>
<ant-rate
value="{{ value }}"
bind:change="handleChange" />

<view style="margin-top: 8px">
<ant-stepper
value="{{ value }}"
min="{{ 0 }}"
max="{{ 5 }}"
bind:change="handleChange" />
</view>
</view>
<view>
<ant-rate value="{{ value }}" />
<view class="description">无 onChange 函数</view>
</view>
</view>
</ant-container>
5 changes: 5 additions & 0 deletions compiled/wechat/demo/pages/RateCustom/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Page({
onChange: function (value) {
console.log(value);
},
});
9 changes: 9 additions & 0 deletions compiled/wechat/demo/pages/RateCustom/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"defaultTitle": "Rate",
"usingComponents": {
"ant-rate": "../../../src/Rate/index",
"ant-icon": "../../../src/Icon/index",
"ant-container": "../../../src/Container/index"
},
"allowsBounceVertical": "NO"
}
37 changes: 37 additions & 0 deletions compiled/wechat/demo/pages/RateCustom/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<ant-container title="自定义间距">
<ant-rate
defaultValue="{{ 3 }}"
gutter="{{ 8 }}" />
<view class="description">8px</view>

<ant-rate
defaultValue="{{ 4 }}"
gutter="{{ 16 }}" />
<view class="description">16px</view>
</ant-container>

<ant-container title="自定义大小">
<ant-rate
defaultValue="{{ 3 }}"
className="rate" />
<view class="description">30px</view>

<ant-rate
defaultValue="{{ 3 }}"
style="font-size: 40px" />
<view class="description">40px</view>
</ant-container>

<ant-container title="自定义颜色">
<ant-rate
defaultValue="{{ 3 }}"
characterClassName="star"
characterActiveClassName="star-active" />
<view class="description">基础</view>

<ant-rate
defaultValue="{{ 3 }}"
characterClassName="star-gradient"
characterActiveClassName="star-active-gradient" />
<view class="description">渐变</view>
</ant-container>
23 changes: 23 additions & 0 deletions compiled/wechat/demo/pages/RateCustom/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.star {
color: #767676;
}
.star-active {
color: red !important;
}
.description {
margin: 4px 0 16px 0;
color: #333333;
}
.star-gradient {
background-image: linear-gradient(to right, #979797, #ffffff);
-webkit-background-clip: text;
color: transparent !important;
}
.star-active-gradient {
background-image: linear-gradient(to right, orange, yellow);
-webkit-background-clip: text;
color: transparent !important;
}
.character {
font-size: 40px;
}
6 changes: 3 additions & 3 deletions compiled/wechat/src/Rate/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"component": true,
"usingComponents": {
"icon": "../Icon/index"
"component": true,
"usingComponents": {
"ant-icon": "../Icon/index"
}
}
4 changes: 2 additions & 2 deletions compiled/wechat/src/Rate/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
<view
wx:if="{{ allowHalf && mixin.value === index + 0.5 }}"
class="ant-rate-star-icon-active {{ characterClassName || '' }} {{ characterActiveClassName || '' }} ant-rate-star-icon-half-active">
<icon type="StarFill" />
<ant-icon type="StarFill" />
</view>
<view
class="ant-rate-star-icon {{ mixin.value >= index + 1 ? 'ant-rate-star-icon-active' + ' ' + (characterClassName || '') + ' ' + (characterActiveClassName || '') : characterClassName }}">
<icon type="StarFill" />
<ant-icon type="StarFill" />
</view>
</view>
</block>
Expand Down
Loading
Loading