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

Added width props to modal component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-01-07 10:07:28 +08:00
parent 62aa74b0c4
commit 103cc53155
1 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/Modal/Modal.tsx
View file

@ -9,6 +9,7 @@ interface Props {
border?: string border?: string
opacity?: number opacity?: number
trigger: boolean trigger: boolean
width?: string
} }
export default (props: Props) => { export default (props: Props) => {
@ -17,18 +18,18 @@ export default (props: Props) => {
<Show when={props.trigger}> <Show when={props.trigger}>
<div class="modal"> <div class="modal">
<Show when={props.border}> <Show when={props.border}>
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}> <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}; width: ${props.width || 'auto'}`}>
{props.children} {props.children}
</div> </div>
</Show> </Show>
<Show when={!props.border}> <Show when={!props.border}>
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}> <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5); width: ${props.width || 'auto'}`}>
{props.children} {props.children}
</div> </div>
</Show> </Show>
</div> </div>
</Show> </Show >
</> </>
) )
} }