Packages

surface

0.8.1
0.12.3 0.12.2 0.12.1 0.12.0 0.11.5 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.5 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.6 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.1 0.6.0 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.2 0.3.1 0.3.0 0.2.1 0.2.0 0.1.1 0.1.0 0.1.0-alpha.2 0.1.0-alpha.1 0.1.0-alpha.0

A component based library for Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
46 Versions
3 Dependencies
21 Dependants
Files
Activity
surface priv templates surface.init demo default demo.ex
Raw

priv/templates/surface.init/demo/default/demo.ex 

defmodule <%= inspect(web_module) %>.Demo do

  use Surface.LiveView



  alias <%= inspect(web_module) %>.Components.Card



  def render(assigns) do

    ~F"""

    <style>

      .flex {

        display: flex;

      }



      .items-center {

        align-items: center;

      }



      .justify-center {

        justify-content: center;

      }



      .h-screen {

        height: 100vh;

      }



      .tag {

        display: inline-block;

        background-color: #ddd;

        border-radius: 9999px;

        padding: 3px 10px;

        color: #888;

        font-weight: 500;

      }

    </style>



    <div class="flex items-center justify-center h-screen">

      <Card max_width="lg" rounded>

        <:header>

          Surface UI

        </:header>



        Start building rich interactive user-interfaces, writing minimal custom Javascript.

        Built on top of Phoenix LiveView, <strong>Surface</strong> leverages the amazing

        <strong>Phoenix Framework</strong> to provide a fast and productive solution to

        build modern web applications.



        <:footer>

          <span class="tag">#surface</span>

          <span class="tag">#phoenix</span>

          <span class="tag">#tailwindcss</span>

        </:footer>

      </Card>

    </div>

    """

  end

end