¿Qué es NakamaUI?

es una biblioteca de componentes CSS destinada a la creación de contenedores y tarjetas visualmente atractivas. Es especialmente adecuada para plataformas dedicadas al anime y al cine, ofreciendo una amplia variedad de plantillas y componentes que permiten una implementación sencilla y eficiente. Su diseño se centra en la estética y la funcionalidad, facilitando a los desarrolladores la construcción de interfaces sofisticadas y personalizables.

Instalación

npm i nakamaui

CDN

https://unpkg.com/[email protected]/Ui/nakamaUi.mian.css - Estilo principal

https://unpkg.com/[email protected]/Ui/styles/nakamaNeonUi.css - Estilo Neon

https://unpkg.com/[email protected]/Ui/styles/nakamaWin95Ui.css - Estilo Win95Ui

importar a html

<link rel="stylesheet" href="/node_modules/nakamaui/Ui/nakamaUi.mian.css">

Componentes

Estructura HTML de una tarjeta (nakama-card)

Cada Componente depende de la platilla que usas pero estos son los componentes de la plantilla 'Original'

<div class="nakama-card">
  <img src="anime-image.jpg" alt="Anime Image">
  <span class="nakama-tag">Nuevo</span>
  <div class="nakama-title">Título del Anime</div>
  <div class="nakama-description">Descripción breve del anime.</div>
  <div class="nakama-chapters">Capítulos: 12</div>
</div>

Descripción de cada componente HTML

img: Contiene la imagen principal del anime que llenará toda la tarjeta.

• .nakama-tag: Etiqueta que aparecerá al pasar el mouse y mostrará información dinámica, como "Nuevo" o "Popular".

• .nakama-title: Muestra el título del anime, que aparecerá al pasar el mouse sobre la tarjeta.

• .nakama-description: Breve descripción del anime, visible al pasar el mouse.

• .nakama-chapters: Información de la cantidad de capítulos.

Importar Plantillas

Plantillas en total:

<link rel="stylesheet" href="/node_modules/nakamaui/Ui/nakamaUi.mian.css">
<link rel="stylesheet" href="/node_modules/nakamaui/Ui/styles/nakamaNeonUi.css">
<link rel="stylesheet" href="/node_modules/nakamaui/Ui/styles/nakamaWin95Ui.css">