Bulma Overflow Touch - Zentica

Bulma Overflow Touch - Zentica

In diesem Artikel werden wir darüber erfahren Bulma-Überlauf-Touch-Mixin. Dieses Mixin ermöglicht, ob die Touch-Geräte für ein Element impulsbasiertes Scrollen verwenden sollen oder nicht. Dieses Mixin fügt die hinzu -Webkit-Überlauf-Scrollen: berühren; Regel zum HTML-Element.

Es gibt keine spezifische Klasse von Bulma zum Erstellen eines Überlauf-Touch-Mixins. Wir müssen unsere eigene Klasse erstellen und sie mit SASS-Mixins gestalten.

Syntax:

<div class="touch-scroll-mixin">
    <p>
      ....
    </p>
</div>

.touch-scroll-mixin {
    @include overflow-touch();
}

Notiz: Für die folgenden Beispiele müssen Sie die Implementierung von SASS-Mixins kennen. Bitte sehen Sie sich die Voraussetzung an, die auf dem Link angegeben ist, und implementieren Sie dann den folgenden Code.

Beispiel 1: Das folgende Beispiel zeigt das Bulma Overflow Touch Mixin.

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <link rel="stylesheet"

          href=

    <script src=

    </script>

    <link rel="stylesheet"

          href="demo.css">

</head>

 

<body>

    <div class="content container has-text-centered">

        <h1 class="title has-text-success">

          GeekforGeeks

        </h1>

        <h1 class="subtitle">

          Bulma Overflow touch Mixin

        </h1>

    </div>

 

    <div class="container">

        <div class="touch-scroll-mixin">

            <p class="has-background-success has-text-white">

                This text has the touch scroll mixin applied.

            </p>

 

        </div>

        <div class="auto-scroll-mixin has-text-white">

            <p class="has-background-success">

                This text does not has a mixin.

            </p>

 

        </div>

    </div>

</body>

 

</html>

CSS

@mixin overflow-touch() {

    -webkit-overflow-scrolling: touch;

    width: 100%;

    overflow: auto;

}

 

p {

    width: 200%;

    border: 2px solid #eaf2f4;

    padding: 10px;

}

 

.touch-scroll-mixin {

    @include overflow-touch();

}

Ausgabe:

Bulma Overflow-Touch

Bulma Overflow-Touch

Beispiel 2: Ein weiteres Beispiel, das das Bulma Overflow Touch Mixin veranschaulicht.

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <link rel="stylesheet"

          href=

    <script src=

    </script>

    <link rel="stylesheet"

          href="demo.css">

</head>

 

<body>

    <div class="content container has-text-centered">

        <h1 class="title has-text-success">

          GeekforGeeks

        </h1>

        <h1 class="subtitle">

          Bulma Overflow touch Mixin

        </h1>

    </div>

 

    <div class="container">

        <div class="touch-scroll-mixin">

            <h1 class="touch title">

                Welcome to GeekforGeeks. Find programming

                articles, tutorials, and more.

            </h1>

        </div>

    </div>

</body>

 

</html>

CSS

@mixin overflow-touch() {

    -webkit-overflow-scrolling: touch;

    width: 100%;

    overflow: auto;

}

 

.touch {

    width: 200%;

    border: 2px solid #eaf2f4;

    padding: 10px;

}

 

.touch-scroll-mixin {

    @include overflow-touch();

}

Ausgabe:

Bulma Overflow-Touch

Bulma Overflow-Touch

Referenz: https://bulma.io/documentation/utilities/mixins/#overflow-touch


Sie könnten auch interessiert sein an