Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gyeonghokim/gyeongho-design-system
Design System for My Business
https://github.com/gyeonghokim/gyeongho-design-system
design-system lit
Last synced: about 10 hours ago
JSON representation
Design System for My Business
- Host: GitHub
- URL: https://github.com/gyeonghokim/gyeongho-design-system
- Owner: GyeongHoKim
- Created: 2024-04-20T05:24:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-22T12:09:51.000Z (6 months ago)
- Last Synced: 2024-05-22T13:30:57.402Z (6 months ago)
- Topics: design-system, lit
- Language: TypeScript
- Homepage: https://6634ee600f29f2f8b550ac5d-dkzucdiubd.chromatic.com/
- Size: 2.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Installation
To install the `@gyeongho/gyeongho-web-component` package using npm, follow these steps:
1. Add the Github registry to your npm configuration:
- Create or edit the `.npmrc` file in your home directory.
- Add the following lines to the `.npmrc` file:
```
@gyeongho:registry=https://npm.pkg.github.com
```
2. Install the package using npm:
```bash
npm install @gyeongho/gyeongho-web-component
```
That's it! You should now have the `@gyeongho/gyeongho-web-component` package installed in your project.
If you encounter any issues during the installation process, please make sure you have correctly followed the steps above and have the necessary permissions to access the package.
For more information and usage examples, refer to the package documentation.
## Usage(Without Bundler)
add importMap in your html file.
```html
{
"imports": {
"@gyeonghokim/gyeongho-web-components": "YOUR_PATH/gyeongho-web-components/dist/ghwc.es.js"
}
}
import "@gyeonghokim/gyeongho-web-components";
```
and use it in your html file, or in your framework or library.
```html
Column 1
Column 2
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
```
## Usage(With Bundler)
If you are using a bundler like Webpack or Rollup, you can import the package directly in your JavaScript code.
first, link the css file in your html file.
```html
```
and import the package in your JavaScript or TypeScript code.
```javascript
import "@gyeonghokim/gyeongho-web-components";
// if you want to override the Component Class
import { GHTable } from "@gyeonghokim/gyeongho-web-components/src/components/table/index";
```
## Explore Our Components
Our Storybook includes documentation for all the available components. Explore the "Docs" tab of each component to learn more about its properties, events, and slots.
- **gh-table** - A table component
## Customize
`@gyeongho/gyeongho-web-components` are built with Lit library, designed to be customizable. You can style them using CSS variables or extend them using Web Component standards.
if you want to customize the style, you can override `styles` property in the component.
## Contributing
I welcome contributions to `@gyeongho/gyeongho-web-components`. If you have suggestions for improvements or find any issues, please open an issue or submit a pull request.
Thank you for using `@gyeongho/gyeongho-web-components`.