Skip to content

Instantly share code, notes, and snippets.

@adamwathan

adamwathan/v-cloak.md

Last active November 6, 2024 14:28
Show Gist options
  • Save adamwathan/3584d1904e4f4c36096f to your computer and use it in GitHub Desktop.
Save adamwathan/3584d1904e4f4c36096f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adamwathan revised this gist Jun 5, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion v-cloak.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ Use like:
    </div>
    ```

    Includes variations for `block`, `inline`, and `inline-block` dispay attributes.
    Includes variations for `block`, `inline`, and `inline-block` display attributes.

    ```css
    [v-cloak] .v-cloak--block {
  2. adamwathan revised this gist Jun 4, 2015. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions v-cloak.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,33 +5,33 @@ Use like:
    ```html
    <div v-cloak>
    <h1>
    <span class="v-loading--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-loading--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
    </h1>
    </div>
    ```

    Includes variations for `block`, `inline`, and `inline-block` dispay attributes.

    ```css
    [v-cloak] .v-loading--block {
    [v-cloak] .v-cloak--block {
    display: block;
    }
    [v-cloak] .v-loading--inline {
    [v-cloak] .v-cloak--inline {
    display: inline;
    }
    [v-cloak] .v-loading--inlineBlock {
    [v-cloak] .v-cloak--inlineBlock {
    display: inline-block;
    }
    [v-cloak] .v-loading--hidden {
    [v-cloak] .v-cloak--hidden {
    display: none;
    }
    [v-cloak] .v-loading--invisible {
    [v-cloak] .v-cloak--invisible {
    visibility: hidden;
    }
    .v-loading--block,
    .v-loading--inline,
    .v-loading--inlineBlock {
    .v-cloak--block,
    .v-cloak--inline,
    .v-cloak--inlineBlock {
    display: none;
    }
    ```
  3. adamwathan created this gist Jun 4, 2015.
    37 changes: 37 additions & 0 deletions v-cloak.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    Handy helpers for controlling visibility of elements until Vue has compiled.

    Use like:

    ```html
    <div v-cloak>
    <h1>
    <span class="v-loading--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-loading--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
    </h1>
    </div>
    ```

    Includes variations for `block`, `inline`, and `inline-block` dispay attributes.

    ```css
    [v-cloak] .v-loading--block {
    display: block;
    }
    [v-cloak] .v-loading--inline {
    display: inline;
    }
    [v-cloak] .v-loading--inlineBlock {
    display: inline-block;
    }
    [v-cloak] .v-loading--hidden {
    display: none;
    }
    [v-cloak] .v-loading--invisible {
    visibility: hidden;
    }
    .v-loading--block,
    .v-loading--inline,
    .v-loading--inlineBlock {
    display: none;
    }
    ```