svelte-carbonara

Simple form rendering in Svelte and Carbon.

Add to your project

npm install -s svelte-carbonara

Example

<script lang="ts">
    import "carbon-components-svelte/css/g100.css";
    import {Grid, Row, Column, Form, Button} from "carbon-components-svelte";
    import {Carbonara, CarbonTextInput, CarbonTextArea, CarbonNumberInput, CarbonCheckbox, CarbonaraList} from "svelte-carbonara";


    class Role {

        @CarbonTextInput({labelText: "Title"})
        public title: string;

        @CarbonTextArea({labelText: "Description"})
        public description: string;
    }

    class Employee {

        @CarbonTextInput({labelText: "Name"})
        public name: string;

        @CarbonTextArea({labelText: "Background"})
        public occupation: string;

        @CarbonNumberInput({label: "Age"})
        public age: number = 0;

        @CarbonCheckbox({labelText: "Manager"})
        public manager: boolean;

        @CarbonaraList({
            labelText: "Role",
            labelProperty: "title",
            factory: () => new Role()
        })
        public roles: Role[] = [];

    }

    let employee = new Employee();
</script>

<Grid>
    <Row>
        <Column>
            <h1>Carbonara Sample Form</h1>
        </Column>
    </Row>
    <Row>
        <Column>
            <Form>
                <Carbonara bind:value={employee}/>
            </Form>
        </Column>
    </Row>
    <Row>
        <Column>
            <Button on:click={() => {
                alert(JSON.stringify(employee));
            }}>
                Save
            </Button>
        </Column>
    </Row>
    <Row style="margin-top: 100px;">
        <Column>
            <h4>{JSON.stringify(employee)}</h4>
        </Column>
    </Row>
</Grid>