mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(heading): add Heading and Section components (#1961)

Browse source
This commit is contained in:
Eric Liu 2024-04-21 14:27:26 -07:00 • committed by GitHub
commit 76210d68d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 287 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

57
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 166,
"total": 168,
"components": [
{
"moduleName": "Accordion",
@ -5386,6 +5386,21 @@
"events": [],
"typedefs": []
},
{
"moduleName": "Heading",
"filePath": "src/Heading/Heading.svelte",
"props": [],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [
{
"type": "1 | 2 | 3 | 4 | 5 | 6",
"name": "SectionLevel",
"ts": "type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6"
}
]
},
{
"moduleName": "ImageLoader",
"filePath": "src/ImageLoader/ImageLoader.svelte",
@ -10181,6 +10196,46 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Section",
"filePath": "src/Heading/Section.svelte",
"props": [
{
"name": "level",
"kind": "let",
"description": "Specify the level the section should start at.",
"type": "SectionLevel",
"value": "1",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "tag",
"kind": "let",
"description": "Specify the tag name",
"type": "keyof HTMLElementTagNameMap",
"value": "\"section\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [
{
"type": "1 | 2 | 3 | 4 | 5 | 6",
"name": "SectionLevel",
"ts": "type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6"
}
]
},
{
"moduleName": "Select",
"filePath": "src/Select/Select.svelte",

72
docs/src/pages/components/Heading.svx Normal file
View file

@ -0,0 +1,72 @@
---
components: ["Heading", "Section"]
---
<script>
import { Heading, Section } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
The `Heading` component automatically adjusts the level of the heading based on the nesting level of the `Section` component.
## Default
For example, the top-level `Heading` inside a `Section` will be rendered as a semantic `h1` element.
<Section>
<Heading>Heading 1</Heading>
</Section>
## Nested sections
Section headings are capped at `h6`.
<Section>
<Heading>Heading 1</Heading>
<Section>
<Heading>Heading 2</Heading>
<Section>
<Heading>Heading 3</Heading>
<Section>
<Heading>Heading 4</Heading>
<Section>
<Heading>Heading 5</Heading>
<Section>
<Heading>Heading 6</Heading>
<Section>
<Heading>Capped at Heading 6</Heading>
</Section>
</Section>
</Section>
</Section>
</Section>
</Section>
<Section>
<Heading>Heading 2</Heading>
</Section>
</Section>
## Custom level
To specify a custom start level, use the `level` prop.
<Section level={5}>
<Heading>Starts at Heading 5</Heading>
<Section>
<Heading>Heading 6</Heading>
<Section>
<Heading>Capped at Heading 6</Heading>
</Section>
</Section>
</Section>
## Custom section element
The `Section` component renders a `section` by default.
Use the `tag` prop to render a different element.
<Section tag="div">
<Heading>Heading 1</Heading>
</Section>