mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
add custom head component
This commit is contained in:
Daniel Miedzik
parent
775ceb47c1
commit
36d20a5a2f
18 changed files with 727 additions and 3 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 155,
|
||||
"total": 160,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "SkeletonText",
|
||||
|
|
@ -4910,6 +4910,157 @@
|
|||
],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "Head",
|
||||
"filePath": "/src/Head/Head.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "flexDirection",
|
||||
"kind": "let",
|
||||
"description": "Set the flexDirection of the head",
|
||||
"type": "\"row\" | \"row-reverse\"",
|
||||
"value": "'row'",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "margin",
|
||||
"kind": "let",
|
||||
"description": "Set the margin of the head",
|
||||
"type": "string",
|
||||
"value": "'20px 0 15px'",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "HeadAction",
|
||||
"filePath": "/src/Head/HeadAction.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "href",
|
||||
"kind": "let",
|
||||
"description": "Specify the href attribute",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon from `carbon-icons-svelte` to render",
|
||||
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"kind": "let",
|
||||
"description": "Specify the description",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"events": [{ "type": "forwarded", "name": "click", "element": "Button" }],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "HeadActions",
|
||||
"filePath": "/src/Head/HeadActions.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "width",
|
||||
"kind": "let",
|
||||
"description": "Set the width of the head actions",
|
||||
"type": "string",
|
||||
"value": "\"100%\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "HeadFilters",
|
||||
"filePath": "/src/Head/HeadFilters.svelte",
|
||||
"props": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "HeadIdentity",
|
||||
"filePath": "/src/Head/HeadIdentity.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
"description": "Specify the href attribute",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "subtitle",
|
||||
"kind": "let",
|
||||
"description": "Specify the subtitle attribute",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "imgSrc",
|
||||
"kind": "let",
|
||||
"description": "Specify the imgSrc attribute",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "imgSize",
|
||||
"kind": "let",
|
||||
"description": "Set the imgSize of the head",
|
||||
"type": "\"small\" | \"normal\" | \"large\"",
|
||||
"value": "'normal'",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "titleSize",
|
||||
"kind": "let",
|
||||
"description": "Set the titleSize of the head",
|
||||
"type": "\"small\" | \"normal\" | \"large\"",
|
||||
"value": "'normal'",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "__default__", "default": true, "slot_props": "{}" },
|
||||
{ "name": "tabs", "default": false, "slot_props": "{}" }
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "IconSkeleton",
|
||||
"filePath": "/src/Icon/IconSkeleton.svelte",
|
||||
|
|
|
|||
|
|
@ -23,10 +23,12 @@
|
|||
let innerWidth = 2048;
|
||||
|
||||
$: isMobile = innerWidth < 1056;
|
||||
console.log("$layout", $layout);
|
||||
$: components = $layout.children.filter(
|
||||
(child) => child.title === "components"
|
||||
)[0];
|
||||
$: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
|
||||
$: avui = $layout.children.filter((child) => child.title === "avui")[0];
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
if (isMobile) isSideNavOpen = false;
|
||||
|
|
@ -217,7 +219,19 @@
|
|||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||
expanded="{$isActive($url('')) || $isActive($url('/avui'))}"
|
||||
text="avUI Components"
|
||||
>
|
||||
{#each avui.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('/components'))}"
|
||||
text="Components"
|
||||
>
|
||||
{#each components.children as child, i (child.path)}
|
||||
|
|
|
|||
78
docs/src/pages/avui/Head.svx
Normal file
78
docs/src/pages/avui/Head.svx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
layout: "avui"
|
||||
components: ["Head", "HeadIdentity", "HeadActions", "HeadFilters", "HeadAction"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Head, HeadAction, HeadActions, HeadFilters, HeadIdentity, Select, SelectItem, Search } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
import CloudUpload32 from "carbon-icons-svelte/lib/CloudUpload32";
|
||||
import Add32 from "carbon-icons-svelte/lib/Add32";
|
||||
import Close32 from "carbon-icons-svelte/lib/Close32";
|
||||
</script>
|
||||
|
||||
The `Head` component
|
||||
|
||||
### Head with identity, filters and actions
|
||||
|
||||
<Head>
|
||||
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
|
||||
<HeadActions>
|
||||
<HeadFilters>
|
||||
<Select inline selected="All" noLabel={true}>
|
||||
<SelectItem value="All" text="All Statuses" />
|
||||
<SelectItem value="Active" text="Active" />
|
||||
<SelectItem value="Archive" text="Archive" />
|
||||
<SelectItem value="Published" text="Published" />
|
||||
</Select>
|
||||
</HeadFilters>
|
||||
<Search light placeholder="What can we help you find?" />
|
||||
<HeadAction icon={CloudUpload32} description="Upload assets" />
|
||||
<HeadAction href="/#/add" icon={Add32} description="Add Project" />
|
||||
</HeadActions>
|
||||
</Head>
|
||||
|
||||
<Head>
|
||||
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
|
||||
<HeadActions width="unset">
|
||||
<HeadAction href="/#/add" icon={Close32} description="Add Project" />
|
||||
</HeadActions>
|
||||
</Head>
|
||||
|
||||
### Head with Identity only (title, subtitle and image)
|
||||
|
||||
<Head>
|
||||
<HeadIdentity title="Test title" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" />
|
||||
</Head>
|
||||
|
||||
### Sizes
|
||||
|
||||
Small size:
|
||||
|
||||
<Head>
|
||||
<HeadIdentity title="Test title" titleSize="small" imgSrc="https://via.placeholder.com/200x200" imgSize="small" />
|
||||
</Head>
|
||||
|
||||
Large size:
|
||||
|
||||
<Head>
|
||||
<HeadIdentity title="Test title" titleSize="large" subtitle="Test subtitle" imgSrc="https://via.placeholder.com/200x200" imgSize="large" />
|
||||
</Head>
|
||||
|
||||
### Head without Identity
|
||||
|
||||
<Head>
|
||||
<HeadActions>
|
||||
<HeadFilters>
|
||||
<Select inline selected="All" noLabel={true}>
|
||||
<SelectItem value="All" text="All Statuses" />
|
||||
<SelectItem value="Active" text="Active" />
|
||||
<SelectItem value="Archive" text="Archive" />
|
||||
<SelectItem value="Published" text="Published" />
|
||||
</Select>
|
||||
</HeadFilters>
|
||||
<Search light placeholder="What can we help you find?" />
|
||||
<HeadAction icon={CloudUpload32} description="Upload assets" />
|
||||
<HeadAction href="/#/add" icon={Add32} description="Add Project" />
|
||||
</HeadActions>
|
||||
</Head>
|
||||
|
|
@ -144,6 +144,7 @@ module.exports = {
|
|||
remarkPlugins: [plugin, slug, carbonify],
|
||||
layout: {
|
||||
recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
|
||||
avui: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
|
||||
_: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
|
||||
},
|
||||
}),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue