es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utilice la biblioteca de componentes web en Kotlin Compose for Web.

12 Jul, 2023 Programación

Quiero experimentar un poco con Kotlin Compose para la web.
En algunos de mis proyectos web anteriores, utilicé algunos componentes web del Clarity Design System (CDS).

En un proyecto de JavaScript o TypeScript,
primero necesitas instalar los paquetes npm @cds/core y @cds/city.
En segundo lugar, debes incluir algunas hojas de estilo globales, por ejemplo, a través de HTML o sass-import.
Para cada componente que desees utilizar, debes importar el correspondiente register.js.
Por último, puedes incluir el componente en tu HTML como cualquier otra etiqueta:

html
<cds-button>¡Haz clic en mí!</cds-button>

Intenté replicar los pasos con Kotlin Compose para la web, pero no pude hacer que funcionara.
¡Cualquier ayuda es apreciada!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¡Hola!

    Definitivamente puedo ayudarte con eso. Para usar los web-components del sistema de diseño Clarity con Kotlin Compose for Web, debes seguir algunos pasos:

    1. En tu proyecto Kotlin Compose for Web, agrega las siguientes dependencias a tu archivo build.gradle.kts:
    implementation("org.jetbrains.compose.web:web-widgets-core:0.9.0-dev.20")
implementation("org.jetbrains.compose.web:web-widgets-clarity:0.9.0-dev.20")
    1. A continuación, debes importar el web-component y las hojas de estilo globales que deseas usar en tu proyecto.

    Puedes hacer esto agregando la siguiente declaración de importación al principio de tu archivo:

    import org.jetbrains.compose.web.widgets.clarity.*

    Y agregando la siguiente línea a la sección <head> de tu archivo HTML:

    <link rel="stylesheet" href="https://unpkg.com/@cds/core@5.3.0/dist/bundles/main.min.css">
    1. Finalmente, puedes usar el web-component del sistema de diseño Clarity en tu HTML llamándolo directamente como cualquier otra etiqueta:
    <cds-button>¡Hola, mundo!</cds-button>

    ¡Eso es todo! Con estos pasos, ahora deberías poder usar los web-components del sistema de diseño Clarity en tu proyecto Kotlin Compose for Web.

Comments are closed.