PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added width option on button component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-26 17:32:40 +08:00
parent ebebbee0c0
commit f91e94952d
1 changed files with 8 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/Button/Button.tsx
View file

@ -10,6 +10,8 @@ interface Props {
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link' design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
submit?: boolean submit?: boolean
newtab?: boolean newtab?: boolean
width?: number
wide?: boolean
} }
const getBorderRadius = (edge: Props['edges']) => { const getBorderRadius = (edge: Props['edges']) => {
@ -34,14 +36,14 @@ export default (props: Props) => {
<Switch> <Switch>
<Match when={props.design}> <Match when={props.design}>
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}> <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
<button class={props.design} style={borderRadius}> <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</A> </A>
</Match> </Match>
<Match when={!props.design}> <Match when={!props.design}>
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}> <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
<button class="button" style={borderRadius}> <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</A> </A>
@ -53,26 +55,26 @@ export default (props: Props) => {
<Switch> <Switch>
<Match when={props.design}> <Match when={props.design}>
<Show when={props.submit}> <Show when={props.submit}>
<button class={props.design} type="submit" style={borderRadius}> <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>
<Show when={!props.submit}> <Show when={!props.submit}>
<button class={props.design} onClick={props.onClick} style={borderRadius}> <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>
</Match> </Match>
<Match when={!props.design}> <Match when={!props.design}>
<Show when={props.submit}> <Show when={props.submit}>
<button class="button" type="submit" style={borderRadius}> <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>
<Show when={!props.submit}> <Show when={!props.submit}>
<button class="button" onClick={props.onClick} style={borderRadius}> <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
{props.label || 'Click Me!'} {props.label || 'Click Me!'}
</button> </button>
</Show> </Show>