Skip to content

Commit 1909d53

Browse files
daformatdaformat
committed
(docs): Update Readme
1 parent d61875c commit 1909d53

1 file changed

Lines changed: 15 additions & 15 deletions

File tree

‎README.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ https://hello-mat.com/design-engineering/component/carousel-component
4040
{/* The container for the items */}
4141
<Carousel.Content>
4242
{/* A carousel item */}
43-
<Carousel.Item/>
44-
<Carousel.Item/>
45-
<Carousel.Item/>
43+
<Carousel.Item />
44+
<Carousel.Item />
45+
<Carousel.Item />
4646
</Carousel.Content>
4747
</Carousel.Viewport>
4848
{/* The pagination buttons */}
49-
<Carousel.PrevPage/>
50-
<Carousel.NextPage/>
49+
<Carousel.PrevPage />
50+
<Carousel.NextPage />
5151
</Carousel.Root>
5252
```
5353

@@ -58,7 +58,7 @@ https://hello-mat.com/design-engineering/component/carousel-component
5858
The outermost wrapper. Provides context to all child carousel components. Renders a `<div>`.
5959

6060
| Prop | Type | Default | Description |
61-
|------------------|---------------------------------------------------------------------------------|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
61+
| ---------------- | ------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
6262
| `boundaryOffset` | `{ x: number; y: number } \| ((root: HTMLElement) => { x: number; y: number })` | `defaultBoundaryOffset` | Inset in pixels from the leading and trailing edges of the viewport used when scrolling items into view with prev/next buttons. The default implementation reads the content fade size from the viewport so items are never scrolled behind the fade. Pass a plain object or a function receiving the root element and returning `{ x, y }` to override. |
6363
| `ref` | `Ref<HTMLDivElement>` | — | Forwarded ref to the root `<div>`. |
6464
| `...props` | `ComponentPropsWithoutRef<"div">` | — | All standard `<div>` props (`className`, `style`, `children`, etc.). |
@@ -71,7 +71,7 @@ The scrollable container. Handles pointer/mouse dragging, momentum, rubber-bandi
7171
scrolling. Renders a `<div>` with `overflow: scroll` and hidden scrollbars.
7272

7373
| Prop | Type | Default | Description |
74-
|-------------------|-----------------------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
74+
| ----------------- | --------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7575
| `scrollSnapType` | `CSSProperties["scrollSnapType"]` | — | CSS `scroll-snap-type` value applied to the container (e.g. `"x mandatory"`). Snapping is coordinated with the momentum animation so the carousel always lands on a snap point. |
7676
| `contentFade` | `boolean` | `true` | When `true`, a mask-image fade is applied to both edges of the viewport. The fade appears only when there is scrollable content in that direction. |
7777
| `contentFadeSize` | `string \| number` | `"clamp(16px, 10vw, 64px)"` | Width of the content fade. Accepts any CSS length string or a `number` (interpreted as `px`). Only valid when `contentFade` is `true` (or omitted). |
@@ -81,7 +81,7 @@ scrolling. Renders a `<div>` with `overflow: scroll` and hidden scrollbars.
8181
#### Data attributes set on the viewport
8282

8383
| Attribute | Values | Description |
84-
|--------------------------|-------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
84+
| ------------------------ | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
8585
| `data-carousel-viewport` | `""` | Always present. Used internally for boundary offset calculation. |
8686
| `data-can-scroll` | `"forwards"` \| `"backwards"` \| `"both"` \| `"none"` | Reflects the current scrollability. Useful for styling buttons or indicators with CSS attribute selectors. |
8787

@@ -92,7 +92,7 @@ scrolling. Renders a `<div>` with `overflow: scroll` and hidden scrollbars.
9292
A thin wrapper that sets `width: fit-content` so items lay out in a single row. Renders a `<div>`.
9393

9494
| Prop | Type | Default | Description |
95-
|------------|-----------------------------------|---------|--------------------------------------------------------------------------|
95+
| ---------- | --------------------------------- | ------- | ------------------------------------------------------------------------ |
9696
| `ref` | `Ref<HTMLDivElement>` | — | Forwarded ref to the content `<div>`. |
9797
| `...props` | `ComponentPropsWithoutRef<"div">` | — | All standard `<div>` props. Styles are merged with `width: fit-content`. |
9898

@@ -104,7 +104,7 @@ A single carousel slide. By default renders a `<div>` with `will-change: transfo
104104
animation). Use `asChild` to merge onto your own element.
105105

106106
| Prop | Type | Default | Description |
107-
|------------|-----------------------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
107+
| ---------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
108108
| `asChild` | `boolean` | `false` | When `true`, merges all props (including `data-carousel-item` and `style`) onto the single child element via `cloneElement` instead of rendering a wrapping `<div>`. The child must be a single valid React element. |
109109
| `ref` | `Ref<HTMLElement>` | — | Forwarded ref. When `asChild` is `true`, forwarded to the child element. |
110110
| `...props` | `ComponentPropsWithoutRef<"div">` | — | All standard `<div>` props. `style` is merged with `will-change: transform`. |
@@ -117,7 +117,7 @@ A button that scrolls the carousel forwards by one page or to the next partially
117117
when there is no more content to scroll forwards. Renders a `<button>`.
118118

119119
| Prop | Type | Default | Description |
120-
|------------|----------------------------------------|--------------------|-----------------------------------------------------------------------------------------------------------------------|
120+
| ---------- | -------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------- |
121121
| `disabled` | `boolean` | `!scrollsForwards` | Overrides the automatic disabled state. Pass `false` to always keep the button enabled regardless of scroll position. |
122122
| `onClick` | `MouseEventHandler<HTMLButtonElement>` | — | Called after the scroll action is triggered. |
123123
| `ref` | `Ref<HTMLButtonElement>` | — | Forwarded ref to the `<button>`. |
@@ -131,7 +131,7 @@ A button that scrolls the carousel backwards by one page or to the previous part
131131
disabled when the carousel is at the start. Renders a `<button>`.
132132

133133
| Prop | Type | Default | Description |
134-
|------------|----------------------------------------|---------------------|----------------------------------------------|
134+
| ---------- | -------------------------------------- | ------------------- | -------------------------------------------- |
135135
| `disabled` | `boolean` | `!scrollsBackwards` | Overrides the automatic disabled state. |
136136
| `onClick` | `MouseEventHandler<HTMLButtonElement>` | — | Called after the scroll action is triggered. |
137137
| `ref` | `Ref<HTMLButtonElement>` | — | Forwarded ref to the `<button>`. |
@@ -157,7 +157,7 @@ const {
157157
```
158158

159159
| Property | Type | Description |
160-
|------------------------------------------------|------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
160+
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
161161
| `scrollsForwards` | `boolean` | `true` when the carousel has scrollable content ahead. |
162162
| `scrollsBackwards` | `boolean` | `true` when the carousel has scrollable content behind. |
163163
| `remainingForwards` | `React.RefObject<number>` | Ref containing the number of pixels remaining to scroll forwards. Updated on every scroll event. |
@@ -174,7 +174,7 @@ const {
174174
The following CSS custom properties are set on the root element and can be used for custom styling.
175175

176176
| Property | Description |
177-
|------------------------------------|------------------------------------------------------------------------------------|
177+
| ---------------------------------- | ---------------------------------------------------------------------------------- |
178178
| `--carousel-fade-size` | Current fade size as resolved from `contentFadeSize`. |
179179
| `--carousel-remaining-forwards` | Pixels remaining to scroll forwards (e.g. `312px`). Updated on every scroll event. |
180180
| `--carousel-remaining-backwards` | Pixels remaining to scroll backwards. |
@@ -193,7 +193,7 @@ and returns `{ x: fadeSize, y: 0 }` so that next/prev navigation never scrolls i
193193
for use when composing a custom `boundaryOffset` on top of the default behaviour.
194194

195195
```ts
196-
type DefaultBoundaryOffset = (root: HTMLElement) => { x: number, y: number }
196+
type DefaultBoundaryOffset = (root: HTMLElement) => { x: number; y: number };
197197
```
198198

199199
### `Carousel.CSS_VARS`

0 commit comments

Comments
 (0)