Sax Design Vue

Default

Quickly generate a menu with the navbar component, as such the component is divided into 3 slots (left, center (default), right) with which you can determine the location of the elements, as sub components we have navbar-item and navbar-group

Code copied

<template>
  <div class="center example-nav">
    <s-navbar v-model="active" center-collapsed>
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-item id="guide"> Guide </s-navbar-item>
      <s-navbar-item id="docs"> Documents </s-navbar-item>
      <s-navbar-item id="components"> Components </s-navbar-item>
      <s-navbar-item id="license"> license </s-navbar-item>
      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div class="square">
      <div id="child1" class="child">child 1</div>
      <div id="child2" class="child">child 2</div>
      <div id="child3" class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

<style lang="scss" scoped>
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 22px;
  }
}
</style>

Color

Change the component’s color with the color property or by directly adding one of the main Sax Design colors

if you want to change the text color to white you can do it with the property text-white

Code copied

<template>
  <div class="center example-nav">
    <s-navbar v-model="active" text-white :color="active" right-collapsed>
      <template #left>
        <img src="/logos/logo-vuesax-logotipo-vuesax-png-4.png" alt="" />
      </template>
      <template #right>
        <s-navbar-item id="primary"> Primary </s-navbar-item>
        <s-navbar-item id="success"> Success </s-navbar-item>
        <s-navbar-item id="danger"> Danger </s-navbar-item>
        <s-navbar-item id="warn"> Warn </s-navbar-item>
        <s-navbar-item id="dark"> Dark </s-navbar-item>
        <s-navbar-item id="#7d33ff"> HEX </s-navbar-item>
        <s-navbar-item id="rgb(59,222,200)"> RGB </s-navbar-item>
      </template>
    </s-navbar>
    <div class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { Color } from 'sax-design-vue'

const active = ref<Color>('primary')
</script>

<style lang="scss" scoped>
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 22px;
  }
}
</style>

Hide scroll

Add functionality to hide navbar when user scroll down and show when upload

Code copied

<template>
  <div class="center example-nav">
    <s-navbar
      v-model="active"
      target-scroll="#hide-scroll-content"
      hide-scroll
      center-collapsed
    >
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-item id="guide" :active="active == 'guide'">
        Guide
      </s-navbar-item>
      <s-navbar-item id="docs" :active="active == 'docs'">
        Documents
      </s-navbar-item>
      <s-navbar-item id="components" :active="active == 'components'">
        Components
      </s-navbar-item>
      <s-navbar-item id="license" :active="active == 'license'">
        license
      </s-navbar-item>
      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div id="hide-scroll-content" class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

<style lang="scss" scoped>
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 22px;
  }
}
</style>

Group

You can add a list of elements within an item with the s-navbar-group component and within it add the s-navbar-item components

Code copied

<template>
  <div class="center example-nav">
    <s-navbar v-model="active" center-collapsed>
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-group>
        Docs
        <template #items>
          <s-navbar-item id="guide" :active="active == 'guide'">
            Guide
          </s-navbar-item>
          <s-navbar-item id="docs" :active="active == 'docs'">
            Documents
          </s-navbar-item>
          <s-navbar-item id="components" :active="active == 'components'">
            Components
          </s-navbar-item>
        </template>
      </s-navbar-group>

      <s-navbar-group>
        Ecosystem

        <template #items>
          <h5 class="title">Social</h5>

          <s-navbar-item id="Github" :active="active == 'Github'">
            Github
          </s-navbar-item>
          <s-navbar-item id="Discord" :active="active == 'Discord'">
            Discord
          </s-navbar-item>
          <s-navbar-item id="Twitter" :active="active == 'Twitter'">
            Twitter
          </s-navbar-item>
          <s-navbar-item id="Medium" :active="active == 'Medium'">
            Medium
          </s-navbar-item>
        </template>
      </s-navbar-group>

      <s-navbar-item id="License" :active="active == 'License'">
        License
      </s-navbar-item>

      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

<style lang="scss" scoped>
.title {
  text-align: left;
  margin: 0px;
  width: 100%;
  padding: 5px 6px;
}
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 25px;
  }
}
</style>

Padding Scroll

Add the functionality that the component has a padding up and down that when it is lowered the scroll is eliminated giving a pleasant effect

Code copied

<template>
  <div class="center example-nav">
    <s-navbar
      v-model="active"
      target-scroll="#padding-scroll-content"
      padding-scroll
      center-collapsed
    >
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-item id="guide" :active="active == 'guide'">
        Guide
      </s-navbar-item>
      <s-navbar-item id="docs" :active="active == 'docs'">
        Documents
      </s-navbar-item>
      <s-navbar-item id="components" :active="active == 'components'">
        Components
      </s-navbar-item>
      <s-navbar-item id="license" :active="active == 'license'">
        license
      </s-navbar-item>
      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div id="padding-scroll-content" class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

<style lang="scss" scoped>
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 22px;
  }
}
</style>

Square

Remove the border-radius property by making the component square

Code copied

<template>
  <div class="center example-nav">
    <s-navbar v-model="active" square center-collapsed>
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-item id="guide" :active="active == 'guide'">
        Guide
      </s-navbar-item>
      <s-navbar-item id="docs" :active="active == 'docs'">
        Documents
      </s-navbar-item>
      <s-navbar-item id="components" :active="active == 'components'">
        Components
      </s-navbar-item>
      <s-navbar-item id="license" :active="active == 'license'">
        license
      </s-navbar-item>
      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

<style lang="scss" scoped>
.square {
  height: 400px;
  position: relative;
  overflow: auto;
  width: 100%;
  .child {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.example-nav {
  background: #f0f0f0 !important;
  padding: 0px !important;
  position: relative;
  img {
    max-height: 22px;
  }
}
</style>

Not line

Eliminates the active effect line of the component

Code copied

<template>
  <div class="center example-nav">
    <s-navbar v-model="active" not-line center-collapsed>
      <template #left>
        <img src="/logo2.png" alt="" />
      </template>
      <s-navbar-item id="guide" :active="active == 'guide'">
        Guide
      </s-navbar-item>
      <s-navbar-item id="docs" :active="active == 'docs'">
        Documents
      </s-navbar-item>
      <s-navbar-item id="components" :active="active == 'components'">
        Components
      </s-navbar-item>
      <s-navbar-item id="license" :active="active == 'license'">
        license
      </s-navbar-item>
      <template #right>
        <s-button type="flat">Login</s-button>
        <s-button>Get Started</s-button>
      </template>
    </s-navbar>
    <div class="square">
      <div class="child">child 1</div>
      <div class="child">child 2</div>
      <div class="child">child 3</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref('guide')
</script>

Types

interface NavItem {
  text?: string
  ariaLabel?: string
}

interface NavLink extends NavItem {
  path: string
  target?: string
}

type NavbarItem = NavLink

API

PROPS

Property	Type	Values	Description	default	Example
fixed	Boolean	truefalse	Defines if the component is fixed on the screen.	—
shadow	Boolean	truefalse	Add a shadow to the component.	primary
shadow-scroll	Boolean	truefalse	Add functionality to add shadow to component when scrollTop is more than 0.	—
hide-scroll	Boolean	truefalse	Add the functionality to hide and show the component based on whether the scroll is lowered or raised.	—	Usage
textWhite	Boolean	truefalse	Change the text color of items to white.	—	Usage
square	Boolean	truefalse	Change the border radius to 0 by making the component square.	—	Usage
padding-scroll	Boolean	truefalse	Determines if the component has padding and the user scrolling is removed making an effect.	—	Usage
not-line	Boolean	truefalse	Delete the active line in the component.	—	Usage
left-collapsed	Boolean	truefalse	Add the functionality that when the elements of this slot cannot be correctly they are visually removed.	—	Usage
center-collapsed	Boolean	truefalse	Add the functionality that when the elements of this slot cannot be correctly they are visually removed.	—	Usage
right-collapsed	Boolean	truefalse	Add the functionality that when the elements of this slot cannot be correctly they are visually removed.	—	Usage
target-scroll	Boolean	truefalse	Determines the element to which the scroll event will be requested.	document	Usage
item:active	Boolean	truefalse	Determines if the component is in active status.	—	Usage
item:to	String, Object	vue-router RouteLocationRaw	Use vue-router to generate a new view based on the supplied string.	—
item:to	String, Object	vue-router RouteLocationRaw	Use vue-router to generate a new view based on the supplied string.	—
item:link	Object	NavLink	Use to navigate the site	—
No matching data

SLOTS

Property	Type	Values	Description	default	Example
default	slot	—	Add the elements in the center of the component.	—	Usage
left	slot	—	Add the elements on the left side of the component.	—	Usage
right	slot	—	Add the elements on the right side of the component.	—	Usage
No matching data

MenuNotice bar

# Navbar

# Default

# Color

# Hide scroll

# Group

# Padding Scroll

# Square

# Not line

# Types

# API

PROPS

SLOTS

Navbar

Default

Color

Hide scroll

Group

Padding Scroll

Square

Not line

Types

API