Noospic
/
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 groupData = ref([
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' },
{ text: 'Button4', value: 'Button4' },
{ text: 'Button5', value: 'Button5' },
{ text: 'Button6', value: 'Button6' },
{ text: 'Button7', value: 'Button7' },
{ text: 'Button8', value: 'Button8' },
{ text: 'Button9', value: 'Button9' },
{ text: 'Button01', value: 'Button01' },
{ text: 'Button02', value: 'Button02' },
{ text: 'Button03', value: 'Button03' },
{ text: 'Button04', value: 'Button04' },
{ text: 'Button05', value: 'Button05' },
{ text: 'Button06', value: 'Button06' },
{ text: 'Button07', value: 'Button07' },
{ text: 'Button08', value: 'Button08' },
{ text: 'Button09', value: 'Button09' },
{ text: 'Button10', value: 'Button10' },
{ text: 'Button11', value: 'Button11' },
{ 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 {
checkedVal: 'Button1',
groupData: [
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' },
{ text: 'Button4', value: 'Button4' },
{ text: 'Button5', value: 'Button5' },
{ text: 'Button6', value: 'Button6' },
{ text: 'Button7', value: 'Button7' },
{ text: 'Button8', value: 'Button8' },
{ text: 'Button9', value: 'Button9' },
{ text: 'Button01', value: 'Button01' },
{ text: 'Button02', value: 'Button02' },
{ text: 'Button03', value: 'Button03' },
{ text: 'Button04', value: 'Button04' },
{ text: 'Button05', value: 'Button05' },
{ text: 'Button06', value: 'Button06' },
{ text: 'Button07', value: 'Button07' },
{ text: 'Button08', value: 'Button08' },
{ text: 'Button09', value: 'Button09' },
{ text: 'Button10', value: 'Button10' },
{ text: 'Button11', value: 'Button11' },
{ 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) {
Modal.message(`change事件触发了，选中值为${val}`)
Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
}
</script>

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

@ -23,7 +23,7 @@ export default {
},
methods: {
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() {
Modal.message('edit事件触发了')
Modal.message({ message: 'edit事件触发了', status: 'info' })
}
</script>

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

@ -31,7 +31,7 @@ export default {
},
methods: {
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',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN':
'<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
'zh-CN': '<p>通过 <code>data</code> 设置按钮组数据，<code>v-model</code> 设置绑定值。</p>',
'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']
},

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

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

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

@ -64,5 +64,7 @@ export default {
}
.tiny-button {
margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
}
</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'
function click() {
Modal.message('click')
Modal.message({ message: 'click', status: 'info' })
}
</script>

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

@ -11,7 +11,7 @@ export default {
},
methods: {
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 {
margin-bottom: 10px;
margin-left: 0;
margin-right: 8px;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -240,7 +240,8 @@ export default {
},
{
'name': 'type',
'type': "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
'type': 'IButtonType',
'typeAnchorName': 'IButtonType',
'defaultValue': '--',
'desc': {
'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 {
min-width: var(--ti-button-text-size-large-min-width);
height: var(--ti-button-text-size-large-height);
line-height: calc(var(--ti-button-text-size-large-height) - 2px);
svg {
width: var(--ti-button-text-size-large-svg-width);
height: var(--ti-button-text-size-large-svg-height);
}
.button-text-size(
var(--ti-button-text-size-large-min-width),
var(--ti-button-text-size-large-height),
var(--ti-button-text-size-large-svg-width),
var(--ti-button-text-size-large-svg-height)
);
}
&.@{button-prefix-cls}.@{button-prefix-cls}--medium {
min-width: var(--ti-button-text-size-medium-min-width);
height: var(--ti-button-text-size-medium-height);
line-height: calc(var(--ti-button-text-size-medium-height) - 2px);
svg {
width: var(--ti-button-text-size-medium-svg-width);
height: var(--ti-button-text-size-medium-svg-height);
}
.button-text-size(
var(--ti-button-text-size-medium-min-width),
var(--ti-button-text-size-medium-height),
var(--ti-button-text-size-medium-svg-width),
var(--ti-button-text-size-medium-svg-height)
);
}
&.@{button-prefix-cls} {
min-width: var(--ti-button-text-size-default-min-width);
height: var(--ti-button-text-size-default-height);
line-height: calc(var(--ti-button-text-size-default-height) - 2px);
svg {
width: var(--ti-button-text-size-default-svg-width);
height: var(--ti-button-text-size-default-svg-height);
}
.button-text-size(
var(--ti-button-text-size-default-min-width),
var(--ti-button-text-size-default-height),
var(--ti-button-text-size-default-svg-width),
var(--ti-button-text-size-default-svg-height)
);
}
&.@{button-prefix-cls}.@{button-prefix-cls}--small {
min-width: var(--ti-button-text-size-small-min-width);
height: var(--ti-button-text-size-small-height);
line-height: calc(var(--ti-button-text-size-small-height) - 2px);
svg {
width: var(--ti-button-text-size-small-svg-width);
height: var(--ti-button-text-size-small-svg-height);
}
.button-text-size(
var(--ti-button-text-size-small-min-width),
var(--ti-button-text-size-small-height),
var(--ti-button-text-size-small-svg-width),
var(--ti-button-text-size-small-svg-height)
);
}
&.@{button-prefix-cls}.@{button-prefix-cls}--mini {
min-width: var(--ti-button-text-size-mini-min-width);
height: var(--ti-button-text-size-mini-height);
line-height: calc(var(--ti-button-text-size-mini-height) - 2px);
svg {
width: var(--ti-button-text-size-mini-svg-width);
height: var(--ti-button-text-size-mini-svg-height);
}
.button-text-size(
var(--ti-button-text-size-mini-min-width),
var(--ti-button-text-size-mini-height),
var(--ti-button-text-size-mini-svg-width),
var(--ti-button-text-size-mini-svg-height)
);
}
}

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

@ -187,3 +187,18 @@
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;
}
}