2.10.3 ā¢ Published 3 months ago
@ovchinnikov-lxs-frontend/ui-kit v2.10.3
UI-kit for my vue 3 projects
Install
npm i @ovchinnikov-lxs-frontend/ui-kit
Example of usage:
Import default ui-kit css styles
_bundle.sccs
or@import "@ovchinnikov-lxs-frontend/ui-kit/dist/ui-kit.css";
main.ts
import '@ovchinnikov-lxs-frontend/ui-kit/dist/ui-kit.css';
Create a component in your project and add styles from your style guide based on the component props
components/ui/UiButton/UiButton.vue
<script setup lang="ts"> // Components import { UiButton } from '@ovchinnikov-lxs-frontend/ui-kit'; </script> <template> <UiButton v-bind="$attrs"> <slot></slot> </UiButton> </template> <style lang="scss"> .UiButton { &.--large-size { padding: 16px 32px; font-size: 24px; } &.--red-color { background: red; color: white; } } </style>
Use in project
components/YourComponent.vue
<script setup lang="ts"> import UiButton from '~/components/ui/UiButton/UiButton.vue'; </script> <template> <form> .... <UiButton size="large" color="red">submit</UiButton> </form> </template>
List of the components
š - in progress
š§ - experimental
UiButton
UiLink
UiFormCell
UiInput
UiFileInput
- š§UiRichText
UiCheckbox
UiToggle
- š§UiRadio
UiPopover
UiSelect
UiTooltip
UiIcon
UiSwiper
- š§UiImage
UiPlate
UiCollapse
UiPreloader
Develop
Install dependencies
npm install
Storybook
npm run storybook
Lint
Check eslint and stylelint
npm run lint:check
Fix eslint and stylelint
npm run lint:fix
Unit tests
npm run test