88 lines
2.4 KiB
Markdown
88 lines
2.4 KiB
Markdown
# Getting started
|
|
|
|
## Installation
|
|
|
|
Install Kobalte by running either of the following:
|
|
|
|
npmyarnpnpm
|
|
|
|
```
|
|
Copybash
|
|
npm install @kobalte/core
|
|
```
|
|
|
|
```
|
|
Copybash
|
|
npm install @kobalte/core
|
|
```
|
|
|
|
## Using the components
|
|
|
|
The example below demonstrate how to create a Popover component with Kobalte.
|
|
|
|
Learn more
|
|
|
|
index.tsxstyle.css
|
|
|
|
```
|
|
Copytsx
|
|
import { Popover } from "@kobalte/core/popover";
|
|
import { CrossIcon } from "some-icon-library";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
<Popover>
|
|
<Popover.Trigger class="popover__trigger">Learn more</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Content class="popover__content">
|
|
<Popover.Arrow />
|
|
<div class="popover__header">
|
|
<Popover.Title class="popover__title">About Kobalte</Popover.Title>
|
|
<Popover.CloseButton class="popover__close-button">
|
|
<CrossIcon />
|
|
</Popover.CloseButton>
|
|
</div>
|
|
<Popover.Description class="popover__description">
|
|
A UI toolkit for building accessible web apps and design systems with SolidJS.
|
|
</Popover.Description>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover>
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
import { Popover } from "@kobalte/core/popover";
|
|
import { CrossIcon } from "some-icon-library";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
<Popover>
|
|
<Popover.Trigger class="popover__trigger">Learn more</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Content class="popover__content">
|
|
<Popover.Arrow />
|
|
<div class="popover__header">
|
|
<Popover.Title class="popover__title">About Kobalte</Popover.Title>
|
|
<Popover.CloseButton class="popover__close-button">
|
|
<CrossIcon />
|
|
</Popover.CloseButton>
|
|
</div>
|
|
<Popover.Description class="popover__description">
|
|
A UI toolkit for building accessible web apps and design systems with SolidJS.
|
|
</Popover.Description>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover>
|
|
}
|
|
```
|
|
|
|
In a few lines of code, we've implemented a fully accessible Popover component that :
|
|
|
|
- Adheres to [WAI-ARIA Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) design pattern.
|
|
- Can be controlled or uncontrolled.
|
|
- Optionally render a pointing arrow.
|
|
- Has focus fully managed and customizable.
|
|
|
|
Previous[←Introduction](https://kobalte.dev/docs/core/overview/introduction)Next[Styling→](https://kobalte.dev/docs/core/overview/styling) |