forked from tsai/budibase
Martin McKeaveney
7 years ago
43 changed files with 756 additions and 39 deletions
@ -0,0 +1,34 @@ |
|||||
|
<script> |
||||
|
import CardHeader from "./CardHeader.svelte" |
||||
|
import CardBody from "./CardBody.svelte" |
||||
|
import CardImage from "./CardImage.svelte" |
||||
|
import CardFooter from "./CardFooter.svelte" |
||||
|
import { H2, H6, Body2 } from "../Typography" |
||||
|
import { Button } from "../Button" |
||||
|
import { IconButton } from "../IconButton" |
||||
|
import ClassBuilder from "../ClassBuilder.js" |
||||
|
|
||||
|
export let width = "350px" |
||||
|
export let height = "auto" |
||||
|
export let variant = "standard" |
||||
|
|
||||
|
export let _bb |
||||
|
let card |
||||
|
|
||||
|
const cb = new ClassBuilder("card", ["standard"]) |
||||
|
|
||||
|
$: modifiers = { variant } |
||||
|
$: props = { modifiers } |
||||
|
$: cardClass = cb.build({ props }) |
||||
|
|
||||
|
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width |
||||
|
$: safeHeight = |
||||
|
height !== "auto" && !/px$/.test(height) ? `${width}px` : height |
||||
|
|
||||
|
$: card && _bb.attachChildren(card) |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
bind:this={card} |
||||
|
style={`width: ${safeWidth}; height: ${safeHeight}`} |
||||
|
class={cardClass} /> |
||||
@ -0,0 +1,10 @@ |
|||||
|
<script> |
||||
|
export let _bb |
||||
|
export let onClick = () => {} |
||||
|
|
||||
|
let cardBody |
||||
|
|
||||
|
$: cardBody && _bb.attachChildren(cardBody) |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} /> |
||||
@ -0,0 +1,31 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
let cardFooter |
||||
|
export let _bb |
||||
|
export let padding = "5px" |
||||
|
|
||||
|
onMount(() => { |
||||
|
_bb.setContext( |
||||
|
"BBMD:icon-button:context", |
||||
|
"mdc-card__action mdc-card__action--icon" |
||||
|
) |
||||
|
_bb.setContext( |
||||
|
"BBMD:button:context", |
||||
|
"mdc-card__action mdc-card__action--button" |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
$: cardFooter && _bb.attachChildren(cardFooter) |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
bind:this={cardFooter} |
||||
|
style={`padding: ${padding}`} |
||||
|
class="mdc-card__actions bbmd-card__actions" /> |
||||
|
|
||||
|
<style> |
||||
|
.bbmd-card__actions { |
||||
|
display: flex; |
||||
|
flex-flow: row wrap; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,44 @@ |
|||||
|
<script> |
||||
|
import { H6, Sub2 } from "../Typography" |
||||
|
import Icon from "../Common/Icon.svelte" |
||||
|
export let _bb |
||||
|
export let title = "" |
||||
|
export let subtitle = "" |
||||
|
export let icon = "" |
||||
|
|
||||
|
$: useIcon = !!icon |
||||
|
$: useSubtitle = !!subtitle |
||||
|
</script> |
||||
|
|
||||
|
<div class="card-header"> |
||||
|
{#if useIcon} |
||||
|
<div class="card-header__icon"> |
||||
|
<Icon {icon} /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
<div class="card-header__title"> |
||||
|
<H6 text={title} /> |
||||
|
{#if useSubtitle} |
||||
|
<Sub2 text={subtitle} /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
flex-flow: row nowrap; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.card-header__icon { |
||||
|
flex: 0; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.card-header__title { |
||||
|
display: flex; |
||||
|
flex-flow: column nowrap; |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,62 @@ |
|||||
|
<script> |
||||
|
import { H6, Sub2 } from "../Typography" |
||||
|
export let _bb |
||||
|
export let displayHorizontal = false //aligns image on row with title and subtitle text |
||||
|
export let url = "" |
||||
|
export let title = "" |
||||
|
export let subtitle = "" |
||||
|
|
||||
|
$: useTitle = !!title |
||||
|
$: useSubTitle = !!subtitle |
||||
|
</script> |
||||
|
|
||||
|
{#if !displayHorizontal} |
||||
|
<div |
||||
|
class="my-card__media mdc-card__media mdc-card__media--16-9" |
||||
|
style={`background-image: url(${url})`}> |
||||
|
<div class="mdc-card__media-content bbmd-card-media__content"> |
||||
|
{#if useTitle} |
||||
|
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
||||
|
{#if useSubTitle} |
||||
|
<Sub2 text={subtitle} horizontalMargin={10} /> |
||||
|
{/if} |
||||
|
{/if} |
||||
|
</div> |
||||
|
</div> |
||||
|
{:else} |
||||
|
<div class="bbmd-card--horizontal"> |
||||
|
<div |
||||
|
class="mdc-card__media mdc-card__media mdc-card__media--square |
||||
|
bbmd-card--horizontal-image" |
||||
|
style={`background-image: url(${url})`} /> |
||||
|
<div class="bbmd-card--horizontal-text"> |
||||
|
{#if useTitle} |
||||
|
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
||||
|
{#if useSubTitle} |
||||
|
<Sub2 text={subtitle} horizontalMargin={10} /> |
||||
|
{/if} |
||||
|
{/if} |
||||
|
</div> |
||||
|
</div> |
||||
|
{/if} |
||||
|
|
||||
|
<style> |
||||
|
.bbmd-card--horizontal { |
||||
|
display: flex; |
||||
|
flex-flow: row nowrap; |
||||
|
} |
||||
|
|
||||
|
.bbmd-card--horizontal-image { |
||||
|
flex: 0 0 110px; |
||||
|
} |
||||
|
|
||||
|
.bbmd-card--horizontal-text { |
||||
|
flex: 1; |
||||
|
padding: 10px 5px; |
||||
|
} |
||||
|
|
||||
|
.bbmd-card-media__content { |
||||
|
top: 125px; |
||||
|
color: white; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1 @@ |
|||||
|
@import "@material/card/mdc-card.scss" |
||||
@ -0,0 +1,7 @@ |
|||||
|
import "./_styles.scss" |
||||
|
export { default as Card } from "./Card.svelte" |
||||
|
export { default as CardBody } from "./CardBody.svelte" |
||||
|
export { default as CardFooter } from "./CardFooter.svelte" |
||||
|
export { default as CardHeader } from "./CardHeader.svelte" |
||||
|
export { default as CardImage } from "./CardImage.svelte" |
||||
|
|
||||
@ -0,0 +1,44 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
import { fade } from "svelte/transition" |
||||
|
import { MDCDialog } from "@material/dialog" |
||||
|
import ClassBuilder from "../ClassBuilder.js" |
||||
|
|
||||
|
let dialog |
||||
|
let dialogSurface |
||||
|
let instance |
||||
|
|
||||
|
export let _bb |
||||
|
// TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side |
||||
|
export let open = true |
||||
|
|
||||
|
onMount(() => { |
||||
|
instance = new MDCDialog(dialog) |
||||
|
return () => { |
||||
|
instance && instance.destroy() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
$: dialogSurface && _bb.attachChildren(dialogSurface) |
||||
|
|
||||
|
$: { |
||||
|
if (open) { |
||||
|
instance && instance.open() |
||||
|
} else { |
||||
|
instance && instance.close() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={dialog} class="mdc-dialog"> |
||||
|
<div class="mdc-dialog__container"> |
||||
|
<div |
||||
|
bind:this={dialogSurface} |
||||
|
class="mdc-dialog__surface" |
||||
|
role="alertdialog" |
||||
|
aria-modal="true" |
||||
|
aria-labelledby="my-dialog-title" |
||||
|
aria-describedby="my-dialog-content" /> |
||||
|
</div> |
||||
|
<div class="mdc-dialog__scrim" on:click={() => (open = false)} /> |
||||
|
</div> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
export let _bb |
||||
|
let dialogActions |
||||
|
|
||||
|
onMount(() => { |
||||
|
_bb.setContext("BBMD:button:context", "mdc-dialog__button") |
||||
|
}) |
||||
|
|
||||
|
$: dialogActions && _bb.attachChildren(dialogActions) |
||||
|
</script> |
||||
|
|
||||
|
<footer bind:this={dialogActions} class="mdc-dialog__actions" /> |
||||
@ -0,0 +1,11 @@ |
|||||
|
<script> |
||||
|
let dialogContent |
||||
|
export let _bb |
||||
|
|
||||
|
$: dialogContent && _bb.attachChildren(dialogContent) |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
class="mdc-dialog__content" |
||||
|
bind:this={dialogContent} |
||||
|
id="my-dialog-content" /> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
export let title = "" |
||||
|
</script> |
||||
|
|
||||
|
<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2> |
||||
@ -0,0 +1 @@ |
|||||
|
@import "@material/dialog/mdc-dialog.scss" |
||||
@ -0,0 +1,5 @@ |
|||||
|
import "./_style.scss" |
||||
|
export { default as Dialog } from "./Dialog.svelte" |
||||
|
export { default as DialogActions } from "./DialogActions.svelte" |
||||
|
export { default as DialogContent } from "./DialogContent.svelte" |
||||
|
export { default as DialogHeader } from "./DialogHeader.svelte" |
||||
@ -0,0 +1,119 @@ |
|||||
|
<script> |
||||
|
import { MDCSlider } from "@material/slider" |
||||
|
import { onMount } from "svelte" |
||||
|
import ClassBuilder from "../ClassBuilder.js" |
||||
|
|
||||
|
const cb = new ClassBuilder("slider", ["continuous"]) |
||||
|
|
||||
|
let slider |
||||
|
let instance |
||||
|
|
||||
|
export let variant = "continuous" //or discrete |
||||
|
export let showTicks = false |
||||
|
export let min = 0 |
||||
|
export let max = 100 |
||||
|
export let value = 1 |
||||
|
export let step = 1 |
||||
|
export let label = "" |
||||
|
export let disabled = false |
||||
|
|
||||
|
onMount(() => { |
||||
|
let s = MDCSlider.attachTo(slider) |
||||
|
return () => instance.destroy() |
||||
|
}) |
||||
|
|
||||
|
$: { |
||||
|
if (instance) { |
||||
|
instance.value = value |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$: instance && console.log("instance dot value: ", instance.value) |
||||
|
|
||||
|
$: isDiscrete = variant === "discrete" |
||||
|
$: displayMarkers = isDiscrete && showTicks |
||||
|
|
||||
|
$: modifiers = { variant, displayMarkers } |
||||
|
$: props = { modifiers } |
||||
|
$: sliderCls = cb.build({ props }) |
||||
|
|
||||
|
$: console.log("VALUE", value) |
||||
|
</script> |
||||
|
|
||||
|
<div |
||||
|
bind:this={slider} |
||||
|
class="mdc-slider mdc-slider--discrete" |
||||
|
tabindex="0" |
||||
|
role="slider" |
||||
|
aria-valuemin="0" |
||||
|
aria-valuemax="100" |
||||
|
aria-valuenow="0" |
||||
|
aria-label="Select Value" |
||||
|
on:MDCSlider:change={e => console.log('SLIDER VAL', e.detail.value)}> |
||||
|
<div class="mdc-slider__track-container"> |
||||
|
<div class="mdc-slider__track" /> |
||||
|
</div> |
||||
|
<div class="mdc-slider__thumb-container"> |
||||
|
<div class="mdc-slider__pin"> |
||||
|
<span class="mdc-slider__pin-value-marker" /> |
||||
|
</div> |
||||
|
<svg class="mdc-slider__thumb" width="21" height="21"> |
||||
|
<circle cx="10.5" cy="10.5" r="7.875" /> |
||||
|
</svg> |
||||
|
<div class="mdc-slider__focus-ring" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- |
||||
|
<div |
||||
|
bind:this={slider} |
||||
|
class={sliderCls} |
||||
|
tabindex="0" |
||||
|
role="slider" |
||||
|
aria-valuemin={min} |
||||
|
aria-valuemax={max} |
||||
|
aria-valuenow={value} |
||||
|
data-step={step} |
||||
|
aria-label={label} |
||||
|
on:MDCSlider:input={e => console.log('INPUT', e.detail.value)} |
||||
|
on:MDCSlider:change={e => console.log('CHANGE', e.detail.value)} |
||||
|
aria-disabled={disabled}> |
||||
|
<div class="mdc-slider__track-container"> |
||||
|
{#if displayMarkers} |
||||
|
<div class="mdc-slider__track-container"> |
||||
|
<div class="mdc-slider__track" /> |
||||
|
<div class="mdc-slider__track-marker-container" /> |
||||
|
</div> |
||||
|
{:else} |
||||
|
<div class="mdc-slider__track" /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
<div class="mdc-slider__thumb-container"> |
||||
|
{#if isDiscrete} |
||||
|
<div class="mdc-slider__pin"> |
||||
|
<span class="mdc-slider__pin-value-marker" /> |
||||
|
</div> |
||||
|
{/if} |
||||
|
<svg class="mdc-slider__thumb" width="21" height="21"> |
||||
|
<circle cx="10.5" cy="10.5" r="7.875" /> |
||||
|
</svg> |
||||
|
<div class="mdc-slider__focus-ring" /> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
|
||||
|
<!-- <div class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider" |
||||
|
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" |
||||
|
aria-label="Select Value"> |
||||
|
<div class="mdc-slider__track-container"> |
||||
|
<div class="mdc-slider__track"></div> |
||||
|
</div> |
||||
|
<div class="mdc-slider__thumb-container"> |
||||
|
<div class="mdc-slider__pin"> |
||||
|
<span class="mdc-slider__pin-value-marker"></span> |
||||
|
</div> |
||||
|
<svg class="mdc-slider__thumb" width="21" height="21"> |
||||
|
<circle cx="10.5" cy="10.5" r="7.875"></circle> |
||||
|
</svg> |
||||
|
<div class="mdc-slider__focus-ring"></div> |
||||
|
</div> |
||||
|
</div> --> |
||||
@ -0,0 +1 @@ |
|||||
|
@import "@material/slider/mdc-slider.scss" |
||||
@ -0,0 +1,2 @@ |
|||||
|
import "./_style.scss" |
||||
|
export {default as Slider} from "./Slider.svelte" |
||||
@ -0,0 +1,41 @@ |
|||||
|
<script> |
||||
|
import ClassBuilder from "../ClassBuilder.js" |
||||
|
import Formfield from "../Common/Formfield.svelte" |
||||
|
import Label from "../Common/Label.svelte" |
||||
|
export let onChange = checked => {} |
||||
|
|
||||
|
export let _bb |
||||
|
export let alignEnd = true |
||||
|
export let disabled = false |
||||
|
export let checked = false |
||||
|
export let label = "" |
||||
|
export let id = "my-switch-component" |
||||
|
|
||||
|
const cb = new ClassBuilder("switch") |
||||
|
|
||||
|
function handleChange() { |
||||
|
checked = !checked |
||||
|
onChange(checked) |
||||
|
} |
||||
|
|
||||
|
$: modifiers = { disabled, checked } |
||||
|
$: props = { modifiers } |
||||
|
$: switchCls = cb.build({ props }) |
||||
|
</script> |
||||
|
|
||||
|
<Formfield {_bb} {label} {alignEnd}> |
||||
|
<div class={switchCls} on:change={handleChange} style="margin: 0px 5px"> |
||||
|
<div class="mdc-switch__track" /> |
||||
|
<div class="mdc-switch__thumb-underlay"> |
||||
|
<div class="mdc-switch__thumb" /> |
||||
|
<input |
||||
|
type="checkbox" |
||||
|
{id} |
||||
|
class="mdc-switch__native-control" |
||||
|
role="switch" |
||||
|
aria-checked={checked} |
||||
|
{disabled} |
||||
|
{checked} /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Formfield> |
||||
@ -0,0 +1 @@ |
|||||
|
@import "@material/switch/mdc-switch.scss"; |
||||
@ -0,0 +1,2 @@ |
|||||
|
import "./_style.scss" |
||||
|
export { default as Switch } from "./Switch.svelte" |
||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 0 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--body1">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--body1"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 0 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--body2">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--body2"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 0 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--caption">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--caption"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h1 class="mdc-typography--headline1">{text}</h1> |
<h1 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline1"> |
||||
|
{text} |
||||
|
</h1> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h2 class="mdc-typography--headline2">{text}</h2> |
<h2 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline2"> |
||||
|
{text} |
||||
|
</h2> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h3 class="mdc-typography--headline3">{text}</h3> |
<h3 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline3"> |
||||
|
{text} |
||||
|
</h3> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h4 class="mdc-typography--headline4">{text}</h4> |
<h4 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline4"> |
||||
|
{text} |
||||
|
</h4> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h5 class="mdc-typography--headline5">{text}</h5> |
<h5 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline5"> |
||||
|
{text} |
||||
|
</h5> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<h6 class="mdc-typography--headline6">{text}</h6> |
<h6 |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--headline6"> |
||||
|
{text} |
||||
|
</h6> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 0 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--overline">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--overline"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 0 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--subtitle1">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--subtitle1"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
@ -1,5 +1,11 @@ |
|||||
<script> |
<script> |
||||
export let text = "" |
export let text = "" |
||||
|
export let verticalMargin = 5 |
||||
|
export let horizontalMargin = 0 |
||||
</script> |
</script> |
||||
|
|
||||
<span class="mdc-typography--subtitle2">{text}</span> |
<span |
||||
|
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
||||
|
class="mdc-typography--subtitle2"> |
||||
|
{text} |
||||
|
</span> |
||||
|
|||||
Loading…
Reference in new issue