Skip to content

Commit

Permalink
feat: radio 组件设置 button 形状时支持改变大小 (#2701)
Browse files Browse the repository at this point in the history
  • Loading branch information
@iCheng
iCheng authored Dec 13, 2023
1 parent afd305e commit 70b0636
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 18 deletions.
4 changes: 2 additions & 2 deletions src/packages/__VUE/radio/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal">
<nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
<nut-radio shape="button" label="1" size="large">{{ translate('option1') }}</nut-radio>
<nut-radio disabled shape="button" label="2">{{ translate('option2') }}</nut-radio>
<nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
</nut-radio-group>
Expand All @@ -40,7 +40,7 @@
</nut-cell>
<nut-cell>
<nut-radio-group v-model="state.radioVal" direction="horizontal">
<nut-radio shape="button" label="1">{{ translate('option1') }}</nut-radio>
<nut-radio shape="button" label="1" size="large">{{ translate('option1') }}</nut-radio>
<nut-radio shape="button" label="2">{{ translate('option2') }}</nut-radio>
<nut-radio shape="button" label="3">{{ translate('option3') }}</nut-radio>
</nut-radio-group>
Expand Down
5 changes: 3 additions & 2 deletions src/packages/__VUE/radio/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Bind the **label** of the current option through **v-model**. And it must be use
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal">
<nut-radio shape="button" label="1">Option 1</nut-radio>
<nut-radio shape="button" label="1" size="large">Option 1</nut-radio>
<nut-radio disabled shape="button" label="2">Option 2</nut-radio>
<nut-radio shape="button" label="3">Option 3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -78,7 +78,7 @@ const radioVal = ref('1');
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio shape="button" label="1">Option 1</nut-radio>
<nut-radio shape="button" label="1" size="large">Option 1</nut-radio>
<nut-radio shape="button" label="2">Option 2</nut-radio>
<nut-radio shape="button" label="3">Option 3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -187,6 +187,7 @@ const handleChange = (value) => {
| icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` |
| label | Radio box ID | string \| number \| boolean | - |
| shape | Shape, optional values are `button`、`round` | string | `round` |
| size | Can be set to `large` `small` `mini` `normal`, when `shape` = `button` | string | `normal` |

### Radio Slots

Expand Down
5 changes: 3 additions & 2 deletions src/packages/__VUE/radio/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ app.use(RadioGroup);
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio shape="button" label="1" size="large">选项1</nut-radio>
<nut-radio disabled shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -78,7 +78,7 @@ const radioVal = ref('1');
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio shape="button" label="1" size="large">选项1</nut-radio>
<nut-radio shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -187,6 +187,7 @@ const handleChange = (value) => {
| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
| label | 单选框标识 | string \| number \| boolean | - |
| shape | 形状，可选值为 `button`、`round` | string | `round` |
| size | 尺寸，可选值为 `large` `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |

### Radio Slots

Expand Down
5 changes: 3 additions & 2 deletions src/packages/__VUE/radio/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ app.use(RadioGroup);
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio shape="button" label="1" size="large">选项1</nut-radio>
<nut-radio disabled shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -78,7 +78,7 @@ const radioVal = ref('1');
</nut-cell>
<nut-cell>
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio shape="button" label="1">选项1</nut-radio>
<nut-radio shape="button" label="1" size="large">选项1</nut-radio>
<nut-radio shape="button" label="2">选项2</nut-radio>
<nut-radio shape="button" label="3">选项3</nut-radio>
</nut-radio-group>
Expand Down Expand Up @@ -187,6 +187,7 @@ const handleChange = (value) => {
| icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18` |
| label | 单选框标识 | string \| number \| boolean | - |
| shape | 形状，可选值为 `button`、`round` | string | `round` |
| size | 尺寸，可选值为 `large` `small` `mini` `normal`，仅在 shape 为 `button` 时生效 | string | `normal` |

### Radio Slots

Expand Down
20 changes: 20 additions & 0 deletions src/packages/__VUE/radio/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,26 @@
color: $radio-label-disable-color;
border: none;
}

&--large {
height: $button-large-height;
line-height: $button-large-line-height;
font-size: $button-large-font-size;
}

&--small {
height: $button-small-height;
line-height: $button-small-line-height;
padding: $button-small-padding;
font-size: $button-small-font-size;
}

&--mini {
height: $button-mini-height;
line-height: $button-mini-line-height;
padding: $button-mini-padding;
font-size: $button-mini-font-size;
}
}

&__label {
Expand Down
15 changes: 10 additions & 5 deletions src/packages/__VUE/radio/index.taro.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts">
import { computed, h, inject } from 'vue';
import { computed, h, inject, PropType, toRefs } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { componentName, create } = createComponent('radio');
import { CheckNormal, CheckChecked } from '@nutui/icons-vue-taro';
import { pxCheck } from '@/packages/utils/pxCheck';
import { RADIO_KEY } from './types';
import { RADIO_KEY, RadioButtonSize } from './types';
export default create({
components: {
Expand All @@ -27,9 +27,14 @@ export default create({
iconSize: {
type: [String, Number],
default: ''
},
size: {
type: String as PropType<RadioButtonSize>,
default: 'normal'
}
},
setup(props, { slots }) {
const { size } = toRefs(props);
let parent: any = inject(RADIO_KEY, null);
const isCurValue = computed(() => {
Expand Down Expand Up @@ -73,9 +78,9 @@ export default create({
return h(
'view',
{
class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${
props.disabled ? `${componentName}__button--disabled` : ''
}`
class: `${componentName}__button ${
isCurValue.value && `${componentName}__button--active`
} ${componentName}__button--${size.value} ${props.disabled ? `${componentName}__button--disabled` : ''}`
},
slots.default?.()
);
Expand Down
15 changes: 10 additions & 5 deletions src/packages/__VUE/radio/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<script lang="ts">
import { Component, computed, h, inject } from 'vue';
import { Component, computed, h, inject, PropType, toRefs } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { componentName, create } = createComponent('radio');
import { CheckNormal, CheckChecked } from '@nutui/icons-vue';
import { pxCheck } from '@/packages/utils/pxCheck';
import { RADIO_KEY } from './types';
import { RADIO_KEY, RadioButtonSize } from './types';
export default create({
components: {
Expand All @@ -27,9 +27,14 @@ export default create({
iconSize: {
type: [String, Number],
default: ''
},
size: {
type: String as PropType<RadioButtonSize>,
default: 'normal'
}
},
setup(props, { slots }) {
const { size } = toRefs(props);
let parent: any = inject(RADIO_KEY, null);
const isCurValue = computed(() => {
Expand Down Expand Up @@ -73,9 +78,9 @@ export default create({
return h(
'view',
{
class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${
props.disabled ? `${componentName}__button--disabled` : ''
}`
class: `${componentName}__button ${
isCurValue.value && `${componentName}__button--active`
} ${componentName}__button--${size.value} ${props.disabled ? `${componentName}__button--disabled` : ''}`
},
slots.default?.()
);
Expand Down
1 change: 1 addition & 0 deletions src/packages/__VUE/radio/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export const RADIO_KEY = Symbol('nut-radio');
export type RadioButtonSize = 'large' | 'normal' | 'small' | 'mini';

0 comments on commit 70b0636

Please sign in to comment.