mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 04:39:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Experimental Editor component

Browse source
This commit is contained in:
davideraccagni 2022-04-22 03:59:44 +02:00
commit 8b8ffbf79a
14 changed files with 3597 additions and 4215 deletions
Download patch file Download diff file Expand all files Collapse all files

63
examples/sveltekit/src/routes/index.svelte
View file

@ -2,30 +2,51 @@
import { Button, truncate, breakpoints } from "carbon-components-svelte";
import { Airplane } from "carbon-pictograms-svelte";
import { AutoComplete } from "carbon-components-svelte";
import { Grid, Row, Column } from "carbon-components-svelte";
let selectedId = 0;
let selectedItem = undefined;
</script>
<Button>Primary button</Button>
<Grid padding>
<Row>
<Column sm="{6}" md="{4}" lg="{4}">
<AutoComplete
titleText="Contact"
bind:selectedId
bind:selectedItem
placeholder="Placeholder"
items="{[
{ id: '0', text: 'Slack' },
{ id: '11', text: 'Email1' },
{ id: '12', text: 'Email2' },
{ id: '2', text: 'Fax' },
]}"
/>
</Column>
<Column sm="{6}" md="{4}" lg="{4}">
Selected: {selectedItem?.text} ({selectedId})
</Column>
</Row>
<Row>
<Column>
<Airplane />
</Column>
<Column>
<div use:truncate>Text...</div>
</Column>
<Column>
{JSON.stringify(breakpoints)}
</Column>
<Column>
<Button>Primary button</Button>
</Column>
</Row>
</Grid>
<Airplane />
<div use:truncate>Text...</div>
{JSON.stringify(breakpoints)}
<AutoComplete
titleText="Contact"
bind:selectedId
bind:selectedItem
placeholder="Placeholder"
items="{[
{ id: '0', text: 'Slack' },
{ id: '11', text: 'Email1' },
{ id: '12', text: 'Email2' },
{ id: '2', text: 'Fax' },
]}"
/>
Selected: {selectedItem?.text} ({selectedId})
<style>
div {
margin-top: var(--cds-spacing-07);
padding: var(--cds-spacing-07);
}
</style>