We created some classes to help you in developing perfect app
我们创建了一些class来帮助您开发完美的应用程序

Button Group 按钮组

This classes are used for creating button group component. You can check usage here.
此类用于创建按钮组组件。您可以在此处检查用法。

Blur Utility 模糊工具

There’s blur classes named: blur-x where x is 1 to 3. This applies blur in px unit according to class number.
模糊类名为：blur-x其中x为1到3。这根据类编号以px为单位应用模糊

  1. .blur-2 {
  2.   filter: blur(2px);
  3. }

Chip Component

We added number class to chip component for making chips complete round. You can see rounded chips in our email app and other. Here’s how to use it:
为了使chip组件更完整，我们添加了number class。您可以在我们的电子邮件应用程序等中看到四舍五入的筹码。 使用方法如下：

<vs-chip class="number">...</chip>

Gradient Background For Theme Colors 主题颜色的渐变背景

You can have gradient background for theme colors. List of gradient classes are as below:
您可以使用渐变背景作为主题颜色。渐变类列表如下：

  • bg-primary-gradient
  • bg-success-gradient
  • bg-danger-gradient
  • bg-warning-gradient
  • bg-dark-gradient

    Custom Dropdown 自定义下拉菜单

    We created custom dropdown for cart dropdown & notification dropdown. For this class is .dropdown-custom. Style of this class is as below:
    我们为购物车下拉列表和通知下拉列表创建了自定义下拉列表。这个class 是.dropdown-custom。该类的style如下：
.dropdown-custom {
  .vs-dropdown--custom {
    padding: 0 !important;
    border: 0;
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08) !important;
    // @apply shadow-lg;
  }

  .vs-dropdown--menu--after {
    background: rgba(var(--vs-primary), 1) !important;
    right: 1.6rem !important;
  }
}

Grid System 网格系统

Our template’s entire grid system is based on this grid classes. This classes follows tailwindCSS’s grid system utility classes.
我们模板的整个网格系统均基于此网格类。该类遵循tailwindCSS的网格系统实用程序类。

  • .vx-row: For creating Row 用于创建行
  • .vx-col: For creating Column 用于创建列

  • .vx-row.no-gutter: For creating row without spaces 用于创建没有空格的行

    Input

    There was some style needs in input component and we also created classes for that which also helps you in using same style of input in more than one places.
    输入组件中有一些样式需求，我们还为此创建了类，这也可以帮助您在多个地方使用相同样式的输入。

  • .vs-input-no-border: Create vs-input component without border

  • .vs-input-no-border：创建vs-input无边框的组件
  • .vs-input-no-shdow-focus: Omit shadow on focus of input component
  • vs-input-no-shdow-focus：忽略输入组件焦点上的阴影
  • .vs-input-shadow-drop: Custom shadow for input component
  • vs-input-shadow-drop：输入组件的自定义阴影
  • .vs-select-no-border: This removes border from vs-select component. e.g. E-Commerce App Filtering

  • .vs-select-no-border：这将删除vs-select组件的边框。例如，电子商务应用程序过滤

    Vertical Navigation Menu 垂直导航菜单

    As you explored vuexy admin you might have noticed we used vs-sidebar component more than just for demo. e.g. We used it in our apps.

  • .sidebar-spacer: This is used for creating sidebar in apps or any layout. e.g. ToDo App Sidebar

  • .sidebar-spacer：用于在应用程序或任何布局中创建侧边栏。例如ToDo App侧边栏
  • .sidebar-spacer-with-margin: This is same as above just gives you some room for whitespace around your sidebar. e.g. E-Commerce App Sidebar
  • .sidebar-spacer-with-margin：与上面相同，只是为您在边栏周围留出一些空白空间。例如，电子商务应用程序侧栏
  • .sidebar-spacer—wide: This is another variant of .sidebar-spacer. Difference is it has more width than normal sidebar. e.g. Chat App Sidebar
  • .sidebar-spacer—wide：这是的另一个变体.sidebar-spacer。区别在于它具有比普通侧边栏更大的宽度。例如，聊天应用工具栏
  • .background-absolute: This used for giving vs-sidebar component’s background position absolute. This is not super useful but you might need them in case. e.g. E-Commerce App Sidebar Background
  • .background-absolute：用于提供vs-sidebar组件的背景position绝对值。这不是超级有用，但是您可能需要它们以防万一。例如，电子商务应用程序侧栏背景
  • .items-no-padding: This is used for removing padding added to .vs-sidebar--items. We have used this class in almost all apps as we didn’t want padding to sidebar items container.
  • .items-no-padding：用于删除添加到.vs-sidebar--items中的填充。我们几乎在所有应用程序中都使用了此类，因为我们不想填充到侧边栏项目容器中。
  • .full-vs-sidebar: This classes is useful when you want to use sidebar component along with .sidebar-spacer. This class will create full width sidebar for you(100% - $(.sidebar-spacer)). You can check example of this in our Email App, open any mail and you will see large sidebar slides from right to left. That is full width sidebar which uses .full-vs-sidebar class. Note: it also uses media query in which, from screen less than 992px sidebar will take full width(100%).

  • .full-vs-sidebar：当您希望将sidebar组件与一起使用时，此类非常有用.sidebar-spacer。此类将为you（100% - $(.sidebar-spacer)）创建全宽边栏。您可以在我们的电子邮件应用程序中查看此示例，打开任何邮件，您将看到从右到左的大型侧边栏幻灯片。那是使用.full-vs-sidebar类的全宽边栏。注意：它也使用媒体查询，在该查询中，屏幕上小于992px边栏的将占全角（100%）。

    Tabs Component

    Tabs component is really helpful but using it also require some style changes when you want to build perfect UI. Here’s some classes we used for tweaking the component.
    Tabs组件确实很有帮助，但要构建完美的UI时，使用它也需要进行一些样式更改。这是我们用于调整组件的一些类。

  • .tabs-shadow-none: This remove shadow from tabs list. e.g. User Settings Page

  • .tabs-shadow-none：这将从选项卡列表中删除阴影。例如用户设置页面
  • .tab-action-btn-fill-conatiner: This is useful in case where you want to give extra padding at bottom of tab-content area. This is super useful when you have content which have shadow and that content is placed last ni tab content. We used this class in user edit page because of action button at bottom of tab content. Without this classes shadow of action button gets cut.

  • .tab-action-btn-fill-conatiner：如果要在制表符内容区域的底部添加额外的填充，这很有用。当您有带有阴影的内容并且该内容位于选项卡内容的最后时，此功能非常有用。由于标签内容底部的操作按钮，我们在用户编辑页面中使用了此类。没有此类，动作按钮的阴影将被剪切。

    Dark Theme

    Applying style for same thing over and over for dark mode is inefficient. That’s we created some classes which have different style for both themes.

    TIP Note: “dark”(var: > $theme-dark-bg) background refers to background which is given to card component & “dark-light”(var: > $theme-dark-light-bg) background refers to background given to body

  • .d-theme-dark-bg: Gives dark background in dark theme and white background in light theme.

  • .d-theme-dark-light-bg: Gives dark-light background in dark theme and white background in light theme.
  • .d-theme-dark-border: Gives white border in light mode and dark border(var: $theme-dark-border-color) for dark mode.
  • .d-theme-border-grey-light: Gives light grey(#dae1e7) border in light mode and dark border(var: $theme-dark-border-color) for dark mode.
  • .d-theme-input-dark-bg: Gives dark background in dark mode.
  • .d-theme-text-inverse: Gives default color in light mode and gives normal text color in dark mode. Suitable for light background. (This might get removed in future versions. Used in 404, 500, Maintenance, Not Authorized Pages)
  • .d-theme-heading-color: Gives default color in light mode and gives normal text color in dark mode. Suitable for light background. (This might get removed in future versions. Used in 404, 500, Maintenance, Not Authorized Pages)

  • .table-dark-inverted: Used to give dark background to table rows. e.g. Analytics Dashboard table. (This might get removed in future versions. Used in 404, 500, Maintenance, Not Authorized Pages)

    Typography

    There’s always need for some text utility classes

  • truncate: truncate the text 截断文本

  • text-bg: Gives larger text which is not defined in tailwind and don’t need variants 给出较大的文本，该文本未在顺风中定义并且不需要变体

  • text-color-base: Gives base color(var: $content-color) 给出基色

    Avatar + List

    This is modern design and displaying avatar side by side with some margin is our of fashion. Check our Analytics dashboard table and there you will find list of avatars.
    这是现代设计，将头像并排显示是我们的时尚。查看我们的Google Analytics（分析）仪表板表，您将在其中找到化身列表。

  • .user-list: Gives avatar list with pleasant hover effect

  • .user-list：提供头像列表，具有令人愉快的悬停效果

    Uncategorized

    Here’s list of some more classes

  • .responsive: For creating responsive images 用于创建响应图像

  • .bordered-items: Gives border bottom to list items except last item(var: $grey-light) 提供边框底部，除了最后一个项目列表项（VAR： $grey-light）
  • .enable-rtl-x-scroll: This will let you enable x scroll in rtl for perfectScrollBar as it is disabled in RTL 这将允许您在rtl中为perfectScrollBar启用x滚动，因为已在RTL中将其禁用

    Dynamic Custom Class

    Sometimes you may need to add class to Vue App(#app div) for specific page and apply style to only that page. e.g. Invoice Page. You can run below code in mounted hook of your route component to add class to root Vue app for your own customization.
    有时您可能需要#app为特定页面将类添加到Vue App（div），并将样式仅应用于该页面。例如发票页面。您可以在路由组件的mounted 钩子中的运行以下代码，以将类添加到root Vue应用中以进行自定义。
this.$emit("setAppClasses", "invoice-page")