SPSS,UP System
\r\nระบบบริหารจัดการข้อมูล คณะรัฐศาสตร์และสังคมศาสตร์ ม.พะเยา
\r\nEquipment Systems
\r\nระบบยืมคืนวัสดุอุปกรณ์ คณะรัฐศาสตร์และสังคมศาสตร์ ม.พะเยา
\r\nSPSS,UP System
\r\nระบบบริหารจัดการข้อมูล คณะรัฐศาสตร์และสังคมศาสตร์ ม.พะเยา
\r\nลงชื่อเข้าใช้งานด้วย Office 365 ของมหาวิทยาลัยพะเยา เท่านั้น
\r\nEquipment Systems
\r\nระบบยืมคืนวัสดุอุปกรณ์ คณะรัฐศาสตร์และสังคมศาสตร์ ม.พะเยา
\r\nลงชื่อเข้าใช้งานด้วย Office 365 ของมหาวิทยาลัยพะเยา เท่านั้น
\r\n{{ label }}
\r\n{{ label }}
\r\nVue Material Admin
\r\nvue material test model
\r\n\r\n Oops. Looks like the page you're looking for no longer exists\r\n
\r\n\r\n But we're here to bring you back to safety\r\n
\r\n\r\n ขออภัย. เราไม่พบข้อมูล Email ของท่านในระบบ\r\n
\r\n\r\n โปรดใช้ Email ของมหาวิทยาลัยพะเยาเท่านั้น\r\n
\r\nSupport Tracker
\r\nTickets
\r\nNew Tickets
\r\nOpen
\r\nRate
\r\nApp Performance
\r\nServer Overview
\r\nRevenue Breakdown
\r\nDaily Line Chart
\r\nLight Blue
\r\nSing App
\r\nRNS
\r\nRecent Orders
\r\n{{ this.profile_data.fname_th }}\r\n {{ this.profile_data.lname_th }}
\r\n{{ this.profile_data.fname_en }}\r\n {{ this.profile_data.lname_en }}
\r\n {{ this.profile_data.email }}\r\nข้อมูลส่วนตัว
\r\n{{ img.title }}
\r\n{{ img.subtitle }}
\r\n \r\nผลงาน
\r\nStates Colors
\r\nThere is a couple of brand colors that we're using.
\r\n{{ item.example }}\r\n {{ item.hex }}\r\n Typography Colors
\r\nExample buttons
\r\nHow it works
\r\nVuetify's grid system uses a series of containers, rows, and\r\n columns to layout and align content. It’s built with flexbox and is fully responsive.
\r\n\r\n<v-row justify=\"space-between\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n One of three\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"secondary\">\r\n <h6 class=\"white--text\">\r\n One of three\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"warning\">\r\n <h6 class=\"white--text\">\r\n One of three\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n
Equal width
\r\nFor example, here are two grid layouts that apply to every device\r\n and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every\r\n column will be the same width.
\r\n\r\n<v-row justify=\"space-between\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 1 of 2\r\n </h6>\r\n </v-col>\r\n\r\n <v-col cols=\"3\" class=\"secondary\">\r\n <h6 class=\"white--text\">\r\n 1 of 2\r\n </h6>\r\n </v-col>\r\n</v-row>\r\n
Grid options
\r\nWhile Material UI grid uses ems or rems for defining most sizes, pxs are used for grid breakpoints and\r\n container widths. This is because the viewport width is in pixels and does not change with the font size.\r\n See how aspects of the Material UI grid system work across multiple devices with a handy table.
\r\n| Device | \r\nCode | \r\nTypes | \r\nRange | \r\n
|---|---|---|---|
| \r\n \r\n Extra small\r\n | \r\n\r\n xs\r\n | \r\nsmall to large handset | \r\n< 600px | \r\n
| \r\n \r\n Small\r\n | \r\n\r\n sm\r\n | \r\nsmall to medium tablet | \r\n600px > < 960px | \r\n
| \r\n \r\n Medium\r\n | \r\n\r\n md\r\n | \r\nlarge tablet to laptop | \r\n960px > < 1264px* | \r\n
| \r\n \r\n Large\r\n | \r\n\r\n lg\r\n | \r\ndesktop | \r\n1264px* > < 1904px* | \r\n
| \r\n \r\n Extra large\r\n | \r\n\r\n xl\r\n | \r\n4k and ultra-wides | \r\n> 1904px* | \r\n
| \r\n \r\n * -16px on Desktop\r\n \r\n | \r\n
Vertical Alignment
\r\nUse flexbox alignment utilities to vertically and horizontally align columns.
\r\n\r\n<v-row justify=\"start\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n Start\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n\r\n<v-row justify=\"center\">\r\n <v-col cols=\"3\" class=\"secondary\">\r\n <h6 class=\"white--text\">\r\n Center\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n\r\n<v-row justify=\"end\">\r\n <v-col cols=\"3\" class=\"warning\">\r\n <h6 class=\"white--text\">\r\n End\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n
Vertical Alignment
\r\nUse flexbox alignment utilities to vertically and horizontally align columns.
\r\n\r\n<v-row justify=\"end\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 1\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 2\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n\r\n<v-row justify=\"space-around\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 1\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 2\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n\r\n<v-row justify=\"space-between\">\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 1\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"primary\">\r\n <h6 class=\"white--text\">\r\n 2\r\n </h6>\r\n <v-col>\r\n\r\n <v-col cols=\"3\" class=\"warning\">\r\n <h6 class=\"white--text\">\r\n 3\r\n </h6>\r\n <v-col>\r\n</v-row>\r\n\r\n
Employee List
\r\nMaterial-UI Table
\r\nSorting & Selecting
\r\nThis example demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar.
\r\nCustom Table Action
\r\nThe\r\n Action property of the TablePagination component allows the implementation of custom actions.
\r\nNavbar Example
\r\nApp bar displays yours app links by importing and inserting AppBar component.\r\n To swap links style add attribute within Button component.
\r\nWith menu
\r\nNavbar Search
\r\nSearch icon makes UX more flexible. To start using search icon,\r\n make sure you got all relative functions.
\r\nNavbar can contain background images. You can set source via the src prop.
\r\nTooltip Example
\r\nTooltips can wrap any element.
\r\nPopover Example
\r\nThe v-tooltip component is useful for conveying information when a user hovers over an element.
\r\nTooltip Directions
\r\nA tooltip can be aligned to any of the four sides of the activator element
\r\nPopover Directions
\r\nTooltip visibility can be programmatically changed using v-model.
\r\nTabs Example
\r\nThe v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.
{{ tabExample.text }}
\r\nIcons Tabs
\r\nv-tab's can contain icons as well as text. This increases the v-tabs height to 72px.
{{ tabWithIcons.text }}
\r\nExpansion Panel Example
\r\nCustomize Expansion Panel Example
\r\nPagination Example
\r\nThe v-pagination component is used to separate\r\n long sets of data so that it is easier for a user to consume information.
Pagination Length
\r\nUsing the length prop you can set the length of v-pagination, if the number of\r\n page buttons exceeds the parent container, it will truncate the list.
Circle
\r\nThe circle prop gives you an alternate style for pagination buttons.
Disabled
\r\nPagination items can be manually deactivated using the disabled prop.
Progress Linear
\r\nUsing the indeterminate prop, v-progress-linear continuously animates.
Indeterminate
\r\nThe progress linear component can have a determinate state modified by v-model.
Stream
\r\nThe stream property works with buffer-value to convey to the user\r\n that there is some action taking place. You can use any combination of buffer-value and value to achieve your design.
Striped
\r\nThe stream property works with buffer-value to convey to the user\r\n that there is some action taking place. You can use any combination of buffer-value and value to achieve your design.
Progress Circular
\r\nThe v-progress-circular component is used to convey data circularly to\r\n users.
Indeterminate
\r\nUsing the indeterminate prop, a v-progress-circular continues to animate indefinitely.
Size and Width
\r\nThe size and width props allow you to easily\r\n alter the size and width of the component.
Rotate
\r\nThe rotate prop gives you the ability to customize the v-progress-circular's origin.
Inputs
\r\nA simple text field with placeholder and/or label.
\r\nNormal field
\r\nLabel hint
\r\nDisable input
\r\nPrepended input
\r\nPassword
\r\nAppended input
\r\nDense
\r\nYou can reduces the text field height with dense prop.
Normal field
\r\nFilled field
\r\nDense & Rounded
\r\nSolo
\r\nOutlined
\r\nOutlined
\r\nSelects
\r\nInput Variants
\r\nTextareas
\r\nDrag and Drop
\r\nThis is an example of an event calendar where you can drag events, extend their length, and create events.
\r\nEvents
\r\nThis is an example of a planner with additional event handlers and external components controlling the display of the calendar.
\r\n![\"Logo\"](\"../../../assets/img/logo.jpg\"){kind=logo}
\r\n Note:
\r\nSome nights I stay up cashing in my bad luck.\r\n Some nights I call it a draw
\r\n \r\n\r\n Note:\r\n Thank you for your business. Keep in mind,\r\n sometimes bad things happen. But it's just\r\n sometimes.\r\n
\r\nSubtotal
\r\nTax(10%)
\r\nTotal
\r\n1,598.88
\r\n159.89
\r\n1,758.77
\r\n\r\n Marketing Consultant\r\n
\r\n\r\n Bob Smith\r\n
\r\nAbout 94 700 000 (0.39 sec.) results
\r\n{{ item.subtitle }}
\r\n{{ item.text }}
\r\nper week
\r\nResults Filtering
\r\nListed content is categorized by the following groups:
\r\n{{ item.content.text }}
\r\nProducts
{{'\\xa0 (' + products.length }} total) \r\nSize guide
\r\nFREE Delivery & Returns
\r\nProduct Info
\r\n135234
\r\nShare photo with a tag #whitetrainers
\r\n32 Reviews
\r\n Read All\r\nการจัดการเนื้อหาเว็บไซต์(ข้อมูลสมาชิก/บุคลากร)
{{ formTitle }}
\r\n\r\nการจัดการสมาชิก
{{ formTitle }}
\r\n\r\n