Skip to content

CSS DSL

必要な依存関係: io.ktor:ktor-server-html-builder, org.jetbrains.kotlin-wrappers:kotlin-css

コード例: css-dsl

CSS DSLはHTML DSLを拡張し、kotlin-cssラッパーを使用してKotlinでスタイルシートを作成できるようにします。

スタイルシートを静的コンテンツとして提供する方法については、静的コンテンツの提供を参照してください。

依存関係の追加

CSS DSLはインストールを必要としませんが、ビルドスクリプトに以下のアーティファクトを含める必要があります。

  1. HTML DSL用のktor-server-html-builderアーティファクト:
Kotlin
Groovy
XML
  1. CSSをビルドするためのkotlin-css-jvmアーティファクト:
Kotlin
Groovy
XML

$kotlin_css_versionは、例えば1.0.0-pre.625のように、必要なkotlin-cssアーティファクトのバージョンに置き換えることができます。

CSSの提供

CSSレスポンスを送信するには、ApplicationCallを拡張し、スタイルシートを文字列にシリアライズしてCSSコンテンツタイプでクライアントに送信するrespondCssメソッドを追加する必要があります。

kotlin
suspend inline fun ApplicationCall.respondCss(builder: CssBuilder.() -> Unit) {
    this.respondText(CssBuilder().apply(builder).toString(), ContentType.Text.CSS)
}

次に、必要なルート内でCSSを提供できます。

kotlin
get("/styles.css") {
    call.respondCss {
        body {
            backgroundColor = Color.darkBlue
            margin = Margin(0.px)
        }
        rule("h1.page-title") {
            color = Color.white
        }
    }
}

最後に、HTML DSLで作成されたHTMLドキュメントに指定されたCSSを使用できます。

kotlin
get("/html-dsl") {
    call.respondHtml {
        head {
            link(rel = "stylesheet", href = "/styles.css", type = "text/css")
        }
        body {
            h1(classes = "page-title") {
                +"Hello from Ktor!"
            }
        }
    }
}

完全な例はこちらで見つけることができます: css-dsl