@namelessdev/blocks
v0.0.5
Published
## Beta версия, не предназначена для продакшена
Downloads
16
Readme
Nameless Blocks
Beta версия, не предназначена для продакшена
Пакет с функдаметральными блоками для построения вашего интерфейса. Эти блоки дают вам базовые стили и возможность какими html тегами или вашими личными компонентами они будут являтся. Так же у них есть возможность мигрировать в свой дочерний элемент, чтобы разделять свойства. но не добавлять колличесво тегов, аналог asChild из Radix-ui, но построена на библиотеке @namelessdev/slots. Для стилизации используется TailwindCSS, атрибут className расширен и принимает тип ClassValue из библиотеки clsx. Так же все функции типа grid, flex, conteiner и тому подобного назначатся при помощи TailwindCSS для облегчения функциональности, так как в TailwindCSS они уже есть и хорошо работают.
Box
Простой аналог div или другова элемента который вы укажете в as?: T | React.FC
.
Во круг него строятся все остальные компоненты этого пакета.
const DecorativeBox: FC = () => {};
<Box className="p-5 rounded-md" as={DecorativeBox}>
<Heading>Hello</Heading>
</Box>;
<Box className="p-5 rounded-md">
<DecorativeBox slot="parent">
<Heading>Hello</Heading>
</DecorativeBox>
</Box>
Flex
Компонент для создания flex layout. Это обёртка над Box, которые добавляет стили
flex justify-center items-center gap-3
. У него есть все теже функции, что и у Box.
Отступы и другие настройки применяются при помощи классов TailwindCSS
<Flex
as="menu"
className={{
"bg-blue-200 p-5": isVisibility,
}}
>
<Box className="w-5 h-5 rounded-md">1</Box>
<Box className="w-5 h-5 rounded-md">2</Box>
<Box className="w-5 h-5 rounded-md">3</Box>
<Box className="w-5 h-5 rounded-md">4</Box>
</Flex>
Stack
Полный аналог компонента Flex, только с самого начала добавлсяет flex-col
.
<Stack className="gap-3">
<Box className="w-5 h-5 rounded-md">1</Box>
<Box className="w-5 h-5 rounded-md">2</Box>
<Box className="w-5 h-5 rounded-md">3</Box>
<Box className="w-5 h-5 rounded-md">4</Box>
</Stack>
Grid
Компонент для создания сеток на основе css Grid. Настройки сетки применяются при помощи классов TailwindCSS.
<Grid
className={{
"grid-cols-2": isTrue,
"grid-cols-[200px_minmax(900px,_1fr)]": isFalse,
"gap-3": true,
}}
>
<Box className="w-5 h-5 rounded-md">1</Box>
<Box className="w-5 h-5 rounded-md">2</Box>
<Box className="w-5 h-5 rounded-md">3</Box>
<Box className="w-5 h-5 rounded-md">4</Box>
</Grid>
Section
Это компонент для отделения секций. Это единственный компонент в пакете,
который может быть только тегом section
, так как это синтаксицеский компонент.
<Box className="py-5">
<DecorativeBox>
<Section slot="parent">
<Heading>Hello World</Heading>
</Section>
</DecorativeBox>
</Box>
Container
Компонент для ограничения максимальной ширины страницы и выравнивания по центру. Все настройки так же применяются при помощи классов TailwindCSS container
<Container className="max-w-screen-lg p-5 rounded-md">
<Flex slot="parent">
<Heading>Hello World</Heading>
</Flex>
</Container>