Basic Card and Component Tidyup
This commit is contained in:
Conor_Mack
parent
d24705e1e1
commit
c51ee3f0e8
|
|
@ -86,7 +86,7 @@
|
|||
{/each}
|
||||
</ul>
|
||||
<div class="panel">
|
||||
<Tab list={selectedCategory} {onTemplateChosen} />
|
||||
<Tab list={selectedCategory} {onTemplateChosen} {toggleTab} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import Item from "./Item.svelte"
|
||||
import { store } from "builderStore"
|
||||
export let list
|
||||
export let toggleTab
|
||||
export let onTemplateChosen
|
||||
let category = list
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ export default {
|
|||
isCategory: true,
|
||||
type: [
|
||||
{
|
||||
_component: "@budibase/standard-components/container",
|
||||
name: 'Container',
|
||||
description: 'This component contains things within itself',
|
||||
icon: 'ri-layout-row-fill',
|
||||
|
|
@ -23,14 +24,12 @@ export default {
|
|||
icon: 'headline',
|
||||
props: {
|
||||
type: {
|
||||
type: 'options',
|
||||
options: [
|
||||
'h1',
|
||||
'h2'
|
||||
],
|
||||
'default': 'h1'
|
||||
}
|
||||
}
|
||||
type: "options",
|
||||
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
|
||||
default: "h1",
|
||||
},
|
||||
text: "string",
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: '@budibase/standard-components/text',
|
||||
|
|
@ -41,40 +40,7 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
name: 'Button',
|
||||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
},
|
||||
{
|
||||
name: 'Icon',
|
||||
description: 'A basic component for displaying icons',
|
||||
icon: 'ri-sun-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
},
|
||||
{
|
||||
name: 'Avatar',
|
||||
description: 'A basic component for rendering an avatar',
|
||||
icon: 'ri-user-smile-fill',
|
||||
commonProps: {},
|
||||
type: []
|
||||
},
|
||||
{
|
||||
name: 'Link',
|
||||
description: 'A basic link component for internal and external links',
|
||||
icon: 'ri-link',
|
||||
commonProps: {},
|
||||
type: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Form',
|
||||
isCategory: true,
|
||||
type: [
|
||||
{
|
||||
_component: "@budibase/standard-components/button",
|
||||
name: 'Button',
|
||||
description: 'A basic html button that is ready for styling',
|
||||
icon: 'ri-radio-button-fill',
|
||||
|
|
@ -109,6 +75,7 @@ export default {
|
|||
isCategory: true,
|
||||
type: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/BasicCard",
|
||||
name: 'Card',
|
||||
description: 'A basic card component that can contain content and actions.',
|
||||
icon: 'ri-layout-bottom-line',
|
||||
|
|
|
|||
|
|
@ -115,6 +115,21 @@
|
|||
},
|
||||
"tags": []
|
||||
},
|
||||
"BasicCard": {
|
||||
"name": "BasicCard",
|
||||
"description": "This is a basic card",
|
||||
"props": {
|
||||
"heading": "string",
|
||||
"subheading": "string",
|
||||
"content": "string",
|
||||
"imageUrl": "string",
|
||||
"button1Text": "string",
|
||||
"button2Text": "string",
|
||||
"cardClick": "event",
|
||||
"button1Click": "event",
|
||||
"button2Click": "event"
|
||||
}
|
||||
},
|
||||
"Card": {
|
||||
"name": "Card",
|
||||
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
|
||||
|
|
|
|||
67
packages/materialdesign-components/src/Card/BasicCard.svelte
Normal file
67
packages/materialdesign-components/src/Card/BasicCard.svelte
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<script>
|
||||
export let heading = ""
|
||||
export let subheading = ""
|
||||
export let content = ""
|
||||
export let imageUrl = ""
|
||||
export let button1Text = ""
|
||||
export let button2Text = ""
|
||||
export let cardClick = () => {}
|
||||
export let button1Click = () => {}
|
||||
export let button2Click = () => {}
|
||||
|
||||
$: showImage = !!imageUrl
|
||||
$: showButton1 = !!button1Text
|
||||
$: showButton2 = !!button2Text
|
||||
$: showButtons = !!showButton1 && !!showButton2
|
||||
</script>
|
||||
|
||||
<div class="mdc-card" on:click={cardClick}>
|
||||
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
|
||||
{#if showImage}
|
||||
<div
|
||||
class="mdc-card__media mdc-card__media--16-9 demo-card__media"
|
||||
style="background-image: url("{imageUrl}");" />
|
||||
{/if}
|
||||
<div class="pad">
|
||||
<div class="demo-card__primary">
|
||||
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">
|
||||
{heading}
|
||||
</h2>
|
||||
<h3
|
||||
class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">
|
||||
{subheading}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="demo-card__secondary mdc-typography mdc-typography--body2">
|
||||
{content}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{#if showButtons}
|
||||
<div class="mdc-card__actions">
|
||||
<div class="mdc-card__action-buttons">
|
||||
{#if showButton1}
|
||||
<button class="mdc-button mdc-card__action mdc-card__action--button">
|
||||
<span class="mdc-button__ripple" on:click={button1Click} />
|
||||
{button1Text}
|
||||
</button>
|
||||
{/if}
|
||||
{#if showButton2}
|
||||
<button
|
||||
class="mdc-button mdc-card__action mdc-card__action--button"
|
||||
on:click={button2Click}>
|
||||
<span class="mdc-button__ripple" />
|
||||
{button2Text}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pad {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import "./_styles.scss"
|
||||
export { default as Card } from "./Card.svelte"
|
||||
export { default as BasicCard } from "./BasicCard.svelte"
|
||||
export { default as CardBody } from "./CardBody.svelte"
|
||||
export { default as CardFooter } from "./CardFooter.svelte"
|
||||
export { default as CardHeader } from "./CardHeader.svelte"
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export { Menu } from "./Menu"
|
|||
export { Select } from "./Select"
|
||||
export { DatePicker } from "./DatePicker"
|
||||
export { IconButton } from "./IconButton"
|
||||
export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
|
||||
export { Card, CardHeader, CardImage, CardBody, CardFooter, BasicCard } from "./Card"
|
||||
export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
|
||||
export { Switch } from "./Switch"
|
||||
export { Slider } from "./Slider"
|
||||
|
|
|
|||
|
|
@ -214,6 +214,7 @@
|
|||
"description": "An HTML H1 - H6 tag",
|
||||
"props" : {
|
||||
"className":"string",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"default": "h1",
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
export let className = ""
|
||||
export let type
|
||||
export let _bb
|
||||
|
||||
export let text = ""
|
||||
let containerElement
|
||||
|
||||
$: containerElement && _bb.attachChildren(containerElement)
|
||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||
</script>
|
||||
|
||||
{#if type === 'h1'}
|
||||
<h1 class={className} bind:this={containerElement} />
|
||||
<h1 class={className} bind:this={containerElement}>{text}</h1>
|
||||
{:else if type === 'h2'}
|
||||
<h2 class={className} bind:this={containerElement} />
|
||||
<h2 class={className} bind:this={containerElement}>{text}</h2>
|
||||
{:else if type === 'h3'}
|
||||
<h3 class={className} bind:this={containerElement} />
|
||||
<h3 class={className} bind:this={containerElement}>{text}</h3>
|
||||
{:else if type === 'h4'}
|
||||
<h4 class={className} bind:this={containerElement} />
|
||||
<h4 class={className} bind:this={containerElement}>{text}</h4>
|
||||
{:else if type === 'h5'}
|
||||
<h5 class={className} bind:this={containerElement} />
|
||||
<h5 class={className} bind:this={containerElement}>{text}</h5>
|
||||
{:else if type === 'h6'}
|
||||
<h6 class={className} bind:this={containerElement} />
|
||||
<h6 class={className} bind:this={containerElement}>{text}</h6>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Reference in a new issue