showcase buttons

This commit is contained in:
zombieFox 2024-07-05 10:14:31 +01:00
parent bd48d63fd0
commit b266d6d8cc
3 changed files with 14 additions and 20 deletions

View File

@ -227,6 +227,7 @@ export const Control_slider = function({
const formInline = form.inline({ const formInline = form.inline({
block: true, block: true,
align: 'center',
gap: 'small', gap: 'small',
children: [ children: [
this.range, this.range,

View File

@ -177,6 +177,7 @@ export const Control_sliderSlim = function({
const formInline = form.inline({ const formInline = form.inline({
block: true, block: true,
align: 'center',
gap: 'small', gap: 'small',
children: [ children: [
this.label, this.label,

View File

@ -105,6 +105,7 @@ showcase.disable = () => {
showcase.control.button.d.disable(); showcase.control.button.d.disable();
showcase.control.button.e.disable(); showcase.control.button.e.disable();
showcase.control.button.f.disable(); showcase.control.button.f.disable();
showcase.control.button.g.disable();
showcase.control.button.dropdown.disable(); showcase.control.button.dropdown.disable();
showcase.control.tab.disable(); showcase.control.tab.disable();
showcase.control.input.text.disable(); showcase.control.input.text.disable();
@ -136,6 +137,7 @@ showcase.disable = () => {
showcase.control.button.d.enable(); showcase.control.button.d.enable();
showcase.control.button.e.enable(); showcase.control.button.e.enable();
showcase.control.button.f.enable(); showcase.control.button.f.enable();
showcase.control.button.g.enable();
showcase.control.button.dropdown.enable(); showcase.control.button.dropdown.enable();
showcase.control.tab.enable(); showcase.control.tab.enable();
showcase.control.input.text.enable(); showcase.control.input.text.enable();
@ -549,10 +551,11 @@ showcase.area.assemble = () => {
d: new Button({ text: 'Button small', style: ['line'], size: 'small' }), d: new Button({ text: 'Button small', style: ['line'], size: 'small' }),
e: new Button({ text: 'Button medium', style: ['line'] }), e: new Button({ text: 'Button medium', style: ['line'] }),
f: new Button({ text: 'Button large', style: ['line'], size: 'large' }), f: new Button({ text: 'Button large', style: ['line'], size: 'large' }),
g: new Button({ text: 'Add new stuff', style: ['line'], iconName: 'add', srOnly: true }),
dropdown: new Dropdown({ dropdown: new Dropdown({
text: 'Dropdown', text: 'Dropdown',
buttonStyle: ['line'], buttonStyle: ['line'],
iconName: 'add', iconName: 'arrowKeyboardDown',
persist: true, persist: true,
menuItem: [ menuItem: [
{ text: 'One', iconName: 'addGroup' }, { text: 'One', iconName: 'addGroup' },
@ -656,23 +659,16 @@ showcase.area.assemble = () => {
form.wrap({ form.wrap({
children: [ children: [
form.inline({ form.inline({
align: 'top', wrap: true,
gap: 'small',
align: 'center',
children: [ children: [
showcase.control.input.radio.b.inputButton(), showcase.control.input.radio.b.inputButton(),
showcase.control.input.radio.c.inputButton(), showcase.control.input.radio.c.inputButton(),
]
})
]
}),
form.wrap({
children: [
form.inline({
align: 'top',
children: [
showcase.control.input.checkbox.d.inputButton(), showcase.control.input.checkbox.d.inputButton(),
showcase.control.input.checkbox.e.inputButton(), showcase.control.input.checkbox.e.inputButton(),
] ]
}), })
] ]
}), }),
node('hr'), node('hr'),
@ -680,6 +676,7 @@ showcase.area.assemble = () => {
children: [ children: [
form.inline({ form.inline({
align: 'center', align: 'center',
gap: 'small',
children: [ children: [
showcase.control.input.radio.grid3x3.wrap(), showcase.control.input.radio.grid3x3.wrap(),
showcase.control.input.radio.grid1x3.wrap(), showcase.control.input.radio.grid1x3.wrap(),
@ -692,24 +689,19 @@ showcase.area.assemble = () => {
form.wrap({ form.wrap({
children: [ children: [
form.inline({ form.inline({
wrap: true,
gap: 'small', gap: 'small',
align: 'center', align: 'center',
children: [ children: [
showcase.control.button.a.wrap(), showcase.control.button.a.wrap(),
showcase.control.button.b.wrap(), showcase.control.button.b.wrap(),
showcase.control.button.c.wrap(), showcase.control.button.c.wrap(),
showcase.control.button.d.wrap(), showcase.control.button.g.wrap(),
showcase.control.button.e.wrap(), showcase.control.button.dropdown.toggle,
showcase.control.button.f.wrap(),
] ]
}) })
] ]
}), }),
form.wrap({
children: [
showcase.control.button.dropdown.toggle
]
}),
node('hr'), node('hr'),
showcase.control.tab.tab(), showcase.control.tab.tab(),
showcase.control.input.text.wrap(), showcase.control.input.text.wrap(),