mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
feat(column)!: replace as with tag prop
This commit is contained in:
Eric Liu
parent
1e31e71bcf
commit
12dfff70fa
4 changed files with 40 additions and 55 deletions
|
|
@ -612,25 +612,25 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
|
||||
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
||||
| aspectRatio | No | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column |
|
||||
| sm | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the small breakpoint |
|
||||
| md | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
|
||||
| lg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the large breakpoint |
|
||||
| xlg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the extra large breakpoint |
|
||||
| max | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the maximum breakpoint |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------- |
|
||||
| tag | No | <code>let</code> | No | <code>string</code> | <code>"div"</code> | Specify the element tag |
|
||||
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
|
||||
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
|
||||
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
|
||||
| padding | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to the column |
|
||||
| aspectRatio | No | <code>let</code> | No | <code>"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column |
|
||||
| sm | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the small breakpoint |
|
||||
| md | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
|
||||
| lg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the large breakpoint |
|
||||
| xlg | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the extra large breakpoint |
|
||||
| max | No | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the maximum breakpoint |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :------------------------------------------------------------ | :------- |
|
||||
| -- | Yes | <code>{props: { class: string; [key: string]: any; }} </code> | -- |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :---- | :------- |
|
||||
| -- | Yes | -- | -- |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
|||
|
|
@ -1294,11 +1294,11 @@
|
|||
"filePath": "src/Grid/Column.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "as",
|
||||
"name": "tag",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"description": "Specify the element tag",
|
||||
"type": "string",
|
||||
"value": "\"div\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -1421,13 +1421,7 @@
|
|||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [
|
||||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"slot_props": "{props: { class: string; [key: string]: any; }}"
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,18 +4,10 @@
|
|||
* @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
|
||||
* @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
|
||||
* @restProps {div}
|
||||
* @slot {{props: { class: string; [key: string]: any; }}}
|
||||
*/
|
||||
|
||||
/**
|
||||
* @slot {{ props?: { class: string; } }}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
|
||||
*/
|
||||
export let as = false;
|
||||
/** Specify the element tag */
|
||||
export let tag = "div";
|
||||
|
||||
/** Set to `true` to remove the gutter */
|
||||
export let noGutter = false;
|
||||
|
|
@ -98,22 +90,22 @@
|
|||
class: [
|
||||
$$restProps.class,
|
||||
columnClass,
|
||||
!columnClass && "bx--col",
|
||||
noGutter && "bx--no-gutter",
|
||||
noGutterLeft && "bx--no-gutter--left",
|
||||
noGutterRight && "bx--no-gutter--right",
|
||||
aspectRatio && `bx--aspect-ratio bx--aspect-ratio--${aspectRatio}`,
|
||||
padding && "bx--col-padding",
|
||||
aspectRatio && `bx--aspect-ratio--${aspectRatio}`,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" "),
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if as}
|
||||
<slot props="{props}" />
|
||||
{:else}
|
||||
<div {...props}>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:element
|
||||
this="{tag}"
|
||||
{...props}
|
||||
class:bx--col="{!columnClass}"
|
||||
class:bx--no-gutter="{noGutter}"
|
||||
class:bx--no-gutter--left="{noGutterLeft}"
|
||||
class:bx--no-gutter--right="{noGutterRight}"
|
||||
class:bx--row-padding="{padding}"
|
||||
class:bx--aspect-ratio="{aspectRatio}"
|
||||
>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
|
|
|
|||
9
types/Grid/Column.svelte.d.ts
vendored
9
types/Grid/Column.svelte.d.ts
vendored
|
|
@ -13,11 +13,10 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
|
|||
export interface ColumnProps
|
||||
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
|
||||
/**
|
||||
* Set to `true` to render a custom HTML element
|
||||
* Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
|
||||
* @default false
|
||||
* Specify the element tag
|
||||
* @default "div"
|
||||
*/
|
||||
as?: boolean;
|
||||
tag?: string;
|
||||
|
||||
/**
|
||||
* Set to `true` to remove the gutter
|
||||
|
|
@ -83,5 +82,5 @@ export interface ColumnProps
|
|||
export default class Column extends SvelteComponentTyped<
|
||||
ColumnProps,
|
||||
{},
|
||||
{ default: { props: { class: string; [key: string]: any } } }
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue