zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(sites): [button, button-group]: demo style optimize (#1067)

This commit is contained in:
gimmyhehe 2023-12-08 16:41:40 +08:00 committed by GitHub
parent 0979b800f7
commit 154a46189c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 106 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
examples/sites/demos/pc/app/button-group/button-group-multiple-composition-api.vue
View File

@ -10,15 +10,15 @@ import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
const checkedVal = ref('Button1') const checkedVal = ref('Button1')
const groupData = ref([ const groupData = ref([
{ text: 'Button1', value: 'Button1' }, { text: 'Button01', value: 'Button01' },
{ text: 'Button2', value: 'Button2' }, { text: 'Button02', value: 'Button02' },
{ text: 'Button3', value: 'Button3' }, { text: 'Button03', value: 'Button03' },
{ text: 'Button4', value: 'Button4' }, { text: 'Button04', value: 'Button04' },
{ text: 'Button5', value: 'Button5' }, { text: 'Button05', value: 'Button05' },
{ text: 'Button6', value: 'Button6' }, { text: 'Button06', value: 'Button06' },
{ text: 'Button7', value: 'Button7' }, { text: 'Button07', value: 'Button07' },
{ text: 'Button8', value: 'Button8' }, { text: 'Button08', value: 'Button08' },
{ text: 'Button9', value: 'Button9' }, { text: 'Button09', value: 'Button09' },
{ text: 'Button10', value: 'Button10' }, { text: 'Button10', value: 'Button10' },
{ text: 'Button11', value: 'Button11' }, { text: 'Button11', value: 'Button11' },
{ text: 'Button12', value: 'Button12' } { text: 'Button12', value: 'Button12' }

18
examples/sites/demos/pc/app/button-group/button-group-multiple.vue
View File

@ -15,15 +15,15 @@ export default {
return { return {
checkedVal: 'Button1', checkedVal: 'Button1',
groupData: [ groupData: [
{ text: 'Button1', value: 'Button1' }, { text: 'Button01', value: 'Button01' },
{ text: 'Button2', value: 'Button2' }, { text: 'Button02', value: 'Button02' },
{ text: 'Button3', value: 'Button3' }, { text: 'Button03', value: 'Button03' },
{ text: 'Button4', value: 'Button4' }, { text: 'Button04', value: 'Button04' },
{ text: 'Button5', value: 'Button5' }, { text: 'Button05', value: 'Button05' },
{ text: 'Button6', value: 'Button6' }, { text: 'Button06', value: 'Button06' },
{ text: 'Button7', value: 'Button7' }, { text: 'Button07', value: 'Button07' },
{ text: 'Button8', value: 'Button8' }, { text: 'Button08', value: 'Button08' },
{ text: 'Button9', value: 'Button9' }, { text: 'Button09', value: 'Button09' },
{ text: 'Button10', value: 'Button10' }, { text: 'Button10', value: 'Button10' },
{ text: 'Button11', value: 'Button11' }, { text: 'Button11', value: 'Button11' },
{ text: 'Button12', value: 'Button12' } { text: 'Button12', value: 'Button12' }

2
examples/sites/demos/pc/app/button-group/change-event-composition-api.vue
View File

@ -16,6 +16,6 @@ const groupData = ref([
]) ])
function handleChange(val) { function handleChange(val) {
Modal.message(`change事件触发了，选中值为${val}`) Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
} }
</script> </script>

2
examples/sites/demos/pc/app/button-group/change-event.vue
View File

@ -23,7 +23,7 @@ export default {
}, },
methods: { methods: {
handleChange(val) { handleChange(val) {
Modal.message(`change事件触发了，选中值为${val}`) Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
} }
} }
} }

2
examples/sites/demos/pc/app/button-group/show-edit-composition-api.vue
View File

@ -24,6 +24,6 @@ const groupData = ref([
]) ])
function handleEdit() { function handleEdit() {
Modal.message('edit事件触发了') Modal.message({ message: 'edit事件触发了', status: 'info' })
} }
</script> </script>

2
examples/sites/demos/pc/app/button-group/show-edit.vue
View File

@ -31,7 +31,7 @@ export default {
}, },
methods: { methods: {
handleEdit() { handleEdit() {
Modal.message('edit事件触发了') Modal.message({ message: 'edit事件触发了', status: 'info' })
} }
} }
} }

5
examples/sites/demos/pc/app/button-group/webdoc/button-group.js
View File

@ -6,10 +6,9 @@ export default {
'demoId': 'basic-usage', 'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' }, 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'desc': {
'zh-CN': 'zh-CN': '<p>通过 <code>data</code> 设置按钮组数据，<code>v-model</code> 设置绑定值。</p>',
'<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
'en-US': 'en-US':
'<p>Set the button group data to type <a="# IButtonGroupData">IButtonGroupData</a> through <code>data</code> , and set the binding value through <code>v model</code> .</p>' '<p>Set the button group data through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
}, },
'codeFiles': ['basic-usage.vue'] 'codeFiles': ['basic-usage.vue']
}, },

2
examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
View File

@ -53,5 +53,7 @@ const IconSearch = iconSearch()
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/basic-usage.vue
View File

@ -64,5 +64,7 @@ export default {
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/click-composition-api.vue
View File

@ -6,6 +6,6 @@
import { Button as TinyButton, Modal } from '@opentiny/vue' import { Button as TinyButton, Modal } from '@opentiny/vue'
function click() { function click() {
Modal.message('click') Modal.message({ message: 'click', status: 'info' })
} }
</script> </script>

2
examples/sites/demos/pc/app/button/click.vue
View File

@ -11,7 +11,7 @@ export default {
}, },
methods: { methods: {
click() { click() {
Modal.message('click') Modal.message({ message: 'click', status: 'info' })
} }
} }
} }

2
examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
View File

@ -44,5 +44,7 @@ const TinyIconSearch = iconSearch()
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/dynamic-disabled.vue
View File

@ -54,5 +54,7 @@ export default {
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/ghost-composition-api.vue
View File

@ -20,5 +20,7 @@ import { Button as TinyButton } from '@opentiny/vue'
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/ghost.vue
View File

@ -26,5 +26,7 @@ export default {
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/icon-composition-api.vue
View File

@ -39,5 +39,7 @@ const TinyIconSearch = iconSearch()
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/icon.vue
View File

@ -50,5 +50,7 @@ export default {
} }
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/loading-composition-api.vue
View File

@ -16,5 +16,7 @@ import { Button as TinyButton } from '@opentiny/vue'
<style scoped> <style scoped>
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/loading.vue
View File

@ -22,5 +22,7 @@ export default {
<style scoped> <style scoped>
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/size-composition-api.vue
View File

@ -68,5 +68,7 @@ const TinyIconEdit = iconEdit()
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/size.vue
View File

@ -79,5 +79,7 @@ export default {
.tiny-button { .tiny-button {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
} }
</style> </style>

2
examples/sites/demos/pc/app/button/text-composition-api.vue
View File

@ -24,7 +24,7 @@ const TinyIconMail = iconMail()
<style scoped> <style scoped>
.title { .title {
margin-top: 16px; margin-top: 16px;
padding: 10px 0 6px 10px; padding: 10px 0 6px 0;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }

2
examples/sites/demos/pc/app/button/text.vue
View File

@ -33,7 +33,7 @@ export default {
<style scoped> <style scoped>
.title { .title {
margin-top: 16px; margin-top: 16px;
padding: 10px 0 6px 10px; padding: 10px 0 6px 0;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }

10
examples/sites/demos/pc/app/button/webdoc/button.js
View File

@ -240,7 +240,8 @@ export default {
}, },
{ {
'name': 'type', 'name': 'type',
'type': "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'", 'type': 'IButtonType',
'typeAnchorName': 'IButtonType',
'defaultValue': '--', 'defaultValue': '--',
'desc': { 'desc': {
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮', 'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
@ -274,5 +275,12 @@ export default {
} }
] ]
} }
],
types: [
{
name: 'IButtonType',
type: 'interface',
code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
}
] ]
} }

70
packages/theme/src/button/index.less
View File

@ -446,58 +446,48 @@
} }
&.@{button-prefix-cls}.@{button-prefix-cls}--large { &.@{button-prefix-cls}.@{button-prefix-cls}--large {
min-width: var(--ti-button-text-size-large-min-width); .button-text-size(
height: var(--ti-button-text-size-large-height); var(--ti-button-text-size-large-min-width),
line-height: calc(var(--ti-button-text-size-large-height) - 2px); var(--ti-button-text-size-large-height),
var(--ti-button-text-size-large-svg-width),
svg { var(--ti-button-text-size-large-svg-height)
width: var(--ti-button-text-size-large-svg-width); );
height: var(--ti-button-text-size-large-svg-height);
}
} }
&.@{button-prefix-cls}.@{button-prefix-cls}--medium { &.@{button-prefix-cls}.@{button-prefix-cls}--medium {
min-width: var(--ti-button-text-size-medium-min-width); .button-text-size(
height: var(--ti-button-text-size-medium-height); var(--ti-button-text-size-medium-min-width),
line-height: calc(var(--ti-button-text-size-medium-height) - 2px); var(--ti-button-text-size-medium-height),
var(--ti-button-text-size-medium-svg-width),
svg { var(--ti-button-text-size-medium-svg-height)
width: var(--ti-button-text-size-medium-svg-width); );
height: var(--ti-button-text-size-medium-svg-height);
}
} }
&.@{button-prefix-cls} { &.@{button-prefix-cls} {
min-width: var(--ti-button-text-size-default-min-width); .button-text-size(
height: var(--ti-button-text-size-default-height); var(--ti-button-text-size-default-min-width),
line-height: calc(var(--ti-button-text-size-default-height) - 2px); var(--ti-button-text-size-default-height),
var(--ti-button-text-size-default-svg-width),
svg { var(--ti-button-text-size-default-svg-height)
width: var(--ti-button-text-size-default-svg-width); );
height: var(--ti-button-text-size-default-svg-height);
}
} }
&.@{button-prefix-cls}.@{button-prefix-cls}--small { &.@{button-prefix-cls}.@{button-prefix-cls}--small {
min-width: var(--ti-button-text-size-small-min-width); .button-text-size(
height: var(--ti-button-text-size-small-height); var(--ti-button-text-size-small-min-width),
line-height: calc(var(--ti-button-text-size-small-height) - 2px); var(--ti-button-text-size-small-height),
var(--ti-button-text-size-small-svg-width),
svg { var(--ti-button-text-size-small-svg-height)
width: var(--ti-button-text-size-small-svg-width); );
height: var(--ti-button-text-size-small-svg-height);
}
} }
&.@{button-prefix-cls}.@{button-prefix-cls}--mini { &.@{button-prefix-cls}.@{button-prefix-cls}--mini {
min-width: var(--ti-button-text-size-mini-min-width); .button-text-size(
height: var(--ti-button-text-size-mini-height); var(--ti-button-text-size-mini-min-width),
line-height: calc(var(--ti-button-text-size-mini-height) - 2px); var(--ti-button-text-size-mini-height),
var(--ti-button-text-size-mini-svg-width),
svg { var(--ti-button-text-size-mini-svg-height)
width: var(--ti-button-text-size-mini-svg-width); );
height: var(--ti-button-text-size-mini-svg-height);
}
} }
} }

15
packages/theme/src/mixins/button.less
View File

@ -187,3 +187,18 @@
font-weight: normal; font-weight: normal;
} }
} }
.button-text-size(@min-width, @height, @svg-width, @svg-height) {
min-width: @min-width;
height: @height;
line-height: calc(@height - 2px);
svg {
width: @svg-width;
height: @svg-height;
}
&.is-only-icon {
min-width: unset;
}
}