Botyglot Components V0.0.1

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<nav class="elevate--simple-navbar--nav-container">
  <div class="elevate--simple-navbar--left-side">
    <ul class="elevate--simple-navbar--nav-group-link">
      <li>
        <a href="/" class="elevate-link--scheme--primary">Home</a>
      </li>
      <li>
        <a href="/products" class="elevate-link--scheme--primary">Products</a>
      </li>
      <li>
        <a href="/about" class="elevate-link--scheme--primary">About</a>
      </li>
      <li>
        <a href="/contact" class="elevate-link--scheme--primary">Contact</a>
      </li>
    </ul>
  </div>
</nav>
1
2
3
4
5
6
render(Elevate::SimpleNavbarComponent.new) do |component|
  component.with_link(text: 'Home', url: '/')
  component.with_link(text: 'Products', url: '/products')
  component.with_link(text: 'About', url: '/about')
  component.with_link(text: 'Contact', url: '/contact')
end

No notes provided.

No params configured.

app/assets/stylesheets/components/simple_navbar.css

1
2
3
4
5
6
7
8
9
@layer components {
  .elevate--simple-navbar--nav-container {
    @apply bg-white rounded-md w-full mt-5 shadow px-4 py-4 flex items-center justify-between;
  }
  .elevate--simple-navbar--nav-group-link {
    @apply gap-x-3 flex items-center;
  }
}