766 lines
35 KiB
HTML
766 lines
35 KiB
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="./WebUI3.css">
|
||
<div class="WebUI3_Container">
|
||
<h1>WinUI3 Windows 11 Components</h1>
|
||
|
||
<h2>Buttons</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary">Primary Button</button>
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary">Secondary Button</button>
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary WebUI3_ButtonIcon">📄</button>
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary WebUI3_ButtonIcon">⚙️</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Input Fields</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<webui3-input type="text" placeholder="Text input"></webui3-input>
|
||
<webui3-input type="number" placeholder="Number input" value="10"></webui3-input>
|
||
<webui3-input type="password" placeholder="Password"></webui3-input>
|
||
<webui3-input type="text" placeholder="Disabled" disabled></webui3-input>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Text Area</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<textarea class="WebUI3_TextArea" placeholder="Enter your text here...">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</textarea>
|
||
</div>
|
||
|
||
<h2>Dropdown / Select</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ControlContainer WebUI3_CustomSelect" id="customSelect1">
|
||
<button class="WebUI3_CustomSelectButton" onclick="toggleCustomSelect('customSelect1')">
|
||
<span id="customSelect1Text">Option 1</span>
|
||
<span><i class="fas fa-chevron-down"></i></span>
|
||
</button>
|
||
<div class="WebUI3_DropdownBase WebUI3_CustomSelectDropdown" id="customSelect1Dropdown">
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption selected" onclick="selectCustomOption('customSelect1', 'Option 1', 0)">Option 1</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption" onclick="selectCustomOption('customSelect1', 'Option 2', 1)">Option 2</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption" onclick="selectCustomOption('customSelect1', 'Option 3', 2)">Option 3</div>
|
||
</div>
|
||
</div>
|
||
<div class="WebUI3_ControlContainer WebUI3_CustomSelect" id="customSelect2">
|
||
<button class="WebUI3_CustomSelectButton" onclick="toggleCustomSelect('customSelect2')">
|
||
<span id="customSelect2Text">Text</span>
|
||
<span><i class="fas fa-chevron-down"></i></span>
|
||
</button>
|
||
<div class="WebUI3_DropdownBase WebUI3_CustomSelectDropdown" id="customSelect2Dropdown">
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption selected" onclick="selectCustomOption('customSelect2', 'Text', 0)">Text</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption" onclick="selectCustomOption('customSelect2', 'Search', 1)">Search</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_CustomSelectOption" onclick="selectCustomOption('customSelect2', 'Filter', 2)">Filter</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Checkbox</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_CheckboxContainer">
|
||
<input type="checkbox" class="WebUI3_CheckboxInput" checked>
|
||
<div class="WebUI3_Checkbox"></div>
|
||
<span>Checkbox 1</span>
|
||
</label>
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_CheckboxContainer">
|
||
<input type="checkbox" class="WebUI3_CheckboxInput">
|
||
<div class="WebUI3_Checkbox"></div>
|
||
<span>Checkbox 2</span>
|
||
</label>
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_CheckboxContainer">
|
||
<input type="checkbox" class="WebUI3_CheckboxInput" disabled>
|
||
<div class="WebUI3_Checkbox"></div>
|
||
<span>Disabled</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Radio Buttons</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_RadioContainer">
|
||
<input type="radio" name="radio1" class="WebUI3_RadioInput" checked>
|
||
<div class="WebUI3_Radio"></div>
|
||
<span>Text</span>
|
||
</label>
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_RadioContainer">
|
||
<input type="radio" name="radio1" class="WebUI3_RadioInput">
|
||
<div class="WebUI3_Radio"></div>
|
||
<span>Text</span>
|
||
</label>
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_RadioContainer">
|
||
<input type="radio" name="radio1" class="WebUI3_RadioInput">
|
||
<div class="WebUI3_Radio"></div>
|
||
<span>Text</span>
|
||
</label>
|
||
</div>
|
||
<div class="WebUI3_ComponentRow">
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_RadioContainer">
|
||
<input type="radio" name="radio2" class="WebUI3_RadioInput" checked>
|
||
<div class="WebUI3_Radio"></div>
|
||
<span>Option 1</span>
|
||
</label>
|
||
<label class="WebUI3_SelectionControlContainer WebUI3_RadioContainer">
|
||
<input type="radio" name="radio2" class="WebUI3_RadioInput">
|
||
<div class="WebUI3_Radio"></div>
|
||
<span>Option 2</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Toggle Switch</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ToggleContainer">
|
||
<label>Header</label>
|
||
<label class="WebUI3_ToggleContainer">
|
||
<input type="checkbox" class="WebUI3_ToggleInput" checked>
|
||
<div class="WebUI3_Toggle">
|
||
<div class="WebUI3_ToggleSlider"></div>
|
||
</div>
|
||
</label>
|
||
<span>On</span>
|
||
</div>
|
||
<div class="WebUI3_ToggleContainer">
|
||
<label>Footer</label>
|
||
<label class="WebUI3_ToggleContainer">
|
||
<input type="checkbox" class="WebUI3_ToggleInput">
|
||
<div class="WebUI3_Toggle">
|
||
<div class="WebUI3_ToggleSlider"></div>
|
||
</div>
|
||
</label>
|
||
<span>Off</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Slider</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_SliderContainer">
|
||
<input type="range" min="0" max="100" value="65" class="WebUI3_Slider" id="slider1" oninput="updateSliderValue('slider1', 'sliderValue1')">
|
||
<span id="sliderValue1" class="WebUI3_SliderValue">65%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Progress Bar</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ProgressContainer">
|
||
<div class="WebUI3_ProgressBar" style="width: 65%"></div>
|
||
</div>
|
||
<span>65%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Spinner</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_Spinner"></div>
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary" onclick="toggleSpinner()">Toggle Spinner</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Tooltip</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_TooltipContainer">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary">Hover me</button>
|
||
<div class="WebUI3_Tooltip">This is a tooltip</div>
|
||
</div>
|
||
<div class="WebUI3_TooltipContainer">
|
||
<button class="WebUI3_Button WebUI3_ButtonIcon">❓</button>
|
||
<div class="WebUI3_Tooltip">Help information</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Card</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_Card">
|
||
<div class="WebUI3_CardTitle">Card Title</div>
|
||
<div class="WebUI3_CardContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</div>
|
||
</div>
|
||
<div class="WebUI3_Card">
|
||
<div class="WebUI3_CardTitle">Another Card</div>
|
||
<div class="WebUI3_CardContent">Vivamus hendrerit arcu sed erat molestie vehicula.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Tabs</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_TabsContainer">
|
||
<div class="WebUI3_TabsHeader">
|
||
<button class="WebUI3_TabButton active" onclick="switchTab(event, 'tab1')">Tab 1</button>
|
||
<button class="WebUI3_TabButton" onclick="switchTab(event, 'tab2')">Tab 2</button>
|
||
<button class="WebUI3_TabButton" onclick="switchTab(event, 'tab3')">Tab 3</button>
|
||
</div>
|
||
<div class="WebUI3_TabContent">
|
||
<div id="tab1" class="WebUI3_TabPane active">
|
||
<p>Content for Tab 1</p>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||
</div>
|
||
<div id="tab2" class="WebUI3_TabPane">
|
||
<p>Content for Tab 2</p>
|
||
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>
|
||
</div>
|
||
<div id="tab3" class="WebUI3_TabPane">
|
||
<p>Content for Tab 3</p>
|
||
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>List View</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ListView">
|
||
<div class="WebUI3_ListItem selected">Item 1</div>
|
||
<div class="WebUI3_ListItem">Item 2</div>
|
||
<div class="WebUI3_ListItem">Item 3</div>
|
||
<div class="WebUI3_ListItem">Item 4</div>
|
||
<div class="WebUI3_ListItem">Item 5</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Grid View</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_GridView">
|
||
<div class="WebUI3_GridItem">
|
||
<div class="WebUI3_GridItemIcon">📁</div>
|
||
<div class="WebUI3_GridItemTitle">Documents</div>
|
||
<div class="WebUI3_GridItemSubtitle">24 items</div>
|
||
</div>
|
||
<div class="WebUI3_GridItem">
|
||
<div class="WebUI3_GridItemIcon">🖼️</div>
|
||
<div class="WebUI3_GridItemTitle">Pictures</div>
|
||
<div class="WebUI3_GridItemSubtitle">132 items</div>
|
||
</div>
|
||
<div class="WebUI3_GridItem">
|
||
<div class="WebUI3_GridItemIcon">🎵</div>
|
||
<div class="WebUI3_GridItemTitle">Music</div>
|
||
<div class="WebUI3_GridItemSubtitle">48 items</div>
|
||
</div>
|
||
<div class="WebUI3_GridItem">
|
||
<div class="WebUI3_GridItemIcon">🎬</div>
|
||
<div class="WebUI3_GridItemTitle">Videos</div>
|
||
<div class="WebUI3_GridItemSubtitle">12 items</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Navigation View</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_NavView">
|
||
<div class="WebUI3_NavPane">
|
||
<div class="WebUI3_NavItem active">🏠 Home</div>
|
||
<div class="WebUI3_NavItem">👤 Profile</div>
|
||
<div class="WebUI3_NavItem">📧 Messages</div>
|
||
<div class="WebUI3_NavItem">⚙️ Settings</div>
|
||
<div class="WebUI3_NavItem">❓ Help</div>
|
||
</div>
|
||
<div class="WebUI3_NavContent">
|
||
<h3>Home</h3>
|
||
<p>Welcome to the WinUI3 Windows 11 Components demo.</p>
|
||
<p>This is the content area for the selected navigation item.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Command Bar</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_CommandBar">
|
||
<button class="WebUI3_CommandButton active">B</button>
|
||
<button class="WebUI3_CommandButton">I</button>
|
||
<button class="WebUI3_CommandButton">U</button>
|
||
<div class="WebUI3_CommandSeparator"></div>
|
||
<button class="WebUI3_CommandButton">📋</button>
|
||
<button class="WebUI3_CommandButton">✂️</button>
|
||
<button class="WebUI3_CommandButton">📋</button>
|
||
<div class="WebUI3_CommandSeparator"></div>
|
||
<button class="WebUI3_CommandButton">↶</button>
|
||
<button class="WebUI3_CommandButton">↷</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Flyout</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ControlContainer WebUI3_FlyoutContainer">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary" onclick="toggleFlyout('flyout1')">Show Flyout</button>
|
||
<div id="flyout1" class="WebUI3_DropdownBase WebUI3_Flyout">
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Option 1</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Option 2</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Option 3</div>
|
||
</div>
|
||
</div>
|
||
<div class="WebUI3_ControlContainer WebUI3_FlyoutContainer">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary" onclick="toggleFlyout('flyout2')">Context Menu</button>
|
||
<div id="flyout2" class="WebUI3_DropdownBase WebUI3_Flyout">
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Cut</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Copy</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Paste</div>
|
||
<div class="WebUI3_DropdownItem WebUI3_FlyoutItem">Delete</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Content Dialog</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary" onclick="showDialog()">Show Dialog</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Split View</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_SplitView">
|
||
<div class="WebUI3_SplitPane">
|
||
<h3>Left Pane</h3>
|
||
<div class="WebUI3_ListItem">Item 1</div>
|
||
<div class="WebUI3_ListItem">Item 2</div>
|
||
<div class="WebUI3_ListItem">Item 3</div>
|
||
</div>
|
||
<div class="WebUI3_SplitPane">
|
||
<h3>Content</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Rating Control</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_RatingContainer">
|
||
<span class="WebUI3_RatingStar filled" onclick="setRating(1)">★</span>
|
||
<span class="WebUI3_RatingStar filled" onclick="setRating(2)">★</span>
|
||
<span class="WebUI3_RatingStar filled" onclick="setRating(3)">★</span>
|
||
<span class="WebUI3_RatingStar" onclick="setRating(4)">★</span>
|
||
<span class="WebUI3_RatingStar" onclick="setRating(5)">★</span>
|
||
</div>
|
||
<span id="ratingValue">3.0 / 5.0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Calendar</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_CalendarContainer">
|
||
<div class="WebUI3_CalendarHeader">
|
||
<button class="WebUI3_CalendarNav">◀</button>
|
||
<div class="WebUI3_CalendarTitle">June 2023</div>
|
||
<button class="WebUI3_CalendarNav">▶</button>
|
||
</div>
|
||
<div class="WebUI3_CalendarWeekdays">
|
||
<div class="WebUI3_CalendarWeekday">Sun</div>
|
||
<div class="WebUI3_CalendarWeekday">Mon</div>
|
||
<div class="WebUI3_CalendarWeekday">Tue</div>
|
||
<div class="WebUI3_CalendarWeekday">Wed</div>
|
||
<div class="WebUI3_CalendarWeekday">Thu</div>
|
||
<div class="WebUI3_CalendarWeekday">Fri</div>
|
||
<div class="WebUI3_CalendarWeekday">Sat</div>
|
||
</div>
|
||
<div class="WebUI3_CalendarDays">
|
||
<div class="WebUI3_CalendarDay other-month">28</div>
|
||
<div class="WebUI3_CalendarDay other-month">29</div>
|
||
<div class="WebUI3_CalendarDay other-month">30</div>
|
||
<div class="WebUI3_CalendarDay other-month">31</div>
|
||
<div class="WebUI3_CalendarDay">1</div>
|
||
<div class="WebUI3_CalendarDay">2</div>
|
||
<div class="WebUI3_CalendarDay">3</div>
|
||
<div class="WebUI3_CalendarDay">4</div>
|
||
<div class="WebUI3_CalendarDay">5</div>
|
||
<div class="WebUI3_CalendarDay">6</div>
|
||
<div class="WebUI3_CalendarDay">7</div>
|
||
<div class="WebUI3_CalendarDay">8</div>
|
||
<div class="WebUI3_CalendarDay">9</div>
|
||
<div class="WebUI3_CalendarDay">10</div>
|
||
<div class="WebUI3_CalendarDay">11</div>
|
||
<div class="WebUI3_CalendarDay">12</div>
|
||
<div class="WebUI3_CalendarDay">13</div>
|
||
<div class="WebUI3_CalendarDay">14</div>
|
||
<div class="WebUI3_CalendarDay today selected">15</div>
|
||
<div class="WebUI3_CalendarDay">16</div>
|
||
<div class="WebUI3_CalendarDay">17</div>
|
||
<div class="WebUI3_CalendarDay">18</div>
|
||
<div class="WebUI3_CalendarDay">19</div>
|
||
<div class="WebUI3_CalendarDay">20</div>
|
||
<div class="WebUI3_CalendarDay">21</div>
|
||
<div class="WebUI3_CalendarDay">22</div>
|
||
<div class="WebUI3_CalendarDay">23</div>
|
||
<div class="WebUI3_CalendarDay">24</div>
|
||
<div class="WebUI3_CalendarDay">25</div>
|
||
<div class="WebUI3_CalendarDay">26</div>
|
||
<div class="WebUI3_CalendarDay">27</div>
|
||
<div class="WebUI3_CalendarDay">28</div>
|
||
<div class="WebUI3_CalendarDay">29</div>
|
||
<div class="WebUI3_CalendarDay">30</div>
|
||
<div class="WebUI3_CalendarDay other-month">1</div>
|
||
<div class="WebUI3_CalendarDay other-month">2</div>
|
||
<div class="WebUI3_CalendarDay other-month">3</div>
|
||
<div class="WebUI3_CalendarDay other-month">4</div>
|
||
<div class="WebUI3_CalendarDay other-month">5</div>
|
||
<div class="WebUI3_CalendarDay other-month">6</div>
|
||
<div class="WebUI3_CalendarDay other-month">7</div>
|
||
<div class="WebUI3_CalendarDay other-month">8</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Time Picker</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_TimePickerContainer">
|
||
<input type="number" class="WebUI3_InputBase WebUI3_TimePickerInput" value="09" min="0" max="23">
|
||
<div class="WebUI3_TimePickerSeparator">:</div>
|
||
<input type="number" class="WebUI3_InputBase WebUI3_TimePickerInput" value="30" min="0" max="59">
|
||
</div>
|
||
<div class="WebUI3_TimePickerContainer">
|
||
<input type="number" class="WebUI3_InputBase WebUI3_TimePickerInput" value="09" min="1" max="12">
|
||
<div class="WebUI3_TimePickerSeparator">:</div>
|
||
<input type="number" class="WebUI3_InputBase WebUI3_TimePickerInput" value="30" min="0" max="59">
|
||
<select class="WebUI3_SelectBase WebUI3_SelectField small">
|
||
<option>AM</option>
|
||
<option>PM</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Color Picker</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_ColorPickerContainer">
|
||
<div class="WebUI3_ColorPickerPreview" id="colorPreview"></div>
|
||
<input type="text" class="WebUI3_InputBase WebUI3_ColorPickerInput" value="#FF0000" id="colorInput">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary" onclick="changeColor()">Change Color</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Person Picture</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_PersonPicture small">JD</div>
|
||
<div class="WebUI3_PersonPicture">JD</div>
|
||
<div class="WebUI3_PersonPicture large">JD</div>
|
||
<div class="WebUI3_PersonPicture extra-large">JD</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Info Bar</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_InfoBar info">
|
||
<div class="WebUI3_InfoBarIcon">ℹ️</div>
|
||
<div class="WebUI3_InfoBarMessage">This is an informational message.</div>
|
||
<button class="WebUI3_InfoBarAction">Learn more</button>
|
||
<button class="WebUI3_InfoBarClose">✕</button>
|
||
</div>
|
||
<div class="WebUI3_InfoBar warning">
|
||
<div class="WebUI3_InfoBarIcon">⚠️</div>
|
||
<div class="WebUI3_InfoBarMessage">This is a warning message.</div>
|
||
<button class="WebUI3_InfoBarAction">Dismiss</button>
|
||
<button class="WebUI3_InfoBarClose">✕</button>
|
||
</div>
|
||
<div class="WebUI3_InfoBar error">
|
||
<div class="WebUI3_InfoBarIcon">❌</div>
|
||
<div class="WebUI3_InfoBarMessage">This is an error message.</div>
|
||
<button class="WebUI3_InfoBarAction">Retry</button>
|
||
<button class="WebUI3_InfoBarClose">✕</button>
|
||
</div>
|
||
<div class="WebUI3_InfoBar success">
|
||
<div class="WebUI3_InfoBarIcon">✅</div>
|
||
<div class="WebUI3_InfoBarMessage">This is a success message.</div>
|
||
<button class="WebUI3_InfoBarClose">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Teaching Tip</h2>
|
||
<div class="WebUI3_ComponentGroup">
|
||
<div class="WebUI3_ComponentRow">
|
||
<div class="WebUI3_TeachingTip top" id="teachingTip1">
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary">New Feature</button>
|
||
<div class="WebUI3_TeachingTipContent">
|
||
<div class="WebUI3_TeachingTipTitle">New Feature Available</div>
|
||
<div class="WebUI3_TeachingTipMessage">Try out our new feature that helps you organize your content more efficiently.</div>
|
||
<div class="WebUI3_TeachingTipActions">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary">Maybe later</button>
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary">Try it now</button>
|
||
</div>
|
||
<div class="WebUI3_TeachingTipArrow"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dialog Overlay -->
|
||
<div id="dialogOverlay" class="WebUI3_DialogOverlay">
|
||
<div class="WebUI3_Dialog">
|
||
<div class="WebUI3_DialogTitle">Dialog Title</div>
|
||
<div class="WebUI3_DialogContent">
|
||
<p>This is a content dialog with some information for the user.</p>
|
||
<p>You can add any content here, including text, images, or other components.</p>
|
||
</div>
|
||
<div class="WebUI3_DialogActions">
|
||
<button class="WebUI3_Button WebUI3_ButtonSecondary" onclick="hideDialog()">Cancel</button>
|
||
<button class="WebUI3_Button WebUI3_ButtonPrimary" onclick="hideDialog()">OK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
class WebUI3_Input extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
const type = this.getAttribute('type') || 'text';
|
||
const placeholder = this.getAttribute('placeholder') || '';
|
||
const value = this.getAttribute('value') || '';
|
||
const disabled = this.hasAttribute('disabled');
|
||
|
||
if (type === 'password') {
|
||
this.className = 'WebUI3_ControlContainer WebUI3_PasswordContainer';
|
||
this.innerHTML = `
|
||
<input type="password" class="WebUI3_InputBase" placeholder="${placeholder}" value="${value}" ${disabled ? 'disabled' : ''}>
|
||
<button class="WebUI3_PasswordToggle">👁️</button>
|
||
`;
|
||
|
||
const input = this.querySelector('input');
|
||
const toggle = this.querySelector('button');
|
||
|
||
toggle.addEventListener('click', () => {
|
||
input.type = input.type === 'password' ? 'text' : 'password';
|
||
});
|
||
} else {
|
||
this.innerHTML = `<input type="${type}" class="WebUI3_InputBase" placeholder="${placeholder}" value="${value}" ${disabled ? 'disabled' : ''}>`;
|
||
}
|
||
}
|
||
}
|
||
|
||
customElements.define('webui3-input', WebUI3_Input);
|
||
|
||
function toggleSpinner() {
|
||
const spinner = document.querySelector('.WebUI3_Spinner');
|
||
spinner.style.display = spinner.style.display === 'none' ? 'block' : 'none';
|
||
}
|
||
|
||
function switchTab(event, tabId) {
|
||
const tabPanes = document.querySelectorAll('.WebUI3_TabPane');
|
||
tabPanes.forEach(pane => pane.classList.remove('active'));
|
||
|
||
const tabButtons = document.querySelectorAll('.WebUI3_TabButton');
|
||
tabButtons.forEach(button => button.classList.remove('active'));
|
||
|
||
document.getElementById(tabId).classList.add('active');
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
function toggleFlyout(flyoutId) {
|
||
const flyout = document.getElementById(flyoutId);
|
||
flyout.classList.toggle('show');
|
||
|
||
const allFlyouts = document.querySelectorAll('.WebUI3_Flyout');
|
||
allFlyouts.forEach(f => {
|
||
if (f.id !== flyoutId) {
|
||
f.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
document.addEventListener('click', function closeFlyout(e) {
|
||
if (!e.target.closest('.WebUI3_FlyoutContainer')) {
|
||
flyout.classList.remove('show');
|
||
document.removeEventListener('click', closeFlyout);
|
||
}
|
||
});
|
||
}
|
||
|
||
function showDialog() {
|
||
const dialogOverlay = document.getElementById('dialogOverlay');
|
||
dialogOverlay.classList.add('show');
|
||
document.body.classList.add('WebUI3_BodyScrollLock');
|
||
}
|
||
|
||
function hideDialog() {
|
||
const dialogOverlay = document.getElementById('dialogOverlay');
|
||
dialogOverlay.classList.remove('show');
|
||
document.body.classList.remove('WebUI3_BodyScrollLock');
|
||
}
|
||
|
||
function changeColor() {
|
||
const colorInput = document.getElementById('colorInput');
|
||
const colorPreview = document.getElementById('colorPreview');
|
||
colorPreview.style.backgroundColor = colorInput.value;
|
||
}
|
||
|
||
function updateSliderValue(sliderId, valueId) {
|
||
const slider = document.getElementById(sliderId);
|
||
const valueDisplay = document.getElementById(valueId);
|
||
const value = slider.value;
|
||
const min = slider.min || 0;
|
||
const max = slider.max || 100;
|
||
const percentage = ((value - min) / (max - min)) * 100;
|
||
|
||
valueDisplay.textContent = value + '%';
|
||
|
||
// 更新活动轨道的样式
|
||
slider.style.setProperty('--value', percentage + '%');
|
||
}
|
||
|
||
function setRating(rating) {
|
||
const stars = document.querySelectorAll('.WebUI3_RatingStar');
|
||
stars.forEach((star, index) => {
|
||
if (index < rating) {
|
||
star.classList.add('filled');
|
||
} else {
|
||
star.classList.remove('filled');
|
||
}
|
||
});
|
||
document.getElementById('ratingValue').textContent = rating.toFixed(1) + ' / 5.0';
|
||
}
|
||
|
||
function toggleCustomSelect(selectId) {
|
||
const dropdown = document.getElementById(selectId + 'Dropdown');
|
||
dropdown.classList.toggle('show');
|
||
|
||
const allDropdowns = document.querySelectorAll('.WebUI3_CustomSelectDropdown');
|
||
allDropdowns.forEach(d => {
|
||
if (d.id !== selectId + 'Dropdown') {
|
||
d.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
document.addEventListener('click', function closeDropdown(e) {
|
||
if (!e.target.closest('.WebUI3_CustomSelect')) {
|
||
dropdown.classList.remove('show');
|
||
document.removeEventListener('click', closeDropdown);
|
||
}
|
||
});
|
||
}
|
||
|
||
function selectCustomOption(selectId, optionText, optionIndex) {
|
||
const textElement = document.getElementById(selectId + 'Text');
|
||
textElement.textContent = optionText;
|
||
|
||
const options = document.querySelectorAll('#' + selectId + 'Dropdown .WebUI3_CustomSelectOption');
|
||
options.forEach((option, index) => {
|
||
if (index === optionIndex) {
|
||
option.classList.add('selected');
|
||
} else {
|
||
option.classList.remove('selected');
|
||
}
|
||
});
|
||
|
||
const dropdown = document.getElementById(selectId + 'Dropdown');
|
||
dropdown.classList.remove('show');
|
||
|
||
// 退出聚焦状态，收回下拉箭头
|
||
const button = document.querySelector('#' + selectId + ' .WebUI3_CustomSelectButton');
|
||
if (button) {
|
||
button.blur();
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.WebUI3_CalendarDay').forEach(day => {
|
||
if (!day.classList.contains('other-month')) {
|
||
day.addEventListener('click', function() {
|
||
document.querySelectorAll('.WebUI3_CalendarDay').forEach(d => {
|
||
d.classList.remove('selected');
|
||
});
|
||
this.classList.add('selected');
|
||
});
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('.WebUI3_ListItem').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelectorAll('.WebUI3_ListItem').forEach(i => {
|
||
i.classList.remove('selected');
|
||
});
|
||
this.classList.add('selected');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.WebUI3_NavItem').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
document.querySelectorAll('.WebUI3_NavItem').forEach(i => {
|
||
i.classList.remove('active');
|
||
});
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.WebUI3_InfoBarClose').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
this.parentElement.style.display = 'none';
|
||
});
|
||
});
|
||
|
||
function positionTeachingTip(teachingTipId) {
|
||
const tip = document.getElementById(teachingTipId);
|
||
const content = tip.querySelector('.WebUI3_TeachingTipContent');
|
||
const tipRect = tip.getBoundingClientRect();
|
||
const contentRect = content.getBoundingClientRect();
|
||
|
||
tip.classList.remove('top', 'bottom', 'left', 'right');
|
||
|
||
const spaceAbove = tipRect.top;
|
||
const spaceBelow = window.innerHeight - tipRect.bottom;
|
||
const spaceLeft = tipRect.left;
|
||
const spaceRight = window.innerWidth - tipRect.right;
|
||
|
||
if (spaceAbove > contentRect.height + 20) {
|
||
tip.classList.add('top');
|
||
} else if (spaceBelow > contentRect.height + 20) {
|
||
tip.classList.add('bottom');
|
||
} else if (spaceLeft > contentRect.width + 20) {
|
||
tip.classList.add('left');
|
||
} else if (spaceRight > contentRect.width + 20) {
|
||
tip.classList.add('right');
|
||
} else {
|
||
tip.classList.add('top');
|
||
content.style.maxHeight = spaceAbove - 20 + 'px';
|
||
content.style.overflowY = 'auto';
|
||
}
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.querySelectorAll('.WebUI3_Slider').forEach(slider => {
|
||
const valueId = slider.id.replace('slider', 'sliderValue');
|
||
updateSliderValue(slider.id, valueId);
|
||
slider.addEventListener('input', function() {
|
||
updateSliderValue(slider.id, valueId);
|
||
});
|
||
});
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
positionTeachingTip('teachingTip1');
|
||
|
||
window.addEventListener('resize', function() {
|
||
positionTeachingTip('teachingTip1');
|
||
});
|
||
});
|
||
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.WebUI3_FlyoutContainer')) {
|
||
document.querySelectorAll('.WebUI3_Flyout').forEach(f => {
|
||
f.classList.remove('show');
|
||
});
|
||
}
|
||
|
||
if (!e.target.closest('.WebUI3_CustomSelect')) {
|
||
document.querySelectorAll('.WebUI3_CustomSelectDropdown').forEach(d => {
|
||
d.classList.remove('show');
|
||
});
|
||
}
|
||
});
|
||
</script> |